通过ArcGIS创建2D及3D地图前端开发中，GIS的用途很明确，就是用来做地图。你对地图的操作，不管是图形的绘制还是实

前端开发中，GIS的用途很明确，就是用来做地图。你对地图的操作，不管是图形的绘制还是实体的添加都是在基础地图之上。本文将向你讲诉如何使用GIS创建基础地图以一些API的使用。

前提

在编写代码之前先简单叙述下GIS的原理，GIS也是基于AMD模式，所以你需要通过require(["esri/Map"], function(Map) { })来引入Map的类或者子类，然后通过回调来创建地图实例。

'esri/Map'是创建Map的前提（父类）
创建2D时则需引入MapView子类，回调中也需要指定MapView，require(["esri/Map", "esri/views/MapView"], function(Map,MapView) { })
创建3D时引入SceneView子类，require(["esri/Map", "esri/views/SceneView"], function(Map,SceneView) { })

了解了上面类的大致作用后，接下来代码的实现应该看起来就会易懂点

创建HTML

设置窗口大小，指定试图容器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>2D及3D地图</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

添加GIS的API及CSS样式cdn

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>

创建2D地图

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

    var map = new Map({
      basemap: "satellite"
    });

    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [104, 30],
      zoom: 13
    });
  });
  </script>

关于引用的类就不再缀诉，这里讲讲实例。首先通过Map创建地图实例，basemap指定地图的基本图层样式。关于basemap的可选值有 light-gray-vector，dark-gray-vector，satellite，streets-relief-vector，和streets-navigation-vector，大家可以一一尝试。我这里选用的效果如下：

然后通过MapView创建2D实例，container对应地图容器，center指定视角，这里默认成都周边。

创建3D地图

<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: 104,
          y: 30,
          z: 25000
        },
        tilt: 65
      }
    });
  });
  </script>

3D与2D的区别：

子类不同：3D对应子类为SceneView
Map实例中需添加ground属性，设置world-elevation显示高程变化
camera指定视角，position对应经纬度和高度

小编也是刚用GIS的新手，文章中有错误之处还请大家多多指正。