写这篇文章的主要目的有三:
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” 有不同类别
类别 | 实例 |
---|---|
topo | |
streets | |
satellite | |
更多 | 点击查看更多 |
如果想使用自定义的地图得使用 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
这个可以直接使用