1.离线部署ArcGIS JS API
如果使用ES module模式加载ArcGIS JS API,则可以跳过此步。
ES module加载的具体操作请移步官网
这里介绍离线下载并部署ArcGIS JS API的方法:
1.下载ArcGIS JS API,下载地址:
2.配置tomcat以及JDK,具体方法参考:非常详细图文JDK和Tomcat安装和配置的图文教程_追梦赤子心-CSDN博客_tomcat配置jdk
3.解压ArcGIS JS API安装包,将文件夹移至tomcat/webapp下,即可完成离线部署。
2.下载mapbox矢量切片
1.这里推荐一个离线地图下载器:
2.运行程序:点击mapdownload64.exe,填写下载参数等信息。
参数中token可以在mapbox官网随便找个示例复制粘贴。
3.下载完毕之后将整个下载文件夹复制粘贴到tomcat/webapp下。
4.几个文件夹:fonts为地图的字体文件,source中包含各个级别的矢量切片,sprites文件夹中为地图图标。
3.示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="http://localhost:8181/arcgis_js_v421_api/arcgis_js_api/javascript/4.21/esri/themes/light/main.css" />
<script src="http://localhost:8181/arcgis_js_v421_api/arcgis_js_api/javascript/4.21/init.js"></script>
<script src="http://localhost:8181/jquery/jQueryDownload/jquery-3.1.1.min.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/VectorTileLayer",
"esri/layers/TileLayer",
], function (Map, MapView, WebTileLayer, VectorTileLayer, TileLayer) {
// 封装ajax函数
const fetch = (url) => {
const p = new Promise((resolve, reject) => {
$.ajax(url, {
dataType: 'json',
success: function (result) {
resolve(result);
},
error: function () {
reject(new Error('返回错误'))
}
})
})
return p
}
const queryStyleJson = async (url) => {
try {
const res = await fetch(url)
return res
} catch (e) {
console.error(e)
}
}
// 获取服务器上的style文件(这里以本机为例)
queryStyleJson('http://localhost:8181/mapdownload/style.json').then((res) => {
// console.log('dddd', res);
// 设置矢量切片源
res.sources.composite = {
type: "vector",
tiles: ["http://localhost:8181/mapdownload/source/composite/tiles/{z}/{x}/{y}.pbf"],
}
// 设置地图小图标
res.sprite = "http://localhost:8181/mapdownload/sprites/sprite"
// 设置字体文件
res.glyphs = "http://localhost:8181/mapdownload/fonts/{fontstack}/{range}.pbf"
let vtlLayer = new VectorTileLayer({ style: res });
var map = new Map({
basemap: { baseLayers: [vtlLayer] },
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 9,
center: [117.5, 39.5],
});
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
4.断开网络进行离线加载测试
发现在离线环境中地图,字体以及图标都能正确加载。
整个部署过程完成!