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] view plaincopy print?
  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] view plaincopy print?
  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] view plaincopy print?
  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] view plaincopy print?
  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] view plaincopy print?
  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" οnclick="showMap('vec')">地图</div>
  135. <div id="img" class="base-map-switch base-map-switch-center"  οnclick="showMap('img')">影像
  136. <div id="ano" class="base-map-ano">
  137. <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" οnchange="anoCtrl()"/>标注
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </body>
  143. </html>

转载于:https://www.cnblogs.com/telwanggs/p/6972760.html

（转） Arcgis for js加载百度地图相关推荐

  1. OpenLayers3加载百度地图

    BaiduMapSource.js /*** 加载百度地图* @returns {ol.layer.Tile}*/ function loadBaiduMap() {//数据源信息var attrib ...

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

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

  3. 【百度地图】——利用三级联动加载百度地图

    [百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...

  4. Leaflet加载百度地图

    为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...

  5. web端加载百度地图和天地图

    1.加载百度地图 在页面中引入js文件 <html> <head> <script type="text/javascript" src=" ...

  6. 微信小程序加载百度地图

    1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...

  7. echarts加载百度地图离线部署

    echarts加载百度地图离线部署 功能描述: echarts中需要加载百度地图时,api文件和地图js文件都是在线的,如果离线不能使用,需要换种方式部署. 点击查看

  8. 使用OpenLayer加载百度地图（无偏移）

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...

  9. angular使用openlayers6以及加载百度地图

    angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...

最新文章

  1. 实战篇：Security+JWT组合拳 | 附源码
  2. 程序员头发失踪之谜 | 每日趣闻
  3. 揭秘Java网络爬虫程序原理
  4. KandQ：那年，那树，那些知识点
  5. YbtOJ#853-平面标记【整体二分,凸壳】
  6. 你小时候家里最穷的时候有多穷？
  7. MySQL 聚合索引实例_1:mysql 聚合索引
  8. Spring源码解析目录
  9. python使用pip离线安装库（本机环境）
  10. Element-UI + Vue，java面试官常用问题
  11. 真正免费的证件照小程序，在线一键生成标准免冠证件照，证件照底色更换，证件照尺寸修改
  12. xlsx to vcf
  13. linux中的 bin sh,Linux-#!/bin/sh理解
  14. 写 Python 爬虫的助手
  15. leetcode 1217. Play with Chips 解法 python
  16. DateTime日期差
  17. java重命名_java实现文件重命名的方法
  18. windows+nginx+php运行环境部署
  19. 淘宝店铺免费流量提升的15种方法
  20. codeforces-750【C思维】

热门文章

  1. ElasticSearch的filter原理深度剖析
  2. （37）System Verilog线程并行执行(fork-join_any)
  3. linux运维服务常见故障,linux常见故障处理
  4. stm32 hal 串口只可以接收到一包数据数据
  5. vs2015打开EXCEL文档范例及其注意事项！！！
  6. 发一个多CPU中进程与CPU绑定的例子
  7. 内核并发控制---RCU (来自网易)
  8. 中文乱码java_JAVA中文乱码问题应该怎么解决？
  9. 我的世界java村民繁殖_我的世界：1.14版本刷新几率小的五种村庄，没有村民咋回事？...
  10. 怎么把arraylist集合的值放在实体类的属性了_原创 | 使用JPA实现DDD持久化-O/R映射元数据：类级映射-实体和值对象...