前端入门ArcGIS教程（一）（下）-阿里云开发者社区

四、2D demo分享

1.参考 ArcGIS API for JavaScript

1、设置一个类似于以下示例的基本 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 API for JavaScript ：

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

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

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

2. 加载模块

使用第二个<script>标签从 API 加载特定模块。使用以下代码段中的语法加载以下模块：

esri/Map - 加载特定于创建地图的代码

esri/views/MapView - 加载允许以 2D 方式查看地图的代码

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

在构建简单页面或进行试验时，将 JavaScript 放入脚本标记中很有用，但不适用于较大的应用程序。在构建更大的应用程序时，所有 JavaScript 都应该在单独的.js文件中。

全局require()函数用于加载 API 的AMD模块。要了解有关 API 不同模块的更多信息，请访问工具指南简介页面。

3. 创建地图

使用来创建新地图Map，它是对从esri/Map模块加载的 Map 类的引用。我们可以basemap通过将对象传递给 Map 构造函数来指定地图属性，例如。

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选项来使用备用底图。查看Map 类以获取有关其他地图选项的更多详细信息。

4. 创建二维视图

查看在 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 created in step 3
  });
});

在这个片段中，我们将container属性设置为将保存地图的 DOM 节点的名称，在这种情况下，我们使用元素的id属性<div>。该map属性引用了我们在上一步中创建的地图对象。请参阅MapView 文档，可以在视图上设置的其他属性，包括center和zoom，可用于定义视图的初始范围。

5.定义页面内容

现在创建地图和视图所需的 JavaScript 已完成！下一步是添加相关的 HTML 以查看地图。对于这个例子，HTML 非常简单：添加一个<body>标签，它定义了在浏览器中可见的内容，以及<div>将在其中创建视图的主体内的单个元素。

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

该<div>有一个id“viewDiv”的匹配id传递到MapView类的container构造函数属性。

6. 设计页面

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

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

如果现在已经使用 ArcGIS API for JavaScript 4.0 在 2D 中构建了我们的第一个 Web 应用程序！最终 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>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.21/"></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>

五、3D demo分享

1.参考 ArcGIS API for JavaScript

1.1、首先，设置一个类似于以下示例的基本 HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>广东靓仔实现2D demo</title>
  </head>
</html>

1.2、在<head>标签内，使用<script>和<link>标签引用 ArcGIS API for JavaScript ：

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

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

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

2. 加载模块

使用第二个<script>标签从 API 加载特定模块。使用以下代码段中的语法加载以下模块：

esri/Map - 加载特定于创建地图的代码

esri/views/SceneView - 加载允许以 3D 方式查看地图的代码

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

在构建简单页面或进行试验时，将 JavaScript 放入脚本标记中很有用，但不适用于较大的应用程序。在构建更大的应用程序时，所有 JavaScript 都应该在单独的.js文件中。

全局require()函数用于加载 API 的AMD模块。要了解有关 API 不同模块的更多信息，请访问工具指南简介页面。

3. 创建地图

使用来创建新地图Map，它是对从esri/Map模块加载的 Map 类的引用。我们可以basemap通过将对象传递给 Map 构造函数来指定地图属性，例如和 'ground。

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

其他底图选项包括：satellite、hybrid、

gray-vector、dark-gray-vector、

oceans、streets-vector、osm、

national-geographic、

streets-night-vector。

通过修改沙箱中的basemap选项来使用备用底图。查看Map 类以获取有关其他地图选项的更多详细信息。

'Map' 的 'ground' 属性指定地图的表面属性。仅在将地图添加到 3D SceneView 时才相关。字符串“world-elevation”指定使用 World Elevation Service 的地面实例。

4. 创建 3D 视图

查看在 HTML 文件中充当容器的参考节点，允许用户查看 HTML 页面内的地图。SceneView通过将对象传递给其构造函数来创建一个新对象并设置其属性：

require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
  const map = new Map({
    basemap: "topo-vector",
    ground: "world-elevation"
  });
  const view = new SceneView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});

在这个片段中，我们将container属性设置为将保存地图的 DOM 节点的名称，在这种情况下，我们使用元素的id属性<div>。该map属性引用了我们在上一步中创建的地图对象。请参阅SceneView 文档可以在视图上设置的其他属性，包括center和scale，可用于定义视图的初始范围。

5.定义页面内容

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

该<div>有一个id“viewDiv”的匹配id传递给SceneView的container在constructor属性。

6. 设计页面

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

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

我们现在已经使用 ArcGIS API for JavaScript 构建了我们的第一个 3D 网络应用程序。最终 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 SceneView - Create a 3D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-vector",
          ground: "world-elevation"
        });
        const view = new SceneView({
          container: "viewDiv", // Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          scale: 50000000, // Sets the initial scale to 1:50,000,000
          center: [-101.17, 21.78] // Sets the center point of view with lon/lat
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

六、总结

在我们阅读完官方文档后，我们一定会进行更深层次的学习，比如看下框架底层是如何运行的，以及源码的阅读。

这里广东靓仔给下一些小建议：

在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计
阅读下框架官方开发人员写的相关文章
借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解
接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍

前端入门ArcGIS教程（一）（下）

四、2D demo分享

2. 加载模块

3. 创建地图

4. 创建二维视图

5.定义页面内容

6. 设计页面

五、3D demo分享

3. 创建地图

4. 创建 3D 视图

5.定义页面内容

6. 设计页面

六、总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景