首先arcgis of js 的3.x和4.x在使用上有一定量的差距,4.x 整合了一些新的方法以及添加了一些新的控件,以及大量的3D效果。因为项目中都没运用到3D,所以大家可以通过官网API自行学习。
arcgis of js 4.x 官网: https://developers.arcgis.com/javascript/在simple code 里面,可以搜索对应官方demo 或者点击查看对应demo或者点击 Explore in the sandbox 查看对应的代码
Api 这块可以搜索到具体的方法和对应的描述
对应使用方法 这可以查看对应的例子
简单地图的构建描述 https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html
简单的描述就是
首先导入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>加载模块相当于导入对应的“js” ,要使用对应的方法都需要导入对应的“JS”(模块)
<script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { // Code to create the map and view will go here }); </script>显示地图。 其中 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
这个可以直接使用