关于离线地图配置(通过地图下载器下载地图后,不通过arcgisServer发布,直接通过WebTitleLayer加载)
1.下载地图
首先你需要一个地图下载器,这里我以全能地图下载为例,也给出对应软件的下载链接
链接:百度云下载链接
提取码:7qcw
或者
链接: https://pan.baidu.com/s/1F_CluQnTjA0nicqmXAFAJA 提取码: vd35
这里以深圳下载链接为例
这个软件就很简单,不用过多赘述
2,发布地图
因为直接把地图房子项目里面加载是十分卡或者慢,百分之八十加载不出来,所以就通过IIS发布
然后发布就行,这里我发布的地址为 http://localhost:2674/roadmap/1/1/0.png
这个是层级为1 的地图
3.展示地图
通过WebTileLayer进行展示,具体的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>WebTileLayer | Sample | 加载自己发布的瓦片底图</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<script>
require([
"esri/layers/WebTileLayer",
"esri/Map",
"esri/views/MapView",
"esri/Basemap"
], function(WebTileLayer, Map, MapView, Basemap) {
//新建
var tiledLayer = new WebTileLayer({
urlTemplate: "http://localhost:2674/roadmap/{level}/{col}/{row}.png",
subDomains: ["a", "b", "c", "d"],
copyright: '123'
});
var basemap = new Basemap({
baseLayers: [
tiledLayer
]
});
var map = new Map({
basemap: basemap,
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 1,
center: [119.5614624023, 38.3592424226],
});
// map.add(tiledLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
效果如下:
放大的效果