博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
（转） Arcgis for js加载百度地图
阅读量：5795 次
发布时间：2019-06-18

本文共 13988 字，大约阅读时间需要 46 分钟。

http://blog.csdn.net/gisshixisheng/article/details/44853709

概述：

在前面的文章里提到了Arcgis for js加载天地图，在本节，继续讲解如何在Arcgis for js中加载百度地图。

 

效果：

地图

影像-无标注

影像-有标注

 

实现：

第一，在此感谢http://www.cnblogs.com/chenyuming507950417/p/3343729.html这篇文章的主人，给了我很大的启发与帮助，因为一直在找相关的参数，都不对，只有这个参数是没有问题的。

 

第二，百度地图可调用的有地图切片，影像切片，以及道路等POI切片，我将之用TiledMapServiceLayer做了扩展，成了BDAnoLayer，BDVecLayer，BDimgLayer三个图层，其代码如下：

BDAnoLayer.js

 

[javascript]   
 
 
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 102100 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));  
  8.                 this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,  
  9.                     4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,  
  10.                     36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];  
  11.                 this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,  
  12.                     1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,  
  13.                     4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];  
  14.                 this.tileInfo = new esri.layers.TileInfo({  
  15.                     "rows": 256,  
  16.                     "cols": 256,  
  17.                     "compressionQuality": 90,  
  18.                     "origin": {  
  19.                         "x": -20037508.3427892,  
  20.                         "y": 20037508.3427892  
  21.                     },  
  22.                     "spatialReference": this.spatialReference,  
  23.                     "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },  
  24.                         { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },  
  25.                         { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },  
  26.                         { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },  
  27.                         { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },  
  28.                         { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },  
  29.                         { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },  
  30.                         { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },  
  31.                         { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },  
  32.                         { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },  
  33.                         { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },  
  34.                         { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },  
  35.                         { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },  
  36.                         { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },  
  37.                         { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },  
  38.                         { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },  
  39.                         { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },  
  40.                         { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },  
  41.                         { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },  
  42.                         { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }  
  43.                     ]  
  44.                 });  
  45.                 this.loaded = true;  
  46.                 this.onLoad(this);  
  47.             },  
  48.             getTileUrl: function (level, row, col) {  
  49.                 var zoom = level - 1;  
  50.                 var offsetX = parseInt(Math.pow(2, zoom));  
  51.                 var offsetY = offsetX - 1;  
  52.                 var numX = col - offsetX, numY = (-row) + offsetY ;  
  53.                 var num = (col + row) % 8 + 1;  
  54.                 return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20141015";  
  55.             }  
  56.         });  
  57.     });  

 

BDVecLayer.js

 

[javascript]   
 
 
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 102100 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));  
  8.                 this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,  
  9.                     4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,  
  10.                     36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];  
  11.                 this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,  
  12.                     1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,  
  13.                     4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];  
  14.                 this.tileInfo = new esri.layers.TileInfo({  
  15.                     "rows": 256,  
  16.                     "cols": 256,  
  17.                     "compressionQuality": 90,  
  18.                     "origin": {  
  19.                         "x": -20037508.3427892,  
  20.                         "y": 20037508.3427892  
  21.                     },  
  22.                     "spatialReference": this.spatialReference,  
  23.                     "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },  
  24.                         { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },  
  25.                         { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },  
  26.                         { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },  
  27.                         { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },  
  28.                         { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },  
  29.                         { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },  
  30.                         { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },  
  31.                         { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },  
  32.                         { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },  
  33.                         { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },  
  34.                         { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },  
  35.                         { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },  
  36.                         { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },  
  37.                         { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },  
  38.                         { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },  
  39.                         { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },  
  40.                         { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },  
  41.                         { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },  
  42.                         { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }  
  43.                     ]  
  44.                 });  
  45.                 this.loaded = true;  
  46.                 this.onLoad(this);  
  47.             },  
  48.             getTileUrl: function (level, row, col) {  
  49.                 var zoom = level - 1;  
  50.                 var offsetX = parseInt(Math.pow(2, zoom));  
  51.                 var offsetY = offsetX - 1;  
  52.                 var numX = col - offsetX, numY = (-row) + offsetY ;  
  53.                 var num = (col + row) % 8 + 1;  
  54.                 return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20141103";  
  55.             }  
  56.         });  
  57.     });  

 

BDimgLayer.js

 

