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

  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

  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

  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调用并显示百度地图，代码如下：

  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为缩放级别。

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

    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. var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));
    95. map.centerAndZoom(pt, 5);
    96. showMap = function(layer){
    97. //设置按钮样式
    98. var baseMap = ["vec","img"];
    99. for(var i= 0, dl=baseMap.length;i<dl;i++){
    100. $("#"+baseMap[i]).removeClass("base-map-switch-active");
    101. }
    102. $("#"+layer).addClass("base-map-switch-active");
    103. //设置显示地图
    104. switch(layer){
    105. case "img":{//影像
    106. vecMap.hide();
    107. imgMap.show();
    108. $("#ano").show();
    109. break;
    110. }
    111. default :{//地图
    112. vecMap.show();
    113. imgMap.hide(),anoMap.hide();
    114. $("#ano").hide();
    115. $("#chkAno").attr("checked",false);
    116. break;
    117. }
    118. }
    119. };
    120. anoCtrl = function(){
    121. if($("#chkAno").attr("checked")){
    122. anoMap.show();
    123. }
    124. else{
    125. anoMap.hide();
    126. }
    127. }
    128. });
    129. </script>
    130. </head>
    131. <body>
    132. <div id="map">
    133. <div class="base-map">
    134. <div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap('vec')">地图</div>
    135. <div id="img" class="base-map-switch base-map-switch-center"  onclick="showMap('img')">影像
    136. <div id="ano" class="base-map-ano">
    137. <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" onchange="anoCtrl()"/>标注
    138. </div>
    139. </div>
    140. </div>
    141. </div>
    142. </body>
    143. </html>

（转） Arcgis for js加载百度地图的更多相关文章

  1. Arcgis for js加载百度地图

    看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...

  2. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  3. ARCGIS FLEX API加载google地图、百度地图、天地图（转）

    http://www.cnblogs.com/chenyuming507950417/ Flex加载google地图.百度地图以及天地图作底图 一  Flex加载Google地图作底图 (1)帮助类G ...

  4. （转）Arcgis for js加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...

  5. Delphi中用Webbrowser加载百度地图滚轮失效（ApplicationEvents里使用IsChild提前判断是哪个控件的消息）

    在Delphi中使用Webbrowser加载百度地图时,点击了其它界面,再回到百度地图中,即使点击了鼠标,再用滚轮也不能缩 放地图,除非点地图里面的自带的控件,之后才能缩放,原因是因为其它窗体控件获得 ...

  6. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  7. 关于ios 程序加载百度地图lib，出现链接错误：找不到符号 (null): _OBJC_CLASS_$_BMKMapManager的解决办法

    报告的错误信息 ld: warning: ignoring file /Users/5012/Documents/sphuang/IOS_project/baidu_map/ShareLocation ...

  8. 在bootstrap modal 中加载百度地图的信息窗口失效解决方法

    这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:ht ...

  9. Vue中加载百度地图

    借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式:通过promise以及百度地图的callback回调函数 map.js 1 export function M ...

随机推荐

  1. Alliances

    树国是一个有n个城市的国家,城市编号为1∼n.连接这些城市的道路网络形如一棵树, 即任意两个城市之间有恰好一条路径.城市中有k个帮派,编号为1∼k.每个帮派会占据一些城市,以进行非法交易.有时帮派之间 ...

  2. Ajax 请求之_请求类型详解

    $.ajax({ url: "规定发送请求的 URL.默认是当前页面.", type: "post", // 请求类型,默认get // 在回调函数中,无需将j ...

  3. [TS-A1488][2013中国国家集训队第二次作业]魔法波[高斯消元]

    暴力直接解异或方程组,O(n^6)无法接受,那么我们考虑把格子分块,横着和竖着分别分为互不影响的块,这样因为障碍物最多不超过200个,那么块的个数最多为2*(800+200)=2000个,最后用bit ...

  4. [转]十五天精通WCF——第三天 client如何知道server提供的功能清单

     通常我们去大保健的时候,都会找姑娘问一下这里能提供什么服务,什么价格,这时候可能姑娘会跟你口述一些服务或者提供一份服务清单,这样的话大 家就可以做到童嫂无欺,这样一份活生生的例子,在wcf中同样是一 ...

  5. HDU 5225

    求逆序的个数.首先处理出对n个数它所有排列的逆序的个数.然后,按位枚举,当枚举的数少于当前位,逆序数的个数就是前面确定的数对于后面数的逆序总数+后面k个数的排列的逆序总数. 1Y. #include& ...

  6. HDU 4524

    简单题,先从右边消起,注意结束时a[1]==0才能是yes #include <iostream> #include <cstdio> #include <cstring ...

  7. MySql免安装版l配置方法

    初次接触mysql,折腾了一天,总是安装不成功,服务启动不了.后来从官网下载了ZIP Archive版,不用安装,直接把它解压到磁盘,做一些简单的配置就可以. 软件下载地址:http://dev.my ...

  8. Android Gallery2源代码分析

    打开图库中图片为什么从模糊变清晰 1. 有一点要明白,图片要进行显示,首先要先将图片进行decode,然后才干显示 2. 图片decode须要时间,越大的图片,细节越多的图片,那么它decode时间就 ...

  9. 加州理工学院公开课：机器学习与数据挖掘_Regularization（第十二课）

    课程简单介绍: 接上一节课,这一节课的主题是怎样利用 Regularization 避免 Overfitting.通过给如果集设定一些限制条件从而避免  Overfitting,可是如果限制条件设置的 ...

  10. php多个进程写文件

    多进程写文件function write_file($filename, $content){ $lock = $filename . '.lck'; $write_length = 0; while ...