分类
ArcGIS

入门MapView：创建2D地图

Intro to MapView – Create a 2D map

前言

在这个教程中，我们将会学习如何创建2D地图视图(MapView)。

注意：这篇文章使用AMD模块，你也可以下载一个兼容ES模块的示例，该示例使用Vite.js来创建本地构建
如果想了解关于不同API模块的区别，可以看这篇文章。

一、引用ArcGIS Map SDK for JavaScript

名词解释：
JS——JavaScript
SDK——Software Development Kit，指的是某种计算机语言的一系列开发工具

ArcGIS Map SDK for JavaScript就是ArcGIS为JS编写的一个地图API。

第一步就是初始化一个HTML文件，类似下面代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
  </head>
</html>

我们需要在<Head>标签中，通过<script> 和 <link>标签引入ArcGIS Map JS SDK：

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

<script>标签通过CDN加载了ArcGIS Map JS SDK。如果出现了版本更新，可以通过修改代码中引用的版本号，来获取最新版本。

<link>标签实现了对于main.css的引用，这个css包含了Esri控件和组件样式特性。（译者注，就是官方必备的CSS样式，原文说的比较啰嗦）

2. 加载模块

使用另一个<script>标签去加载特定的API模块。
esri/Map用来加载特定代码以便创建一个Map对象
esri/views/MapView用来创建一个2D地图
使用方法如下：

<script>
  require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
    // 这里是回调函数，可以操作创建好的对象
  });
</script>

示例中的JS代码放在了HTML脚本中，但对于大型项目来说这种做法并适合，应该放在单独的JS文件中

全局的require()方法用来加载API的AMD模块。对于不同模块的区别，可以访问这个链接来查看教程。

3. 创建Map对象

一张地图使用的是Map对象，这个对象来自esri/Map模块的Map类。在创建Map对象的过程中，我们可以在构造函数中定制它的属性，例如可以修改basemap底图。

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  const map = new Map({
    basemap: "topo-vector"
  });
});

其他的参数包括： satellite, hybrid, gray-vector, dark-gray-vector, oceans, streets-vector, osm, national-geographic, streets-night-vector。在沙盒中更改basemap属性，就可以切换底图。

4. 创建2D视图(View)

作为HTML文件中的容器，视图引用结点(View)允许用户在HTML中嵌入一张地图。通过对象的构造函数，我们可以创建新的MapView并且设置它的属性：

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});

在这个小节中，我们为DOM结点设置一个容器属性(container)，以便让它能够承载地图，因此我们给div标签添加一个id属性。地图视图的map属性实际上引用的就是上一步中我们创建的map对象。
可以点击MapView documentation来查看此视图的其他属性，例如center（中心）和zoom（缩放），这些属性用来定义视图的初始范围。

视图共有两种：地图视图MapView用来显示2D地图，场景视图SceneView用来显示3D视图，点击这篇文章可以学习使用3D视图。

5. 定义页面内容

到目前为止，我们已经写好了负责创建map对象和view视图的JavaScript代码。
（译者注，如果搞不清楚这几个对象的关系，可以理解成：最下层是map对象，map对象的上层是view视图，view视图的上层是layer图层，图层有很多层。
所以无论使用2D还是3D，都要先创建map，基于map创建view，最后在view上绘制layer即可）

下一步我们就来添加HTML以便展示我们的地图。HTML的写法非常简单：先写一个<body>标签，然后在<body>标签中想要显示这个视图的位置放一个<div>标签

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

其中，<div>标签的id，必须与前面MapView中container属性的字符串相匹配。

6.为页面设置样式

样式的代码写在<style>标签中，<style>标签需要被<head>标签包裹，当然，你也可以根据自己的习惯，把样式写在单独的CSS文件中，与普通的前端开发别无二致。

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

到目前为止，我们使用ArcGIS Maps SDK for JavaScript 4.26!完成了一个2D地图应用，最终的代码效果类似下面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
        const map = new Map({
          basemap: "topo-vector"
        });
        const view = new MapView({
          container: "viewDiv", // Reference to the view div created in step 5
          map: map, // Reference to the map object created before the view
          zoom: 4, // Sets zoom level based on level of detail (LOD)
          center: [15, 65] // Sets center point of view using longitude,latitude
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>