ArcGIS API for JavaScript部署开发

ArcGIS API for JavaScript部署开发
官方快速上手教程：https://developers.arcgis.com/javascript/latest/
官方 API 参考文档：https://developers.arcgis.com/javascript/latest/api-reference
文章目录
- 0.前言
  1.引入ArcGIS API for JavaScript部署开发
  1.1在线引入（via CDN）
  1.2本地引入（via NPM & SDK）
  
  2.结语
0.前言

There are multiple options for bringing the ArcGIS Maps SDK for JavaScript into your app.

ESRI官方提供了如下主要开发方式：
- AMD modules via ArcGIS CDN
- ES modules via NPM
- ES modules via CDN
- AMD modules hosted locally
简单来说，ArcGIS Maps SDK for JavaScript 开发可以通过在线引用官网CDN 和通过下载本地开发包引用的两种形式来进行。（这里本地部署又分别可以通过NPM下载模块，或者在官网下载ArcGIS API for JavaScript开发包。)
而，AMD modules 和 ES modules 是js模块化开发的规范。具体可以参考如下文章：https://zhuanlan.zhihu.com/p/467991875
https://developer.aliyun.com/article/1271340
[可以了解：AMD modules 和 ES modules 两种都是异步的，都适用于前端（另外CommonJs是同步的，适用于后端；而 UMD是一种设计模式，可以同时适用于前端和后端这两种不同的模块形式）。 |—| 此外，AMD 使用 requirejs 库来实现，可以使用 require 与 define 两种方式加载依赖。而 ESM 是通过设置type=module ，会将加载的文件视为模块文件，识别模块的import语句并加载。且 Vite 已经在dev与打包中使用ESM。]

一般情况下，我们使用的是AMD Modules，而如果是需要使用框架或构建工具（如VUE）来创建一个项目时，官方推荐使用ES Modules。

下图，这里是AMD and ES modules的比较，可以根据自己的开发需求选择开发方式：

（从版本 4.0 开始，API 已作为 AMD 提供，例如 CDN 使用 AMD 模块。ES 模块在 4.18 版中可用。）
详情可参考：https://developers.arcgis.com/javascript/latest/tooling-intro/

1.引入ArcGIS API for JavaScript部署开发

 1.1在线引入（via 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>
1
2
3
```
通过CDN在线引用，一般用于开发测试。
如下代码为加载官网在线2D地图的示例代码（Build with AMD modules）：
```
DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>加载一个地图title>
    
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/">script>
    <style type="text/css">
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    style>
    <script type="text/javascript">
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/BasemapToggle",
      ], (Map, MapView, BasemapToggle) => {
        //加载地图底图
        var map = new Map({
          basemap: "hybrid", // 指定地图的底图
        });
        //加载视图
        var mapview = new MapView({
          container: "container", // 指定对应的容器
          map: map,
          center: [106.595706, 29.423058], // 设置地图显示中心(经纬度)
          zoom: 6, // 地图显示比例
        });
        const basemapGallery = new BasemapToggle({
          // 定义一个地图切换控件
          view: mapview,
          nextBasemap: "terrain",
        });
        mapview.ui.add(basemapGallery, "bottom-right");
      });
    script>
  head>
  <body>
    <div id="container">div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
```
如下代码为加载一个官网在线2D地图的示例代码（Build with ES modules）：
```
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>maptest_ESmoduletitle>
    <style type="text/css">
      @import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/dark/main.css";
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    style>
    <script type="module">
      import Map from "https://js.arcgis.com/4.27/@arcgis/core/Map.js";
      import MapView from "https://js.arcgis.com/4.27/@arcgis/core/views/MapView.js";
      import BasemapToggle from "https://js.arcgis.com/4.27/@arcgis/core/widgets/BasemapToggle.js";
      //加载地图底图
      var map = new Map({
        basemap: "hybrid", // 指定地图的底图
      });
      //加载视图
      var mapview = new MapView({
        container: "container", // 指定对应的容器
        map: map,
        center: [106.595706, 29.423058], // 设置地图显示中心(经纬度)
        zoom: 6, // 地图显示比例
      });
      const basemapGallery = new BasemapToggle({
        view: mapview,
        nextBasemap: "terrain",
      });
      mapview.ui.add(basemapGallery, "bottom-right");
    script>
  head>
  <body>
    <div id="container">div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
