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

mac2025-05-19  54

写这篇文章的主要目的有三: 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)

<script src="https://js.arcgis.com/4.12/"></script> <!--明亮主题 --> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css"/> <!--黑色主题 --> <!-- <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/dark/main.css"/> -->

然后写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”(模块)

<script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { // Code to create the map and view will go here }); </script>
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 模块进行加载

<script> require([ "esri/Map", "esri/views/MapView", "esri/Basemap", //加载底图 "esri/layers/MapImageLayer" //加载对应的img图层 ], function( Map, MapView, Basemap, MapImageLayer) { var layerBaseMap = new MapImageLayer({ url: "http://localhost:6080/arcgis/rest/services/Earth10LL/MapServer", //对应发布的底图 }); var customBasemap = new Basemap({ baseLayers: [layerBaseMap], title: "Custom Basemap", id: "myBasemap" }); const map = new Map({ basemap: customBasemap, //加载自定义底图 }); var view = new MapView({ container: "mapDiv", map: map, zoom: 6, center: [123, 35], }); }); </script>

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

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

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

这个可以直接使用

最新回复(0)