[javascript]   
 
 
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 102100 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));  
  8.                 this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,  
  9.                     4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,  
  10.                     36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];  
  11.                 this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,  
  12.                     1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,  
  13.                     4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];  
  14.                 this.tileInfo = new esri.layers.TileInfo({  
  15.                     "rows": 256,  
  16.                     "cols": 256,  
  17.                     "compressionQuality": 90,  
  18.                     "origin": {  
  19.                         "x": -20037508.3427892,  
  20.                         "y": 20037508.3427892  
  21.                     },  
  22.                     "spatialReference": this.spatialReference,  
  23.                     "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },  
  24.                         { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },  
  25.                         { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },  
  26.                         { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },  
  27.                         { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },  
  28.                         { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },  
  29.                         { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },  
  30.                         { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },  
  31.                         { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },  
  32.                         { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },  
  33.                         { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },  
  34.                         { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },  
  35.                         { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },  
  36.                         { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },  
  37.                         { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },  
  38.                         { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },  
  39.                         { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },  
  40.                         { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },  
  41.                         { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },  
  42.                         { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }  
  43.                     ]  
  44.                 });  
  45.                 this.loaded = true;  
  46.                 this.onLoad(this);  
  47.             },  
  48.             getTileUrl: function (level, row, col) {  
  49.                 var zoom = level - 1;  
  50.                 var offsetX = parseInt(Math.pow(2, zoom));  
  51.                 var offsetY = offsetX - 1;  
  52.                 var numX = col - offsetX, numY = (-row) + offsetY ;  
  53.                 var num = (col + row) % 8 + 1;  
  54.                 return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20141015";  
  55.             }  
  56.         });  
  57.     });  

从上面的getTileUrl可以看到，三者返回的url的地址是有区别的，在上述那边博文里面提到的url已经失效，为了得到最新的地址，我做了如下工作：

 

1、用百度地图JS API调用并显示百度地图，代码如下：

 

[html]   
 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  6.     <style type="text/css">  
  7.         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
  8.     </style>  
  9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>  
  10.     <title>地图展示</title>  
  11. </head>  
  12. <body>  
  13. <div id="allmap"></div>  
  14. </body>  
  15. </html>  
  16. <script type="text/javascript">  
  17.     // 百度地图API功能  
  18.     var map = new BMap.Map("allmap");    // 创建Map实例  
  19.     map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);  // 初始化地图,设置中心点坐标和地图级别  
  20.     map.addControl(new BMap.MapTypeControl());   //添加地图类型控件  
  21.     map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的  
  22.     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  
  23. </script>  

2、F12打开Chrom调试——NetWork——左边找一张切片，右边切换至Preview面板

 

地图url

影像url

poi url

如此，URL即为切片的Url，其中online后面的数字2即为代码中的num，x为代码中的numX，y为numY，z为缩放级别。

 

第三，调用显示

调用显示比较简单，代码如下：

 

