ArcGIS API For Js 加载天地图(二)
已被阅读 1530 次 | 文章分类:ArcGIS API For Javascript | 2018-07-16 10:17
上一篇介绍了利用WebTiledLayer的方式加载天地图，这一节使用同时加载底图和标注层的方式加载天地图
一:加载原理
第一个文件TDLayer.js ,是用来加载天地图的底图的,该文件是矢量地图
efine(["dojo/_base/declare",
"esri/layers/tiled"],
function (declare) {
return declare(esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
this.tileInfo = new esri.layers.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";
}
});
});
第二个文件是TDAnnoLayer.cs 只需要把第一个文件中的 getTileUrl方法修改下就可以了，比例尺什么的都是一样的，这个是注释图层
define(["dojo/_base/declare",
"esri/layers/tiled"],
function (declare) {
return declare(esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
this.tileInfo = new esri.layers.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";
}
});
});
将上面两个文件放到js文件夹，然后通过requie的方式引入，调用方式如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="http://localhost:8008/3.23/esri/css/esri.css">
<script type="text/javascript">
var dojoConfig = {
async: true, //是否异步
parseOnLoad: true,
packages: [{ //解释：require(["js/.."],function(){}) 中 js/ 即为 location的值
name: "js", //对应require引用包里的js
location: location.pathname.replace(/\/[^/]*$/, '') + '/js' //对应的路径
}]
};
</script>
<script src="http://localhost:8008/3.23/init.js"></script>
<script>
require(["esri/map", "js/TDTLayer","js/TDTAnnoLayer"], function (Map, TDTLayer,TDTAnnoLayer) {
map = new Map("map", {
center: [118.15, 24.55],
zoom: 11,
logo : false //logo
});
var baselayer = new TDTLayer();
map.addLayer(baselayer);
var Annolayer = new TDTAnnoLayer();
map.addLayer(Annolayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
二:效果如下
浏览热榜:
- 1 cesium(一):认识CZML对象
- 2 openlayers实现流动箭头样式的路线
- 3 【天地图403错误】key不正确或者设置白名单引起
- 4 Qgis入门使用(打开数据源，转换数据格式，添加标注，符号化地图等)
- 5 【GIS效果:旋转】cesium 实现绕点旋转效果
- 6 【GIS效果:立体多边形】使用js绘制阴影多边形
- 7 【openalyers效果:地图范围裁剪】控制地图显示范围的三种方式
- 8 openlayers加载天地图在线地图(矢量,注记,影像图,地形图)并切换底图
- 9 【GIS效果:图层滤镜】openlayers使用canvas滤镜效果改变地图切片样式
- 10 【GIS效果:淹没水体】cesium 淹没分析效果实现