```
1.2本地引入（via NPM & SDK）
- AMD modules hosted locally
本地部署可以GIS知乎上的这篇教程（很详细）：http://zhihu.geoscene.cn/article/3514
这里是简单记录一下：
1. 首先，在https://developers.arcgis.com/downloads/#javascript页面登录自己的账号，将ArcGIS API for JavaScript压缩包文件下载到本地电脑。（PS：如无账号登录下载，也可以在CSDN或其他平台下载其他他人分享的资源包。这里给个可以下载的网站http://www.xiaobaigis.com/Resource）
2. 复制下载解压后的文件“…\arcgis_js_api\library”到你的web服务器的地址。（这里以Windows自带的IIS服务器为例，复制完成之后的地址类似于“C:\Inetpub\wwwroot\arcgis_js_api\library”）【补充：启动IIS服务器可参考这篇博客：https://blog.csdn.net/qq_38553355/article/details/98648491】
3. 修改相关文件配置，将上述路径下的dojo.js和init.js文件内的[HOSTNAME_AND_PATH_TO_JSAPI]修改为自己的网络地址路径。（例如：localhost/arcgis_js_api/library/4.6/ 。注意，在4.X的API中默认使用的是https协议，如果你未使用则需将前面的"https://"改成“http://” ）
4. 接下来就可以直接引用了，如CDN引用类似：
```
<link
    rel="stylesheet"
    href="http://localhost/arcgis_js_api/library/4.6/esri/themes/light/main.css"
/>
<script src="http://localhost/arcgis_js_api/library/4.6/init.js">script>
1
2
3
4
5
```
JavaScript代码部分就按照 AMD modules 规范写就好。
如果需要访问官方提供的3D或其他地图资源和其他开发服务功能，则还需要设置API密钥。具体可参见：https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/
- ES modules via NPM
首先，打开一个已构建的项目，在cmd中进入该项目目录，使用如下命令将模块安装到项目中：
npm install @arcgis/core

如果在package.json中写好了依赖包，则可以直接npm install，

（PS：如果npm下载比较慢或者报错，可以使用cnpm或者换源下载）

这里提供一个官网示例项目：https://download.csdn.net/download/m0_53156691/88405539
项目基本目录结构（这里使用了vite打包工具）：

index.html:
```
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layers-scenelayer | Sample | ArcGIS Maps SDK for JavaScript 4.27title>
  head>
  <body>
    <div id="viewDiv">div>
    <script type="module" src="/src/main.js">script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
```
main.js:
```
import Map from "@arcgis/core/Map.js";
import SceneView from "@arcgis/core/views/SceneView.js";
import SceneLayer from "@arcgis/core/layers/SceneLayer.js";
import "./style.css";

......
1
2
3
4
5
6
```
style.css:
```
@import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css";
html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
1
2
3
4
5
6
7
8
9
```
这里简单讲一下vite，一个基于原生 ES-Module 的前端构建工具：在实际开发中，我们一般不会一直敲 vite 命令，而是会将该命令写进 package.json 文件的 scripts 中，如上。 Vite 会默认把我们的代码打包进 dist/assets 文件夹中。
- 在开发阶段想要把项目跑起来，那就直接执行 npm run dev 或npm run serve
- 如果想打包准备部署了，那就执行 npm run build
- 而如果是在打包之后，想要预览打包出来的代码的效果，那就执行 npm run preview
执行npm run dev：

2.结语

ArcGIS Maps SDK for JavaScript与流行的框架和构建工具集成的其他示例可在 https://github.com/Esri/jsapi-resources GitHub 存储库中找到。
```
才疏学浅，作此拙文，仅以之为学习记录分享。@WIT
1
```
相关阅读:
985大学新增专业，考数据结构+自然语言处理！中央民族大学新增语言信息安全...
植物大战僵尸各种僵尸攻略（四）
微信小程序案例3-1 比较数字
 操作系统【OS】调度算法对比图
 每章一篇博客带你拿下吉林大学JAVAEE期末（二）
Vue3+Vite+Koa2的一个前后端分离todolist记事本网站
 Principle of the Hardware-in-the-Loop (HIL)
基于SpringBoot的口腔保养管理系统
 一个 dubbo 和 springboot 的兼容性问题
 C#题库（选择题，填空题，判断题，编程题）
原文地址：https://blog.csdn.net/m0_53156691/article/details/133606754

文章目录

0.前言

1.引入ArcGIS API for JavaScript部署开发

1.1在线引入（via CDN）

1.2本地引入（via NPM & SDK）

2.结语