代码探险家

这个屌丝很懒，什么也没留下！

热门标签

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 所有版本 - （4.5-4.20，4.21，4.22-最新版4.28）引入使用方式_arcgis js api

作者：代码探险家 | 2024-07-21 16:38:55

踩

arcgis js api

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 所有版本 - （4.5-4.20，4.21，4.22-最新版4.28）引入使用方式

在使用 ArcGIS Maps SDK for JavaScript 过程中，有时候会使用不同版本。

后来发现，不同版本引入方式变化还挺大，于是进行了各种尝试，这里记录一下所有版本的引入。

本文包含版本介绍、4.19及以前版本、4.20版本、4.21及之后版本以及测试代码。

版本介绍

经过完整测试，主要分为三个阶段，4.19 以及之前版本、4.20 版本以及 4.21 以及之后版本。

下载了以下四个版本，基本满足测试需求。

在这里插入图片描述

版本资源：

下载地址：

4.19及以前版本

普通 JavaScript 引入使用的话，需要 dojo 文件夹，如果是 es6 引入的话，需要 @arcgis 文件夹。

本文测试以普通 JavaScript 引入方式。

4.5-4.19 方式相同，这里以 4.5 为例。

1. 首先解压文件夹。

在这里插入图片描述

2. 打开 4.5/dojo/dojo.js

可以看到，代码是混淆的，这里可以格式化一下，看起来稍微方便一点。

在这里插入图片描述

代码格式化：

在这里插入图片描述

3. 在文件中搜索 HOSTNAME_AND_PATH_TO_JSAPI

将 baseUrl 改为自己的服务地址：http://localhost:8080/4.5/dojo。

在这里插入图片描述

4. 引入方式


<link rel="stylesheet" href="http://localhost:8080/4.5/esri/themes/light/main.css"/>
<script src="http://localhost:8080/4.5/dojo/dojo.js"></script>

1
2
3
4

可以加载地图。

在这里插入图片描述

4.20版本

4.20 版本跟 4.19 类似，但是引入的 js，修改为 4.20/init.js。

当然修改的文件也相应的改为 init,js。

1. 打开 init.js，并格式化

在这里插入图片描述

2. 搜索 HOSTNAME_AND_PATH_TO_JSAPI

将 baseUrl 改为自己的服务地址：http://localhost:8080/4.20/esri/。

在这里插入图片描述

3. 引入方式


<link rel="stylesheet" href="http://localhost:8080/4.20/esri/themes/light/main.css"/>
<!--  需要修改源码配置，引入方式改变，引入 init.js  -->
<script src="http://localhost:8180/4.20/init.js"></script>

1
2
3
4
5

可以加载地图。

在这里插入图片描述

4.21及之后版本

4.21 开始，已经不需要修改 js 文件了，直接按官方引入即可，目前最新版（4.28）也是这样引入。

<!-- 4.21 开始（包括最新版4.28）不需要修改配置，引入 init.js -->
<script src="http://localhost:8080/4.21/init.js"></script>

1
2
3

可以整加载地图。

在这里插入图片描述

测试代码

这里提供一下过程测试代码。


<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>test version</title>

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

    <!--  需要修改源码配置，引入 dojo.js  -->
    <link rel="stylesheet" href="http://localhost:8080/4.5/esri/themes/light/main.css"/>
    <script src="http://localhost:8080/4.5/dojo/dojo.js"></script>
    <!-- <script src="http://localhost:8180/4.19/dojo/dojo.js"></script> -->

    <!--  需要修改源码配置，引入方式改变，引入 init.js  -->
    <!-- <script src="http://localhost:8180/4.20/init.js"></script> -->

    <!-- 4.21 开始（包括最新版4.28）不需要修改配置，引入 init.js -->
    <!-- <script src="http://localhost:8180/4.21/init.js"></script> -->

    <style>
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background: transparent;
        }

        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
            "esri/Map",
            "esri/Basemap",
            "esri/views/SceneView"], (
            Map,
            Basemap,
            SceneView) => {

            const map = new Map({
                basemap: "satellite",
                ground: 'world-elevation',
            });
            new SceneView({
                container: "viewDiv",
                map: map,
                center: [116.37, 39.88],
                zoom: 10
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/861499