<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Portland Tile Server</title>
<link rel="stylesheet"
href="http://localhost:8088/arcgis_js_api/library/3.21/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet"
href="http://localhost:8088/arcgis_js_api/library/3.21/3.21/esri/css/esri.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="map" class="claro" style="width: 100%; height: 100%;"></div>
</body>
<script
src="http://localhost:8088/arcgis_js_api/library/3.21/3.21/init.js"></script>
<script>
dojo.require("esri.map");
function init() {
initLayer();
var map = new esri.Map("map");
map.addLayer(new PortlandTiledMapServiceLayer());
}
function initLayer() {
dojo
.declare(
"PortlandTiledMapServiceLayer",
esri.layers.TiledMapServiceLayer,
{
constructor : function() {
this.spatialReference = new esri.SpatialReference(
{
wkid : 3857
});
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(
12413832.015682183200,
4503211.084392818620,
12596669.387340322100,
4639116.120683860030,
this.spatialReference));javascript
this.tileInfo = new esri.layers.TileInfo({
"rows" : 256,
"cols" : 256,
"dpi" : 96,
"format" : "PNG",
"compressionQuality" : 0,
"origin" : {
"x" : -20037508.3427892,
"y" : 20037508.3430388
},
"spatialReference" : {
wkid : 3857
},
"lods" : [ {
"level" : 3,
"resolution" : 19567.879240,
"scale" : 73957338.863641
}, {
"level" : 4,
"resolution" : 9783.939621,
"scale" : 36978669.431821
}, {
"level" : 5,
"resolution" : 4891.969810,
"scale" : 18489334.715910
}, {
"level" : 6,
"resolution" : 2445.984905,
"scale" : 9244667.357955
}, {
"level" : 7,
"resolution" : 1222.992453,
"scale" : 4622333.678978
}, {
"level" : 8,
"resolution" : 611.496226,
"scale" : 2311166.839489
}, {
"level" : 9,
"resolution" : 305.748113,
"scale" : 1155583.419744
}, {
"level" : 10,
"resolution" : 152.874057,
"scale" : 577791.709872
}, {
"level" : 11,
"resolution" : 76.437028,
"scale" : 288895.854936
}, {
"level" : 12,
"resolution" : 38.218514,
"scale" : 144447.927468
}, {
"level" : 13,
"resolution" : 19.109257,
"scale" : 72223.963734
}, {
"level" : 14,
"resolution" : 9.554629,
"scale" : 36111.981867
}, {
"level" : 15,
"resolution" : 4.777314,
"scale" : 18055.990934
}, {
"level" : 16,
"resolution" : 2.388657,
"scale" : 9027.995467
}, {
"level" : 17,
"resolution" : 1.194329,
"scale" : 4513.997733
}, {
"level" : 18,
"resolution" : 0.597164,
"scale" : 2256.998867
} ]
});css
this.loaded = true;
this.onLoad(this);
},html
getTileUrl : function(level, row, col) {
return "http://localhost:8088/map/_alllayers/"
+ "L"
+ dojo.string.pad(level, 2, '0')
.toLocaleUpperCase()
+ "/"
+ "R"
+ dojo.string.pad(row.toString(16), 8,
'0').toLocaleUpperCase()
+ "/"
+ "C"
+ dojo.string.pad(col.toString(16), 8,
'0').toLocaleUpperCase()
+ "."
+ "png";
}
});
}java
dojo.ready(init);
</script>
</html>api
官网demo:https://developers.arcgis.com/javascript/3/jssamples/layers_custom_tiled.htmlui