ArcGIS API for JavaScript （1）——创建一个入门应用

官网地址：https://developers.arcgis.com/javascript/latest/guide/create-a-starter-app/

本节目标：如何构建一个显示2D地图或3D场景的简单应用。

构建以2D或3D显示地理数据的地图绘制应用程序，第一步是创建一个包含底图的地图。

可以使用ArcGIS Online中托管的底图，也可以将自己的底图与自定义样式一起使用。如果要将数据添加到地图，则可以将点、线、多边形和文本添加为图形，或者，对于较大的数据集，可以使用要素图层添加数据。定义地图后，可以使用MapView将其显示为2D或使用SceneView将其显示为3D。视图负责显示地图，处理用户交互以及设置地图的位置。

1、创建一个HTML页面

2、添加CSS和API的引用

3、创建2D地图或3D场景

4、完整示例——2D map（MapView）

5、完整示例——3D scene（SceneView）

1、创建一个HTML页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

2、添加CSS和API的引用

在<head>中，添加引用：

 <link rel="stylesheet" href="/esri/themes/light/main.css">
 <script src="/"></script>

3、创建2D地图或3D场景

在<head>中，添加<script>标记和AMD require语句以加载Map和MapView或SceneView模块。创建一个新的Map并将basemap属性设置为topo-vector。如果要创建3D场景，请将地面属性设置为世界高程，以便显示高程变化。最后，按照以下步骤之一创建适当的视图：

2D map（MapView）

 <script>
  require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {

    var map = new Map({
      basemap: "topo-vector"
    });

    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.80500, 34.02700], // longitude, latitude
      zoom: 13
    });
  });
  </script>

3D scene（SceneView）

<script>
  require([
      "esri/Map",
      "esri/views/SceneView"
    ], function(Map, SceneView) {

    var map = new Map({
      basemap: "topo-vector",
      ground: "world-elevation"  // show elevation
    });

    var view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: {
        position: {  // observation point
          x: -118.80800,
          y: 33.96100,
          z: 25000 // altitude in meters
        },
        tilt: 65  // perspective in degrees
      }
    });
  });
  </script>

4、完整示例——2D map（MapView）

https://codepen.io/esri_devlabs/pen/JZeeEZ?editors=100&__cf_chl_jschl_tk__=c4de5953077bc8552303727f11de87091183afa5-1580800025-0-AY5VdcpO3CBVDrQNcMY_zMC6ZD-q0jEE0BW3ysKHVaxJXe8qcel3eQ0GGLA5zjffGT6WMJz4IJXucwo4F_5_vk1lVU1sYnNhmYp74Mg7bDvgzSEB4RLKeM2XKxUAkP6QggHVEC4SbChfRCfKhyRtLPs0qaTQrdwPlx7IpR2R3CoQRAJhHDkgZK_wGeTyeuKZTKKhmMl-gbmYKK17_XWxFaBKXxtwwDZiMjGfZsyhOjYNfLfjDQWTe723wNCExsNosHQ11bV7HC67v_9nG46IMp-r06BXeh2rddeNpldbn-S3R7RenaBuJBqfQy4CiruK8esLEAD8ZxRH4tJIaHuO7fAa9T5zzU8yTPAzgSlMQ7hLIiEhqYTTMbMhPsiHdQDipw

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css">
  <script src="https://js.arcgis.com/4.13/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

5、完整示例——3D scene（SceneView）

https://codepen.io/esri_devlabs/pen/joVgav?editors=100

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App (3D)</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css">
  <script src="https://js.arcgis.com/4.13/"></script>
  
  <script>  
    require([
        "esri/Map", 
        "esri/views/SceneView"
    ], function(Map, SceneView) {

      var map = new Map({
        basemap: "topo-vector",
        ground: "world-elevation"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
          position: {
            x: -118.808,
            y: 33.961,
            z: 2000 // meters
          },
          tilt: 75
        }
      });
      
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

来源：CSDN

作者：椰子菇凉学编程

链接：https://blog.csdn.net/OTTOkongbai/article/details/104169553

标签

arcgis

esri

gis