第四篇 arcgis api for javascript 读取本地发布瓦片cache
学习要点
1、dojo框架类的定义与继承；
2、ArcGISTiledMapServiceLayer的使用；
html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>这是测试瓦片地图的一个类</title>
<link rel="stylesheet" href="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
<style>
html, body, #mapDiv {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script>
var dojoConfig = {
async: true,
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
<script src="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/init.js"></script>
<script>
var map;
require(["esri/map","demo/cacheMap"], function (Map,cacheMap) {
map=new Map("mapDiv");
var googleMapLayer = new cacheMap("Hello neil baseUrl");
greeting.innerHTML=googleMapLayer.baseUrl;
map.addLayer(googleMapLayer);
});
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<div id="mapDiv"></div>
</body>
</html>
cacheMap.js
/**
* Created by neil on 2015/8/27.
*/
define(["dojo/_base/declare",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileInfo"], function (declare, ArcGISTiledMapServiceLayer) {
return declare(ArcGISTiledMapServiceLayer, {
constructor: function (baseUrl) {
this.baseUrl=baseUrl;
this.spatialReference = new esri.SpatialReference({ wkid: 102113 });//google地图的空间参考
this.fullExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
this.initialExtent = new esri.geometry.Extent(12647729.322235, 2541989.81265182, 12775837.7816409, 2625153.2994261, this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {"x": -20037508.3427892, "y": 20037508.3430388},
"spatialReference": { "wkid": 102113 },
"lods": [
{"level": 10, "scale": 591658710.91, "resolution": 152.874056570353},
{"level": 11, "scale": 295829355.45, "resolution": 76.4370282851763},
{"level": 12, "scale": 147914677.73, "resolution": 38.2185141425881},
{"level": 13, "scale": 73957338.86, "resolution": 19.1092570712941},
{"level": 14, "scale": 36978669.43, "resolution": 9.55462853564703},
{"level": 15, "scale": 36978669.43, "resolution": 4.77731426782352},
{"level": 16, "scale": 36978669.43, "resolution": 2.38865713391176},
{"level": 17, "scale": 18489334.72, "resolution": 1.19432856695588}]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
//alert("显示信息1");
return "http://192.168.1.51/Layers2/" +
"L" + dojo.string.pad(level, 2, '0') + "/" +
"R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +
"C" + dojo.string.pad(col.toString(16), 8, '0') + "." +
"png";
}
});
});
只提供了基本方法，更强大的功能希望大家不断开发，分享！