ArcGIS API for JavaScript 加載水經注離線地圖
前言
我們平時使用ArcGIS API加載地圖服務時，一般使用的是ArcGIS Server發佈的服務，在不利用開源Server的情況下，我們需要進行花一筆不小的費用來購買第三方Server，在項目較小，用不到Server深入的分析功能的時候，我們可以使用IIS或者Tomcat作爲切片地圖的服務器，通過擴展ArcGIS API的TiledMapServiceLayer類，實現地圖的展示和基礎功能。
水經注地圖下載器下載地圖
根據需求下載地圖切片，下載的範圍最好要大於所展示區域的範圍，否則出現空白區區域的時候報地圖訪問不到的錯誤。選擇如下配置：
選擇不同級別的圖層
將下載下來的地圖png放在tomcat下
代碼實現
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "layer",
location: location.pathname.replace(/\/[^/]*$/, '') + '/layer'
}]
};
</script>
<script src="https://js.arcgis.com/3.26/"></script>
</head>
<body>
<div id="map"></div>
<script>
require([
"esri/map",
"esri/SpatialReference",
"esri/geometry/Point",
"layer/offlineLayer",
"dojo/domReady!"
], function (
Map,
SpatialReference,
Point,
offlineLayer,
) {
var map = new Map("map");
// var layer = new bdLayer("http://localhost:8080/map");
var layer = new offlineLayer("http://localhost:8080/map");
map.addLayer(layer);
// var point = new Point(13033472.000000002, 4390911.999999999, new SpatialReference({ wkid: 102100 }));
//
// map.centerAndZoom(point,8);
// map.spatialReference = new SpatialReference({
// wkid: 4326
// });
// map.setLevel(7);
map.on('click',function (evt) {
console.log(evt.mapPoint.x);
console.log(evt.mapPoint.y);
var point11 = new Point(evt.mapPoint.x, evt.mapPoint.y, new SpatialReference({ wkid: 102100 }));
console.log(point11.getLongitude());
console.log(point11.getLatitude());
});
});
</script>
</body>
</html>
擴展offlineLayer
define(["dojo/_base/declare",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/layers/TileInfo",
"esri/layers/TiledMapServiceLayer"
], function(declare, Extent, SpatialReference, Point, TileInfo, TiledMapServiceLayer) {
return declare("offlineLayer", TiledMapServiceLayer, {
layerUrl:null,
layertype: "road", //圖層類型
constructor: function(layerUrl) {
this.spatialReference = new SpatialReference({
wkid: 102100
});
this.layerUrl = layerUrl;
// 圖層提供的起始顯示範圍以及整個圖層的地理範圍
this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
this.initialExtent = new Extent(8332087.700000003, 2516475.5500000007, 15332151.700000003, 5940731.550000001, this.spatialReference);
// this.initialExtent = new Extent(5186359.700000003, 5840379.550000001, 12088119.700000003, 9162235.55, this.spatialReference);
this.tileInfo = new TileInfo({
"cols": 256,
"rows": 256,
"compressionQuality": 0,
"origin": {
// "x":-20037508.342787,
// "y":20037508.342787
"x":-16777360,
"y":16802960
},
"spatialReference": this.spatialReference,
"lods": [
{"level": 0,"resolution": 131072,"scale": 131072 * 256},
{"level": 1,"resolution": 65536,"scale": 65536 * 256},
{"level": 2,"resolution": 32768,"scale": 32768 * 256},
{"level": 3,"resolution": 16384,"scale": 16384 * 256},
{"level": 4,"resolution": 8192,"scale": 8192 * 256},
{"level": 5,"resolution": 4096,"scale": 4096 * 256},
{"level": 6,"resolution": 2048,"scale": 2048 * 256},
{"level": 7,"resolution": 1024,"scale": 1024 * 256},
{"level": 8,"resolution": 512,"scale": 512 * 256},
{"level": 9,"resolution": 256,"scale": 256 * 256},
{ "level": 10,"resolution": 128,"scale": 128 * 256},
{"level": 11,"resolution": 64,"scale": 64 * 256},
{"level": 12,"resolution": 32,"scale": 32 * 256},
{"level": 13,"resolution": 16,"scale": 16 * 256},
{"level": 14,"resolution": 8,"scale": 8 * 256},
{"level": 15,"resolution": 4,"scale": 4 * 256},
{"level": 16,"resolution": 2,"scale": 2 * 256},
{"level": 17,"resolution": 1,"scale": 1 * 256},
{"level": 18,"resolution": 0.5,"scale": 0.5 * 256},
{"level": 19,"resolution": 0.25,"scale": 0.25 * 256}
]
});
this.loaded = true;
this.onLoad(this);
},
/**
* 根據不同的layType返回不同的圖層
* @param level
* @param row
* @param col
* @returns {string}
*/
getTileUrl: function(level, row, col) {
var url = "";
var zoom = level - 1;
var offsetX = Math.pow(2, zoom);
var offsetY = offsetX - 1;
var numX = col - offsetX;
var numY = (-row) + offsetY;
zoom = level + 1;
var num = (col + row) % 8 + 1;
url = this.layerUrl+'/'+(level+1)+"/"+numX+"/"+numY+".png";
return url;
}
});
});
實現效果