admin 管理员组文章数量: 887007
ArcGIS api for JavaScript
ArcGIS api for JavaScript 3.xx 版本加载天地图
- 一. 加载天地图步骤
- 二. 一个完整的页面实例，将key放入即可执行
- 三. 效果图
一. 加载天地图步骤
-
进入天地图API（.html），申请Key（浏览器端）**
-
声明矢量图层
function declareVector() {declareMap("=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "VectorLayer"); } -
声明矢量标注图层
function declareLabel() {declareMap("=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "LabelLayer"); } -
声明卫星图
function declareSatellite() {declareMap("=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "SatelliteLayer"); } -
声明天地图
function declareMap(url, type) {dojo.declare(type, esri.layers.TiledMapServiceLayer, {constructor: function () {this.spatialReference = new esri.SpatialReference({ wkid: 4326 });this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference));this.tileInfo = new esri.layers.TileInfo({"rows": 256,"cols": 256,"compressionQuality": 0,"origin": {"x": -180,"y": 90},"spatialReference": {"wkid": 4326},"lods": [{ "level": 1, "resolution": 0.703125, "scale": 2.958293554545656E8 },{ "level": 2, "resolution": 0.3515625, "scale": 1.479146777272828E8 },{ "level": 3, "resolution": 0.17578125, "scale": 7.39573388636414E7 },{ "level": 4, "resolution": 0.087890625, "scale": 3.69786694318207E7 },{ "level": 5, "resolution": 0.0439453125, "scale": 1.848933471591035E7 },{ "level": 6, "resolution": 0.02197265625, "scale": 9244667.357955175 },{ "level": 7, "resolution": 0.010986328125, "scale": 4622333.678977588 },{ "level": 8, "resolution": 0.0054931640625, "scale": 2311166.839488794 },{ "level": 9, "resolution": 0.00274658203125, "scale": 1155583.419744397 },{ "level": 10, "resolution": 0.001373291015625, "scale": 577791.7098721985 },{ "level": 11, "resolution": 0.0006866455078125, "scale": 288895.85493609926 },{ "level": 12, "resolution": 0.00034332275390625, "scale": 144447.92746804963 },{ "level": 13, "resolution": 0.000171661376953125, "scale": 72223.96373402482 },{ "level": 14, "resolution": 8.58306884765625e-005, "scale": 36111.98186701241 },{ "level": 15, "resolution": 4.291534423828125e-005, "scale": 18055.990933506204 },{ "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9027.995466753102 },{ "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4513.997733376551 },{ "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2256.998866688275 },{ "level": 19, "resolution": 0.000002682209014892578, "scale": 1128.4994333441375 }]});this.loaded = true;this.onLoad(this);},getTileUrl: function (level, row, col) {return url + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;}}); } -
调用天地图
require(["esri/map", "dojo/domReady!"], function (Map) {var map = new Map("map", {center: [118.886885, 32.5219131],//中心坐标zoom: 6,//等级logo: false, //logoslider: false, //缩小按钮});declareVector();declareLabel();declareSatellite()var vector = new VectorLayer();//天地矢量图var label = new LabelLayer();//天地标注图var satellite = new SatelliteLayer();//天地卫星图map.addLayer(vector);//加载天地矢量图map.addLayer(label);//加载天地标注图map.addLayer(satellite);//加载天地卫星图});
二. 一个完整的页面实例，将key放入即可执行
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" /><title>ArcGIS api for JavaScript 3.xx 版本加载天地图实例</title><style>html,body,#map{width:100%;height:100%;margin:0;padding:0;}</style><link rel="stylesheet" type="text/css" href=".21/esri/css/esri.css" /><link rel="stylesheet" type="text/css" href=".21/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src=".21/init.js"></script><script>// 声明矢量图层function declareVector() {declareMap("=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "VectorLayer");}// 声明矢量标注图层function declareLabel() {declareMap("=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "LabelLayer");}// 声明矢量卫星图function declareSatellite() {declareMap("=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "SatelliteLayer");}// 声明天地图function declareMap(url, type) {dojo.declare(type, esri.layers.TiledMapServiceLayer, {constructor: function () {this.spatialReference = new esri.SpatialReference({ wkid: 4326 });this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference));this.tileInfo = new esri.layers.TileInfo({"rows": 256,"cols": 256,"compressionQuality": 0,"origin": {"x": -180,"y": 90},"spatialReference": {"wkid": 4326},"lods": [{ "level": 1, "resolution": 0.703125, "scale": 2.958293554545656E8 },{ "level": 2, "resolution": 0.3515625, "scale": 1.479146777272828E8 },{ "level": 3, "resolution": 0.17578125, "scale": 7.39573388636414E7 },{ "level": 4, "resolution": 0.087890625, "scale": 3.69786694318207E7 },{ "level": 5, "resolution": 0.0439453125, "scale": 1.848933471591035E7 },{ "level": 6, "resolution": 0.02197265625, "scale": 9244667.357955175 },{ "level": 7, "resolution": 0.010986328125, "scale": 4622333.678977588 },{ "level": 8, "resolution": 0.0054931640625, "scale": 2311166.839488794 },{ "level": 9, "resolution": 0.00274658203125, "scale": 1155583.419744397 },{ "level": 10, "resolution": 0.001373291015625, "scale": 577791.7098721985 },{ "level": 11, "resolution": 0.0006866455078125, "scale": 288895.85493609926 },{ "level": 12, "resolution": 0.00034332275390625, "scale": 144447.92746804963 },{ "level": 13, "resolution": 0.000171661376953125, "scale": 72223.96373402482 },{ "level": 14, "resolution": 8.58306884765625e-005, "scale": 36111.98186701241 },{ "level": 15, "resolution": 4.291534423828125e-005, "scale": 18055.990933506204 },{ "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9027.995466753102 },{ "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4513.997733376551 },{ "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2256.998866688275 },{ "level": 19, "resolution": 0.000002682209014892578, "scale": 1128.4994333441375 }]});this.loaded = true;this.onLoad(this);},getTileUrl: function (level, row, col) {return url + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;}});}//调用天地图require(["esri/map", "dojo/domReady!"], function (Map) {var map = new Map("map", {center: [118.886885, 32.5219131],//中心坐标zoom: 6,//等级logo: false, //logoslider: false, //缩小按钮});declareVector();declareLabel();declareSatellite()var vector = new VectorLayer();//天地矢量图var label = new LabelLayer();//天地标注图var satellite = new SatelliteLayer();//天地卫星图map.addLayer(vector);//加载天地矢量图map.addLayer(label);//加载天地标注图//map.addLayer(satellite);//加载天地卫星图});</script>
</head>
<body><div id="map"></div>
</body>
</html>
三. 效果图
标注图：
卫星图：
本文标签： ArcGIS api for JavaScript
版权声明：本文标题：ArcGIS api for JavaScript 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732353564h1533790.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论