GISer从零开始学习ArcGIS API for JavaScript&ArcGIS Online教程（二）第一个地图应用

纬开GIS

已于 2022-07-12 16:39:41 修改

阅读量1.9k

点赞数 3

分类专栏：笔记 GISer从零开始学习ArcGIS API for JavaScrip 文章标签： javascript 学习前端

于 2020-09-17 21:09:45 首次发布

本文链接：https://blog.csdn.net/weixin_46177488/article/details/108364870

版权

笔记同时被 2 个专栏收录

7 篇文章 13 订阅

订阅专栏

GISer从零开始学习ArcGIS API for JavaScrip

7 篇文章 15 订阅

订阅专栏

GISer从零开始学习ArcGIS API for JavaScript&ArcGIS Online教程（二）第一个地图应用

从这篇开始就正式开始使用ArcGIS API for JavaScript&ArcGIS Online了

一、HTML和地图容器

我们的目的是做一幅可以在线浏览的地图，而地图要放到网页里面
先做一个只包含地图的最简单的网页，这个网页具体就是html文件
既然是html就要有html的要素：head、body等等，用来设置网页的标题、编码、布局、内容等等
这个网页里我们只放地图（body里面），就要先给地图安排一个容器，这个容器就是div，我们给它取名叫"viewDiv"：

<body>
  <div id="viewDiv"></div>
</body>

二、引用JS API

ArcGIS JS API的引用非常方便，甚至不需要秘钥，也就意味着，如果你仅仅是加载底图数据和工具的话，都不用注册直接拿来使用就可以
在head里面添加如下引用，这里是引用的最新版4.16：

<script src="https://js.arcgis.com/4.16/"></script>

同时引入CSS文件

<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">

三、require和function

ArcGIS JS API是基于dojo框架的，将许多功能打包成了模块，我们使用的时候不用管具体模块里面是怎么运作的，只需要引入模块，使用功能即可
具体不了解运作方式倒是也不妨碍使用，我们只要弄明白：要使用什么功能模块就先require进来，然后再在后面的fuction里对应地添加上

现在我们先做一张最基本的2D地图，这就需要"esri/Map"地图模块，和 "esri/views/MapView"地图视图模块

这里结合上面提到的HTML和地图容器（div），可以理解为：

HTML 是一所房子
div 是一面用来挂地图的墙
MapView 是用来装地图的框
Map 是里面的那张地图

把这两个路径require然后对应添加function的名称：

 require([
    "esri/Map",
    "esri/views/MapView"
    ], function(Map, MapView) { 
    //要做的事情
    });

注意require的是“路径”： "esri/views/MapView"这种像文件夹目录一样的；而对应function的是“名称”，只有最后“View”这样

四、设置地图

接下来设置具体要显示出来的地图，首先是一个2D地图
Map和MapView模块已经导入，具体要实例化一下
首先是创建一个Map对象，再设置一下底图（basemap）参数：

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

如上面代码块，底图选择了一个"topo-vector"
arcgis提供的底图挺多，交通、影像、地形等常用类型都有了，还可以加载自己的底图
具体basemap的说明和种类，可以看看https://www.cnblogs.com/myfgis/p/5709079.html这篇文章
可以一个一个地试试看看效果
设置好Map，然后创建并设置一个MapView对象：

var view = new MapView({
        container: "viewDiv",  //HMTL里面div的id
        map: map,  //上面创建的Map对象名称
        center: [118.8,39.6],  //地图初始界面中心点坐标
        zoom: 11  //地图初始界面缩放等级
      });

完整代码：

<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>标题</title>
 <style>
   html, body, #viewDiv {
     padding: 0;
     margin: 0;
     height: 100%;
     width: 100%;
   }
 </style>

 <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
 <script src="https://js.arcgis.com/4.16/"></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.8,39.6],
       zoom: 11
     });
   });
 </script>
</head>
<body>
 <div id="viewDiv"></div>
</body>
</html>

效果示意：
在这里插入图片描述

五、3D地图

从API 4.x开始，重头戏就变成了3D，而且确实增加了很多强大的功能，关键是使用起来还很简单方便

require

3D的地图的做法和上面2D的差不多，框架一样，引入时将View改为SceneView：

 require([
    "esri/Map",
    "esri/views/SceneView"
    ], function(Map, SceneView) { 
    //要做的事情
    });

MapView改成SceneView，用过ArcGIS for Desktop的话就不难理解：同样一个地图（Map），在ArcMap里打开就是平面地看，拿ArcScene打开就可以3D方式看，这里也是Map和Scene的区别

设置地图
创建Map对象，同2D方法，底图（basemap）这次我们换一个:

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

接下来是创建并设置一个SceneView对象：

    var view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: {
        position: {
          // 观察点的位置信息
          x: 118.808,
          y: 33.961,
          z: 2000 // 视角高度，类似于2D地图里的缩放级别，单位是米
        },
        tilt: 65 // 倾斜角度
      }
    });

高程设置
上面的地图虽说实现了3D化，但也只是视角的3D转换，地图本身还是扁平的一张纸
除了丰富的底图，ArcGIS还提供了全球的高程数据
使用它也非常简单：

var map = new Map({
       basemap: "hybrid",
       ground: "world-elevation"  //添加全球高程
     });

在map对象里加一个参数ground: “world-elevation” 即可添加上ArcGIS提供的高程信息，如有需要也可以加载自有的高程数据
在这里插入图片描述

效果图，凹凸有致，真3D了
4. 完整代码

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>标题</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require(["esri/Map", "esri/views/SceneView"], function (Map, SceneView) {
    var map = new Map({
      basemap: "hybrid",
      ground: "world-elevation" 
    });

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

附：HTML模板

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>标题</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
    //这里列出所有要用的模块目录，记得中间用逗号隔开，如下行：
    //"esri/Map","esri/views/MapView"
    ], function(//这里列出上面require的模块名，如下行：
               //Map, MapView
               ) {
    //做点什么
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>