标签：code ctr esri style ace query 地图展示 spatial scale
写在前面的话：
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
|
<script type="text/javascript"> 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> parseOnLoad: true,<br> packages: [{<br> name: ‘bdlib‘,<br> location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/bdlib"<br> }]<br> };<br> </script><br> <script type="text/javascript" src="js/transformspatial.js"></script><br> <script src="https://js.arcgis.com/3.17/"></script><br> <script type="text/javascript" src="js/plugins/jquery-1.11.1.min.js"></script><br> <script><br> var test=GPS.mercator_encrypt(39.115698,117.264604);<br> console.log(test);<br> var map,showMap,anoCtrl;<br> require(["esri/map",<br> "bdlib/BDVecLayer",<br> "bdlib/BDImgLayer",<br> "bdlib/BDAnoLayer",<br> "esri/layers/FeatureLayer",<br> "esri/geometry/Point",<br> "esri/SpatialReference",<br> "dojo/domReady!"],<br> function (Map,<br> BDVecLayer,<br> BDImgLayer,<br> BDAnoLayer,<br> FeatureLayer,<br> Point,<br> SpatialReference<br> ){<br> map = new Map("map", {<br> logo: false<br> });<br> var vecMap = new BDVecLayer();<br> var imgMap = new BDImgLayer();<br> var anoMap = new BDAnoLayer();<br> map.addLayer(vecMap);<br> map.addLayers([imgMap,anoMap]);<br> imgMap.hide(),anoMap.hide();<br>map.on("mouse-down",function(item){<br> mousedownlocation=item;<br> console.log(item.mapPoint.x+"||"+item.mapPoint.y);<br> //console.log(mousedownlocation.pageX+"down||down"+mousedownlocation.pageY);<br> })<br> var pt = new Point(7795368.13681627, 2813270.0795953586, new SpatialReference({ wkid: 102100 }));<br> map.centerAndZoom(pt, 19);<br> map.on("mouse-move",function(evt){<br> // console.log(evt);<br> })<br> showMap = function(layer){<br> //设置按钮样式<br> var baseMap = ["vec","img"];<br> for(var i= 0, dl=baseMap.length;i<dl;i++){<br> $("#"+baseMap[i]).removeClass("base-map-switch-active");<br> }<br> $("#"+layer).addClass("base-map-switch-active");<br> //设置显示地图<br> switch(layer){<br> case "img":{//影像<br> vecMap.hide();<br> imgMap.show();<br> $("#ano").show();<br> break;<br> }<br> default :{//地图<br> vecMap.show();<br> imgMap.hide(),anoMap.hide();<br> $("#ano").hide();<br> $("#chkAno").attr("checked",false);<br> break;<br> }<br> }<br> };<br> anoCtrl = function(){<br> if($("#chkAno").is(":checked")){<br> anoMap.show();<br> }<br> else{<br> anoMap.hide();<br> }<br> }<br> });<br> </script><br></head><br><body><br><div id="map"><br> <div class="base-map"><br> <div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap(‘vec‘)">地图</div><br> <div id="img" class="base-map-switch base-map-switch-center" onclick="showMap(‘img‘)">影像<br> <div id="ano" class="base-map-ano"><br> <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" onchange="anoCtrl()"/>标注<br> </div><br> </div><br> </div><br></div><br></body><br></html><br><br><br>百度地图可调用的有地图切片，影像切片，以及道路等POI切片，我将之用<span style="font-family: Consolas; font-size: 9pt;"><span style="font-family: Consolas; font-size: 9pt;">TiledMapServiceLayer做了扩展，成了BDAnoLayer，BDVecLayer，BDimgLayer三个图层，其代码如下：</span></span></span> |
BDAnoLayer.js
BDVecLayer.js
BDimgLayer.js
|
1
2
|
<span style="color: rgb(128, 0, 0);"><span style="font-family: Consolas; font-size: 9pt;"><span style="font-family: Consolas; font-size: 9pt;"><span style="font-family: Consolas;"><span class="tracking-ad" data-mod="popu_170"><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></span></span></span></span></span> |
|
1
|
<span style="color: rgb(128, 0, 0);"> </span> |
arcgis api for javascipt 加载天地图、百度地图
标签：code ctr esri style ace query 地图展示 spatial scale
原文地址：http://www.cnblogs.com/love540376/p/6307727.html
