arcgis api for javascipt 加载天地图、百度地图
生活随笔
收集整理的這篇文章主要介紹了
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 | <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
?
[javascript] view plaincopy print?BDVecLayer.js
?
[javascript] view plaincopy print?BDimgLayer.js
[javascript] view plain copy print?| 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 加载天地图、百度地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OpenStack服务组件介绍
- 下一篇： 按照linux文件出现的时间来删除文件