arcgis api for javascipt 加载天地图百度地图
Posted 疯子加天才
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了arcgis api for javascipt 加载天地图百度地图相关的知识,希望对你有一定的参考价值。
写在前面的话:
1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物。下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准
2.百度地图可以直接加载经纬度坐标
3.百度地图如果加载的arcgis api中会出现坐标偏移,1.中已经解决了地理坐标转换,那么找到百度投影-地理坐标的转换方式,则arcgis就可以直接无偏加载了,网上很多方法,但是亲测不行。
4.天地图不是涉密数据,根据本文提供的类库,arcgis api for js可以直接加载。但是数据有略微的偏移
天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载,在此将之进行了一定的封装,如下:
1、切片线划图——TDTLayer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
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" + 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" ; } }); }); |
2、切片标注——TDTAnnoLayer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
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" ; } }); }); |
封装好之后就可以在页面调用了,调用的时候需要导入这些自定义的图层,导入方式为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
dojoConfig = { parseOnLoad: true , packages: [{ name: \'tdlib\' , location: this .location.pathname.replace(/\\/[^/]+$/, "" )+ "/js/tdlib" }] }; </script> <script src= "http://localhost/arcgis_js_api/library/3.9/3.9/init.js" ></script> <script> require([ "tdlib/TDTLayer" , "tdlib/TDTAnnoLayer" ], function (TDTLayer, TDTAnnoLayer ){ var basemap = new TDTLayer(); map.addLayer(basemap); var annolayer = new TDTAnnoLayer(); map.addLayer(annolayer); }); </script><br><br><span style= "color: rgb(128, 0, 0);" >完整调用代码:<br></span> |
1
|
<strong>[javascript]</strong> <a title= "view plain" class = "ViewSource" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >view plain</a><span data-mod= "popu_168" > <a title= "copy" class = "CopyToClipboard" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >copy</a><span data-mod= "popu_169" > <a title= "print" class = "PrintSource" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >print</a><a title= "?" class = "About" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >?</a><span class = "tracking-ad" data-mod= "popu_167" ><a title= "在CODE上查看代码片" style= "text-indent: 0px;" href= "https://code.csdn.net/snippets/635113" target= "_blank" ><img width= "12" height= "12" style= "left: 2px; top: 1px; position: relative;" alt= "在CODE上查看代码片" src= "https://code.csdn.net/assets/CODE_ico.png" ></a><span class = "tracking-ad" data-mod= "popu_170" ><a title= "派生到我的代码片" style= "text-indent: 0px;" href= "https://code.csdn.net/snippets/635113/fork" target= "_blank" ><img width= "12" height= "12" style= "left: 2px; top: 2px; position: relative;" alt= "派生到我的代码片" src= "https://code.csdn.net/assets/ico_fork.svg" ></a></span></span></span></span> |
1
|
<span style= "color: rgb(128, 0, 0);" ><br><br><br><!DOCTYPE html><br><html><br><head><br> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /><br> <title>Baidu Map</title><br> <link rel= "stylesheet" href= "https://js.arcgis.com/3.17/esri/css/esri.css" ><br> <style><br> html, body, #map {<br> height: 100 %;<br> margin: 0 ;<br> padding: 0 ;<br> }<br> .base-map-ano{<br> position: absolute;<br> right: 0pt;<br> top:18pt;<br> background: #e6edf1;<br> border: #96aed1 1px solid;<br> padding: 4px 5px;<br> padding-left: 0px;<br> padding-top: 0px;<br> display: none;<br> font-weight: normal;<br> }<br> .base-map{<br> position: absolute;<br> right: 15pt;<br> top:15pt;<br> background: #f0f0f0;<br> border: #96aed1 1px solid;<br> width: auto;<br> height: auto;<br> z-index: 99 ;<br> font:normal 11px "宋体" ,Arial;<br> color:# 868686 ;<br> }<br> .base-map- switch {<br> padding: 4px 8px;<br> float : left;<br> }<br> .base-map- switch -active{<br> background:#e6edf1;<br> font-weight: bold;<br> color: #4d4d4d;<br> }<br> .base-map- switch :hover{<br> cursor: pointer;<br> }<br> .base-map- switch -center{<br> border: 1px #96aed1 solid;<br> border-top:none;<br> border-bottom:none;<br> }<br> </style><br> <script type= "text/javascript" ><br> dojoConfig = {<br> parseO |