[html]   
 
 
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.     <title>Baidu Map</title>  
    6.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">  
    7.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
    8.     <style>  
    9.         html, body, #map {  
    10.             height: 100%;  
    11.             margin: 0;  
    12.             padding: 0;  
    13.         }  
    14.         .base-map-ano{  
    15.             position: absolute;  
    16.             right: 0pt;  
    17.             top:18pt;  
    18.             background: #e6edf1;  
    19.             border: #96aed1 1px solid;  
    20.             padding: 4px 5px;  
    21.             padding-left: 0px;  
    22.             padding-top: 0px;  
    23.             display: none;  
    24.             font-weight: normal;  
    25.         }  
    26.         .base-map{  
    27.             position: absolute;  
    28.             right: 15pt;  
    29.             top:15pt;  
    30.             background: #f0f0f0;  
    31.             border: #96aed1 1px solid;  
    32.             width: auto;  
    33.             height: auto;  
    34.             z-index: 99;  
    35.             font:normal 11px "宋体",Arial;  
    36.             color:#868686;  
    37.         }  
    38.         .base-map-switch{  
    39.             padding: 4px 8px;  
    40.             float: left;  
    41.         }  
    42.         .base-map-switch-active{  
    43.             background:#e6edf1;  
    44.             font-weight: bold;  
    45.             color: #4d4d4d;  
    46.         }  
    47.         .base-map-switch:hover{  
    48.             cursor: pointer;  
    49.         }  
    50.         .base-map-switch-center{  
    51.             border: 1px #96aed1 solid;  
    52.             border-top:none;  
    53.             border-bottom:none;  
    54.         }  
    55.     </style>  
    56.     <script type="text/javascript">  
    57.         dojoConfig = {  
    58.             parseOnLoad: true,  
    59.             packages: [{  
    60.                 name: 'bdlib',  
    61.                 location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/bdlib"  
    62.             }]  
    63.         };  
    64.     </script>  
    65.     <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>  
    66.     <script src="js/jquery-1.8.3.js"></script>  
    67.     <script>  
    68.         var map,showMap,anoCtrl;  
    69.         require(["esri/map",  
    70.             "bdlib/BDVecLayer",  
    71.             "bdlib/BDImgLayer",  
    72.             "bdlib/BDAnoLayer",  
    73.             "esri/layers/FeatureLayer",  
    74.             "esri/geometry/Point",  
    75.             "esri/SpatialReference",  
    76.             "dojo/domReady!"],  
    77.                 function (Map,  
    78.                           BDVecLayer,  
    79.                           BDImgLayer,  
    80.                           BDAnoLayer,  
    81.                           FeatureLayer,  
    82.                           Point,  
    83.                           SpatialReference  
    84.                         ){  
    85.                     map = new Map("map", {  
    86.                         logo: false  
    87.                     });  
    88.                     var vecMap = new BDVecLayer();  
    89.                     var imgMap = new BDImgLayer();  
    90.                     var anoMap = new BDAnoLayer();  
    91.                     map.addLayer(vecMap);  
    92.                     map.addLayers([imgMap,anoMap]);  
    93.                     imgMap.hide(),anoMap.hide();  
    94.   
    95.                     var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));  
    96.                     map.centerAndZoom(pt, 5);  
    97.   
    98.                     showMap = function(layer){  
    99.                         //设置按钮样式  
    100.                         var baseMap = ["vec","img"];  
    101.                         for(var i= 0, dl=baseMap.length;i<dl;i++){  
    102.                             $("#"+baseMap[i]).removeClass("base-map-switch-active");  
    103.                         }  
    104.                         $("#"+layer).addClass("base-map-switch-active");  
    105.                         //设置显示地图  
    106.                         switch(layer){  
    107.                             case "img":{//影像  
    108.                                 vecMap.hide();  
    109.                                 imgMap.show();  
    110.                                 $("#ano").show();  
    111.                                 break;  
    112.                             }  
    113.                             default :{//地图  
    114.                                 vecMap.show();  
    115.                                 imgMap.hide(),anoMap.hide();  
    116.                                 $("#ano").hide();  
    117.                                 $("#chkAno").attr("checked",false);  
    118.                                 break;  
    119.                             }  
    120.                         }  
    121.                     };  
    122.                     anoCtrl = function(){  
    123.                         if($("#chkAno").attr("checked")){  
    124.                             anoMap.show();  
    125.                         }  
    126.                         else{  
    127.                             anoMap.hide();  
    128.                         }  
    129.                     }  
    130.                 });  
    131.     </script>  
    132. </head>  
    133. <body>  
    134. <div id="map">  
    135.     <div class="base-map">  
    136.         <div id="vec" class="base-map-switch base-map-switch-active" οnclick="showMap('vec')">地图</div>  
    137.         <div id="img" class="base-map-switch base-map-switch-center"  οnclick="showMap('img')">影像  
    138.             <div id="ano" class="base-map-ano">  
    139.                 <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" οnchange="anoCtrl()"/>标注  
    140.             </div>  
    141.         </div>  
    142.     </div>  
    143. </div>  
    144. </body>  
    145. </html>  
你可能感兴趣的文章
监控利器 sysdig - 每天5分钟玩转 Docker 容器技术（79）
查看>>
应用程序控制策略——AppLocker
查看>>
【VMware中搭建iOS开发环境的引导工具】
查看>>
sshpass和expect远程登录并执行命令
查看>>
Windows 8 C++/CX字符串
查看>>
路由协议重分发之RIP协议与OSPF协议
查看>>
C# 操作Excel2003
查看>>
手把手教你自己动手恢复坏道硬盘数据
查看>>
【电子基础】电子基础知识·持续更新
查看>>
mysql创建定时执行存储过程任务
查看>>
heartbeat 3.0集群（1）集群原理
查看>>
C#中 Finally中不允许有return
查看>>
Java - 容器详解
查看>>
Synchronized Using
查看>>
Linux下PF_PACKET的使用（todo）
查看>>
Android开发者指南(16) —— Activity and Task Design
查看>>
linux下在jar包中找类是否存在
查看>>
mysql备份与恢复策略
查看>>
PPT2010设置图片透明度
查看>>
Horizon View 6-配置View Connection Server⑷
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-12-22 01:58:42   当前IP: 18.224.30.203   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我