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

非科班Java出身GISer

已于 2024-03-26 09:40:32 修改

阅读量2.1k

点赞数 34

CC 4.0 BY-SA版权

于 2024-03-25 09:52:09 首次发布

本文链接：https://blog.csdn.net/linzi19900517/article/details/135999109

ArcGIS Maps SDK for JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了ArcGISMapsSDKforJavaScript从4.5到4.28版本的引入方法变化，包括普通JavaScript和ES6引入方式，以及4.20及以后版本的官方引入配置.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

可以加载地图。

在这里插入图片描述

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>

可以加载地图。

在这里插入图片描述

4.21及之后版本

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

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

可以整加载地图。

在这里插入图片描述

测试代码

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


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