1 AMD 引用 ArcGIS Maps SDK for JavaScript

在 <head> 标记内，使用 <script> 和 <link> 标记引用 ArcGIS Maps SDK for JavaScript：

<!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>
    
    <!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <!-- 引用 main.css 样式表 -->
    <script src="https://js.arcgis.com/4.27/"></script>
    
  </head>
</html>

<script> 标记从 CDN 加载 ArcGIS Maps SDK for JavaScript。当新版本的 API 发布时，更新版本号以匹配新发布的版本。

<link> 标签引用 main.css 样式表，其中包含 Esri 部件和组件的特定样式。

2 加载相应模块

在<body>标签内的 <script> 标签中，从 API 加载特定模块。使用下面代码段中的语法加载以下模块：

<script>
  require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
    // Code to create the map and view will go here
  });
</script>

全局 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"
  });
});

其他 basemap 包括：

satellite(卫星)
hybrid(混合)
gray-vector(灰色矢量)
dark-gray-vector(深灰色矢量)
oceans(海洋)
streets-vector(街道矢量)
osm
national-geographic(国家地理)
streets-night-vector(街道夜景矢量)。

4 创建 2D 视图 view

将视图 Views 作为 HTML 文件容器的节点引用，允许用户在 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
  });
});

在此代码段中，我们将 container 属性设置为容纳地图的 DOM 节点的名称，在本例中，我们使用了 <div> 元素的 id 属性。map 属性引用我们在上一步中创建的地图对象。有关可在视图上设置的其他属性（包括地图中心 center 和缩放 zoom），请参阅 MapView 文档，这些属性可用于定义视图的初始范围。

5 确定页面内容

现在，创建map和view所需的JavaScript已经完成！下一步是添加用于查看地图的相关HTML。

对于这个例子，HTML非常简单：添加一个<body>标记，它定义了在浏览器中可见的内容，并在将创建视图的body中添加一个 <div> 元素。

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

<div> 的 id 为 viewDiv，以匹配在构造函数中传递给 MapView 中的 container 容器属性的 id。

6 CSS 样式

使用 <head> 标签内的 <style> 标签为页面内容设置样式。要使地图充满浏览器窗口，请在页面 <style> 标签中添加以下 CSS：

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

7 完整代码

代码：

<!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>

    <!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <!-- 引用 main.css 样式表 -->
    <script src="https://js.arcgis.com/4.27/"></script>

</head>

<body>
    <!-- 存放地图内容的div -->
    <div id="viewDiv"></div>

    <script>
        require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
            // 创建Map对象，指定地图
            const map = new Map({
                basemap: "topo-vector"
            });

            // 创建MapView对象
            const view = new MapView({
                container: "viewDiv", // viewDiv为容器div的id
                map: map, // 地图所在的Map对象
                zoom: 4, // 初始LOD缩放等级（0-23） level of detail (LOD)
                // scale: 50000000, // 设置初始比例尺为 1:50,000,000  zoom和scale选其一即可
                center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]
            });
        });
    </script>
</body>

</html>

结果展示：

ArcGIS Maps SDK for JS（二）：MapView简介----创建2D地图-LMLPHP

参考链接：
https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/

孙 悟 空

ArcGIS Maps SDK for JS（二）：MapView简介----创建2D地图

文章目录