前言

    加载天地图作为底图

切片线划图层

TDMapLayer.js
define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer",
"esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo"],
function (declare,TiledMapServiceLayer,Extent,SpatialReference,TileInfo) {
return declare(TiledMapServiceLayer, { constructor: function () { this
.spatialReference =new SpatialReference({ wkid: 4326 }); this.initialExtent = (
this.fullExtent = new Extent(-180.0, -90.0, 180.0, 90.0, this
.spatialReference));this.tileInfo = new TileInfo({ "rows": 256, "cols": 256,
"compressionQuality": 0, "origin": { "x": -180, "y": 90 }, "spatialReference": {
"wkid": 4326 }, "lods": [ { "level": 2, "resolution": 0.3515625, "scale":
147748796.52937502 }, { "level": 3, "resolution": 0.17578125, "scale":
73874398.264687508 }, { "level": 4, "resolution": 0.087890625, "scale":
36937199.132343754 }, { "level": 5, "resolution": 0.0439453125, "scale":
18468599.566171877 }, { "level": 6, "resolution": 0.02197265625, "scale":
9234299.7830859385 }, { "level": 7, "resolution": 0.010986328125, "scale":
4617149.8915429693 }, { "level": 8, "resolution": 0.0054931640625, "scale":
2308574.9457714846 }, { "level": 9, "resolution": 0.00274658203125, "scale":
1154287.4728857423 }, { "level": 10, "resolution": 0.001373291015625, "scale":
577143.73644287116 }, { "level": 11, "resolution": 0.0006866455078125, "scale":
288571.86822143558 }, { "level": 12, "resolution": 0.00034332275390625, "scale":
144285.93411071779 }, { "level": 13, "resolution": 0.000171661376953125, "scale"
:72142.967055358895 }, { "level": 14, "resolution": 8.58306884765625e-005,
"scale": 36071.483527679447 }, { "level": 15, "resolution":
4.291534423828125e-005, "scale": 18035.741763839724 }, { "level": 16,
"resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 }, { "level":
17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 }, {
"level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655
} ] });this.loaded = true; this.onLoad(this); }, getTileUrl: function (level,
row, col) { return "http://t" + col % 8 +
".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX="
+ level +"&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles"; } }); });
加载标注图层

TDMapAnnoLayer.js
define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer",
"esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo"],
function (declare,TiledMapServiceLayer,Extent,SpatialReference,TileInfo) {
return declare(TiledMapServiceLayer, { constructor: function () { this
.spatialReference =new SpatialReference({ wkid: 4326 }); this.initialExtent = (
this.fullExtent = new Extent(-180.0, -90.0, 180.0, 90.0, this
.spatialReference));this.tileInfo = new TileInfo({ "rows": 256, "cols": 256,
"compressionQuality": 0, "origin": { "x": -180, "y": 90 }, "spatialReference": {
"wkid": 4326 }, "lods": [ { "level": 2, "resolution": 0.3515625, "scale":
147748796.52937502 }, { "level": 3, "resolution": 0.17578125, "scale":
73874398.264687508 }, { "level": 4, "resolution": 0.087890625, "scale":
36937199.132343754 }, { "level": 5, "resolution": 0.0439453125, "scale":
18468599.566171877 }, { "level": 6, "resolution": 0.02197265625, "scale":
9234299.7830859385 }, { "level": 7, "resolution": 0.010986328125, "scale":
4617149.8915429693 }, { "level": 8, "resolution": 0.0054931640625, "scale":
2308574.9457714846 }, { "level": 9, "resolution": 0.00274658203125, "scale":
1154287.4728857423 }, { "level": 10, "resolution": 0.001373291015625, "scale":
577143.73644287116 }, { "level": 11, "resolution": 0.0006866455078125, "scale":
288571.86822143558 }, { "level": 12, "resolution": 0.00034332275390625, "scale":
144285.93411071779 }, { "level": 13, "resolution": 0.000171661376953125, "scale"
:72142.967055358895 }, { "level": 14, "resolution": 8.58306884765625e-005,
"scale": 36071.483527679447 }, { "level": 15, "resolution":
4.291534423828125e-005, "scale": 18035.741763839724 }, { "level": 16,
"resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 }, { "level":
17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 }, {
"level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655
} ] });this.loaded = true; this.onLoad(this); }, getTileUrl: function (level,
row, col) { return "http://t" + row % 8 +
".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX="
+ level +"&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles"; } }); });
在首页集成
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" /> <title>TianDi Map</title> <link rel="stylesheet"
type="text/css" href=
"http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"
/> <link rel="stylesheet" type="text/css" href=
"http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" /> <
style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style> <
script type="text/javascript"> dojoConfig = { parseOnLoad: true, packages: [{
name:'tdlib', location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js" }]
};</script> <script type="text/javascript" src=
"http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script> <
script> var map; require(["esri/map", "tdlib/ TDMapLayer", "tdlib/
TDMapAnnoLayer", "esri/layers/FeatureLayer", "esri/geometry/Point",
"dojo/domReady!"], function (Map, TDTLayer, TDTAnnoLayer, FeatureLayer, Point ){
map =new Map("map", { logo: false }); var basemap = new TDTLayer();
map.addLayer(basemap);var annolayer = new TDTAnnoLayer();
map.addLayer(annolayer);var pt = new Point(103.847, 36.0473);
map.centerAndZoom(pt,3); }); </script> </head> <body> <div id="map"></div> </
body> </html>
结果: