arcgis of js 4.x 笔记（1）基础、map、在线底图、自定义底图（以及推荐的在线底图）

mac2025-05-19 52

写这篇文章的主要目的有三： 1.为了记录学习arcgis of js 的过程。 2.回顾之前学习的记录并进行整理，为后面再次使用提供便捷。 3.帮助新手更好上手arcgis of js 4.x 另外：该文章只是从使用角度去赘述，不深入研究里面的方法，如果有错误，请大佬在评论区指正。

1.简单的描述如何学习官网的api和例子。

首先arcgis of js 的3.x和4.x在使用上有一定量的差距，4.x 整合了一些新的方法以及添加了一些新的控件，以及大量的3D效果。因为项目中都没运用到3D，所以大家可以通过官网API自行学习。

arcgis of js 4.x 官网： https://developers.arcgis.com/javascript/

官网我目前常用的就是列子Demo以及对于的api

在simple code 里面，可以搜索对应官方demo 或者点击查看对应demo或者点击 Explore in the sandbox 查看对应的代码

Api 这块可以搜索到具体的方法和对应的描述

对应使用方法这可以查看对应的例子

2.构造简单的地图

简单地图的构建描述 https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html

简单的描述就是

1.引用ArcGIS API for JavaScript**

首先导入arcgis of js 的JS 和CSS 其中css中有不同主题（light或者dark）

然后写html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>创建简单的地图/title> </head> </html>

2.加载模块

加载模块相当于导入对应的“js” ，要使用对应的方法都需要导入对应的“JS”（模块）

3.构建代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>创建简单的地图</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.13/"></script> <script> require(["esri/Map", "esri/views/MapView"], function(Map, MapView) { var map = new Map({ basemap: "streets" //加载对应的地图（不同底图） }); var view = new MapView({ container: "viewDiv", // 这个就是map div的ID map: map, // 加载对应（上面）的map zoom: 4, // 地图初始化是缩放的级别 center: [15, 65] // 地图初始化是中心点的位置 }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

显示地图。其中 basemap: “streets” 有不同类别

类别实例topostreetssatellite更多点击查看更多

如果想使用自定义的地图得使用 Basemap、MapImageLayer 模块进行加载

2020年 4月 8日更新如果出现加了自定义地图，中心设置无效的情况，然后就可以使用

view.extent = new Extent({ xmin: 12546100, ymin: 5031800, xmax: 14193600, ymax: 3633900, spatialReference: { wkid: 102100 } });

其中导包路径可以在官网查询到另外推荐一个直接可以使用的MapImageLayer网址智图GeoQ

这个可以直接使用

最新回复(0)

arcgis of js 4.x 笔记（1） 基础、map、在线底图、自定义底图（以及推荐的在线底图）