Arcgis for js加载百度地图
看转：https://blog.csdn.net/qq_41046162/article/details/80248281
通过学习了一段时间的arcgis for js，让我来讲一下如何在arcgis for js加载百度地图。
加载的结果显示：
地图
影像 - 无标注
影像 - 有标注
制作步骤：
首先，我是在学习了https://blog.csdn.net/gisshixisheng/article/details/44853709这篇文章，代码大多都是那里的，参数也都没错，但是复制过去还是打不开，这个之后我会讲的。
其次，就是_百度地图在柯林斯调用的有地图在切片，影像切片，以及道路等POI切片，我将之用TiledMapServiceLayer做了扩展，成了BDAnoLayer，BDVecLayer，BDimgLayer三个图层，其代码如下:(通俗的意思就是在html同目录的新建一个文件夹，然后建立三个JavaScript文件分别是BDAnoLayer，BDVecLayer，BDImgLayer）
BDAnoLayer.js
define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/layers/TileInfo"
], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
return declare(TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new SpatialReference({ wkid: 102100 });
this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
this.tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 90,
"origin": {
"x": -20037508.3427892,
"y": 20037508.3427892
},
"spatialReference": this.spatialReference,
"lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
{ "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
{ "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
{ "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
{ "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
{ "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
{ "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
{ "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
{ "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
{ "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
{ "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
{ "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
{ "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
{ "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
{ "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
{ "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
{ "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
{ "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
{ "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
{ "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = parseInt(Math.pow(2, zoom));
var offsetY = offsetX - 1;
var numX = col - offsetX, numY = (-row) + offsetY ;
var num = (col + row) % 8 + 1;
return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20180505";
}
});
});
BDVecLayer.js
define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/layers/TileInfo"
], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
return declare(TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new SpatialReference({ wkid: 102100 });
this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
this.tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 90,
"origin": {
"x": -20037508.3427892,
"y": 20037508.3427892
},
"spatialReference": this.spatialReference,
"lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
{ "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
{ "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
{ "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
{ "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
{ "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
{ "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
{ "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
{ "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
{ "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
{ "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
{ "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
{ "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
{ "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
{ "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
{ "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
{ "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
{ "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
{ "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
{ "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = parseInt(Math.pow(2, zoom));
var offsetY = offsetX - 1;
var numX = col - offsetX, numY = (-row) + offsetY ;
var num = (col + row) % 8 + 1;
return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20180505";
}
});
});
BDImgLayer.js
define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/layers/TileInfo"
], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
return declare(TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new SpatialReference({ wkid: 102100 });
this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
this.tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 90,
"origin": {
"x": -20037508.3427892,
"y": 20037508.3427892
},
"spatialReference": this.spatialReference,
"lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
{ "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
{ "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
{ "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
{ "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
{ "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
{ "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
{ "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
{ "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
{ "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
{ "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
{ "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
{ "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
{ "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
{ "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
{ "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
{ "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
{ "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
{ "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
{ "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = parseInt(Math.pow(2, zoom));
var offsetY = offsetX - 1;
var numX = col - offsetX, numY = (-row) + offsetY ;
var num = (col + row) % 8 + 1;
return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20180505";
}
});
});
从上面的getTileUrl 可以看到，三者返回的URL的地址是没有有区别的，在上述的URL有可能失效，为了得到最新的地址，学习了那篇文章，我做了如下工作：
1，先用百度地图JS API调用并显示百度地图，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NkuwFBPlXG1uqPDsB9nK2nqpyLFF0SFV"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
你的密钥需要更改为百度API的密钥，有需要的要申请。
2，然后用chrome打开这个html，F12调试--NetWork--左边找一张切片，右边切换至预览面板
BDVecLayer.js（地图网址）
BDImgLayer.js（影像链接）
BDAnoLayer.js（poi网址）
只需要将最后面的数字替换掉就行了，20180505。
3.将上面的三个JS调用到地图主页。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Baidu Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.base-map-ano{
position: absolute;
right: 0pt;
top:18pt;
background: #e6edf1;
border: #96aed1 1px solid;
padding: 4px 5px;
padding-left: 0px;
padding-top: 0px;
display: none;
font-weight: normal;
}
.base-map{
position: absolute;
right: 15pt;
top:15pt;
background: #f0f0f0;
border: #96aed1 1px solid;
width: auto;
height: auto;
z-index: 99;
font:normal 11px "宋体",Arial;
color:#868686;
}
.base-map-switch{
padding: 4px 8px;
float: left;
}
.base-map-switch-active{
background:#e6edf1;
font-weight: bold;
color: #4d4d4d;
}
.base-map-switch:hover{
cursor: pointer;
}
.base-map-switch-center{
border: 1px #96aed1 solid;
border-top:none;
border-bottom:none;
}
</style>
<script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
packages: [{
name: 'bdlib',
location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js"
}]
};
</script>
<script src="https://js.arcgis.com/3.23/"></script>
<script src="js/jquery-1.8.3.js"></script>
<script>
var map,showMap,anoCtrl;
require(["esri/map",
"bdlib/BDVecLayer",
"bdlib/BDImgLayer",
"bdlib/BDAnoLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/domReady!"],
function (Map,
BDVecLayer,
BDImgLayer,
BDAnoLayer,
FeatureLayer,
Point,
SpatialReference
){
map = new Map("map", {
logo: false
});
var vecMap = new BDVecLayer();
var imgMap = new BDImgLayer();
var anoMap = new BDAnoLayer();
map.addLayer(vecMap);
map.addLayers([imgMap,anoMap]);
imgMap.hide();
anoMap.hide();
var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 }));
map.centerAndZoom(pt, 5);
showMap = function(layer){
//设置按钮样式
var baseMap = ["vec","img"];
for(var i= 0, dl=baseMap.length;i<dl;i++){
$("#"+baseMap[i]).removeClass("base-map-switch-active");
}
$("#"+layer).addClass("base-map-switch-active");
//设置显示地图
switch(layer){
case "img":{//影像
vecMap.hide();
imgMap.show();
$("#ano").show();
break;
}
default :{//地图
vecMap.show();
imgMap.hide();
anoMap.hide();
$("#ano").hide();
$("#chkAno").attr("checked",false);
break;
}
}
};
anoCtrl = function(){
if($("#chkAno").prop("checked")){
anoMap.show();
}
else{
anoMap.hide();
}
}
});
</script>
</head>
<body>
<div id="map">
<div class="base-map">
<div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap('vec')">地图</div>
<div id="img" class="base-map-switch base-map-switch-center" onclick="showMap('img')">影像
<div id="ano" class="base-map-ano">
<input id="chkAno" type="checkbox" name="chkAno" value="chkAno" onchange="anoCtrl()"/>标注
</div>
</div>
</div>
</div>
</body>
</html>
其中的jQuery-1.8.3.js的代码可以自己百度下，然后放到JS文件夹下面。
全部代码下载链接：下载链接
最后建议先用火狐浏览器打开这个baidumap，显示偏移的话可能是代码错了.google浏览器要改一下，需要配置google chrome支持本地（file协议）的AJAX请求：
设置浏览器的快捷方式属性，在“目标”后面加上--allow-文件访问从 - 文件，注意前面有个空格，重新打开浏览器即可。
如果还是不显示的话请用火狐浏览器。
---------------------
作者：新生GIS
来源：CSDN
原文：https://blog.csdn.net/qq_41046162/article/details/80248281
版权声明：本文为博主原创文章，转载请附上博文链接！
通过学习了一段时间的arcgis for js，让我来讲一下如何在arcgis for js加载百度地图。
加载的结果显示：
地图
影像 - 无标注
影像 - 有标注
制作步骤：
首先，我是在学习了https://blog.csdn.net/gisshixisheng/article/details/44853709这篇文章，代码大多都是那里的，参数也都没错，但是复制过去还是打不开，这个之后我会讲的。
其次，就是_百度地图在柯林斯调用的有地图在切片，影像切片，以及道路等POI切片，我将之用TiledMapServiceLayer做了扩展，成了BDAnoLayer，BDVecLayer，BDimgLayer三个图层，其代码如下:(通俗的意思就是在html同目录的新建一个文件夹，然后建立三个JavaScript文件分别是BDAnoLayer，BDVecLayer，BDImgLayer）
BDAnoLayer.js
define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo" ], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) { return declare(TiledMapServiceLayer, { constructor: function () { this.spatialReference = new SpatialReference({ wkid: 102100 }); this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference)); this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618, 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286, 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176]; this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499, 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415, 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617]; this.tileInfo = new TileInfo({ "rows": 256, "cols": 256, "compressionQuality": 90, "origin": { "x": -20037508.3427892, "y": 20037508.3427892 }, "spatialReference": this.spatialReference, "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] }, { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] }, { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] }, { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] }, { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] }, { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] }, { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] }, { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] }, { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] }, { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] }, { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] }, { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] }, { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] }, { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] }, { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] }, { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] }, { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] }, { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] }, { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] }, { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] } ] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { var zoom = level - 1; var offsetX = parseInt(Math.pow(2, zoom)); var offsetY = offsetX - 1; var numX = col - offsetX, numY = (-row) + offsetY ; var num = (col + row) % 8 + 1; return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20180505"; } });});BDVecLayer.js
define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo" ], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) { return declare(TiledMapServiceLayer, { constructor: function () { this.spatialReference = new SpatialReference({ wkid: 102100 }); this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference)); this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618, 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286, 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176]; this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499, 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415, 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617]; this.tileInfo = new TileInfo({ "rows": 256, "cols": 256, "compressionQuality": 90, "origin": { "x": -20037508.3427892, "y": 20037508.3427892 }, "spatialReference": this.spatialReference, "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] }, { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] }, { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] }, { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] }, { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] }, { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] }, { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] }, { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] }, { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] }, { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] }, { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] }, { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] }, { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] }, { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] }, { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] }, { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] }, { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] }, { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] }, { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] }, { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] } ] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { var zoom = level - 1; var offsetX = parseInt(Math.pow(2, zoom)); var offsetY = offsetX - 1; var numX = col - offsetX, numY = (-row) + offsetY ; var num = (col + row) % 8 + 1; return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20180505"; } });});BDImgLayer.js
define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo" ], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) { return declare(TiledMapServiceLayer, { constructor: function () { this.spatialReference = new SpatialReference({ wkid: 102100 }); this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference)); this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618, 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286, 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176]; this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499, 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415, 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617]; this.tileInfo = new TileInfo({ "rows": 256, "cols": 256, "compressionQuality": 90, "origin": { "x": -20037508.3427892, "y": 20037508.3427892 }, "spatialReference": this.spatialReference, "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] }, { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] }, { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] }, { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] }, { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] }, { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] }, { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] }, { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] }, { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] }, { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] }, { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] }, { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] }, { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] }, { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] }, { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] }, { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] }, { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] }, { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] }, { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] }, { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] } ] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { var zoom = level - 1; var offsetX = parseInt(Math.pow(2, zoom)); var offsetY = offsetX - 1; var numX = col - offsetX, numY = (-row) + offsetY ; var num = (col + row) % 8 + 1; return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20180505"; } });});从上面的getTileUrl 可以看到，三者返回的URL的地址是没有有区别的，在上述的URL有可能失效，为了得到最新的地址，学习了那篇文章，我做了如下工作：
1，先用百度地图JS API调用并显示百度地图，代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NkuwFBPlXG1uqPDsB9nK2nqpyLFF0SFV"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script> 你的密钥需要更改为百度API的密钥，有需要的要申请。
2，然后用chrome打开这个html，F12调试--NetWork--左边找一张切片，右边切换至预览面板
BDVecLayer.js（地图网址）
BDImgLayer.js（影像链接）
BDAnoLayer.js（poi网址）
只需要将最后面的数字替换掉就行了，20180505。
3.将上面的三个JS调用到地图主页。
代码如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Baidu Map</title> <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css"> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } .base-map-ano{ position: absolute; right: 0pt; top:18pt; background: #e6edf1; border: #96aed1 1px solid; padding: 4px 5px; padding-left: 0px; padding-top: 0px; display: none; font-weight: normal; } .base-map{ position: absolute; right: 15pt; top:15pt; background: #f0f0f0; border: #96aed1 1px solid; width: auto; height: auto; z-index: 99; font:normal 11px "宋体",Arial; color:#868686; } .base-map-switch{ padding: 4px 8px; float: left; } .base-map-switch-active{ background:#e6edf1; font-weight: bold; color: #4d4d4d; } .base-map-switch:hover{ cursor: pointer; } .base-map-switch-center{ border: 1px #96aed1 solid; border-top:none; border-bottom:none; } </style> <script type="text/javascript"> dojoConfig = { parseOnLoad: true, packages: [{ name: 'bdlib', location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js" }] }; </script><script src="https://js.arcgis.com/3.23/"></script> <script src="js/jquery-1.8.3.js"></script> <script> var map,showMap,anoCtrl; require(["esri/map", "bdlib/BDVecLayer", "bdlib/BDImgLayer", "bdlib/BDAnoLayer", "esri/layers/FeatureLayer", "esri/geometry/Point", "esri/SpatialReference", "dojo/domReady!"], function (Map, BDVecLayer, BDImgLayer, BDAnoLayer, FeatureLayer, Point, SpatialReference ){ map = new Map("map", { logo: false }); var vecMap = new BDVecLayer(); var imgMap = new BDImgLayer(); var anoMap = new BDAnoLayer(); map.addLayer(vecMap); map.addLayers([imgMap,anoMap]); imgMap.hide(); anoMap.hide(); var pt = new Point(7038512.810510807, 2629489.7975553474, new SpatialReference({ wkid: 102100 })); map.centerAndZoom(pt, 5); showMap = function(layer){ //设置按钮样式 var baseMap = ["vec","img"]; for(var i= 0, dl=baseMap.length;i<dl;i++){ $("#"+baseMap[i]).removeClass("base-map-switch-active"); } $("#"+layer).addClass("base-map-switch-active"); //设置显示地图 switch(layer){ case "img":{//影像 vecMap.hide(); imgMap.show(); $("#ano").show(); break; } default :{//地图 vecMap.show(); imgMap.hide(); anoMap.hide(); $("#ano").hide(); $("#chkAno").attr("checked",false); break; } } }; anoCtrl = function(){ if($("#chkAno").prop("checked")){ anoMap.show(); } else{ anoMap.hide(); } } }); </script></head><body><div id="map"> <div class="base-map"> <div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap('vec')">地图</div> <div id="img" class="base-map-switch base-map-switch-center" onclick="showMap('img')">影像 <div id="ano" class="base-map-ano"> <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" onchange="anoCtrl()"/>标注 </div> </div> </div></div></body></html>
其中的jQuery-1.8.3.js的代码可以自己百度下，然后放到JS文件夹下面。全部代码下载链接：下载链接最后建议先用火狐浏览器打开这个baidumap，显示偏移的话可能是代码错了.google浏览器要改一下，需要配置google chrome支持本地（file协议）的AJAX请求：设置浏览器的快捷方式属性，在“目标”后面加上--allow-文件访问从 - 文件，注意前面有个空格，重新打开浏览器即可。如果还是不显示的话请用火狐浏览器。--------------------- 作者：新生GIS 来源：CSDN 原文：https://blog.csdn.net/qq_41046162/article/details/80248281 版权声明：本文为博主原创文章，转载请附上博文链接！
Arcgis for js加载百度地图的更多相关文章
- （转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
- ArcMap和ArcGIS Pro加载百度地图
前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...
- ARCGIS FLEX API加载google地图、百度地图、天地图（转）
http://www.cnblogs.com/chenyuming507950417/ Flex加载google地图.百度地图以及天地图作底图 一 Flex加载Google地图作底图 (1)帮助类G ...
- （转）Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...
- Delphi中用Webbrowser加载百度地图滚轮失效（ApplicationEvents里使用IsChild提前判断是哪个控件的消息）
在Delphi中使用Webbrowser加载百度地图时,点击了其它界面,再回到百度地图中,即使点击了鼠标,再用滚轮也不能缩 放地图,除非点地图里面的自带的控件,之后才能缩放,原因是因为其它窗体控件获得 ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- 关于ios 程序加载百度地图lib，出现链接错误：找不到符号 (null): _OBJC_CLASS_$_BMKMapManager的解决办法
报告的错误信息 ld: warning: ignoring file /Users/5012/Documents/sphuang/IOS_project/baidu_map/ShareLocation ...
- 在bootstrap modal 中加载百度地图的信息窗口失效解决方法
这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:ht ...
- Vue中加载百度地图
借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式:通过promise以及百度地图的callback回调函数 map.js 1 export function M ...
随机推荐
- Oracle常用操作表结构的语句
首先,一起来认识几个单词. alter (改变) rename(重命名) column(柱子,用来表示列) modify(修改) comment on (评论) truncate (删减,截断) 1. ...
- vue 项目 使用sass以及注意事项
vue 项目 使用sass以及注意事项 1,安装依赖: npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通 ...
- js es6遍历对象的6种方法（应用中推荐前三种）
javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...
- python画图matplotlib基础笔记
numpy~~基础计算库,多维数组处理 scipy~~基于numpy,用于数值计算等等,默认调用intel mkl(高度优化的数学库) pandas~~强大的数据框,基于numpy matplotli ...
- Jetson TK下如何写汇编语言
首先,可以根据http://www.cnblogs.com/zenny-chen/p/3816620.html来安装CUDA工具链.这个工具集里包含了CUDA编译器以及其它必要的工具.然后,我们进入/ ...
- C++ STL 已序区间查找算法
#include <iostream>#include <algorithm>#include <list>#include <functional># ...
- 轻量级通用上采样算子-CARAFE
转载:https://zhuanlan.zhihu.com/p/76063768 前言 这篇论文被 ICCV 2019 接收为 oral presentation.之前我们主要研究物体检测(例如 Hy ...
- HBase管理与监控——统计表行数
背景 HBase统计 RowCount 的方法有好几种,并且执行效率差别巨大,以下3种方法效率依次提高. 一.hbase-shell的count命令 这是最简单直接的操作,但是执行效率非常低,适用 ...
- Kuhn-Munkras算法解决二分图最优权值匹配
在看这篇博文之前建议看一下上一篇匈牙利法解决二分图最大匹配问题: https://www.cnblogs.com/fangxiaoqi/p/10808729.html 这篇博文参考自:https:// ...
- utgard OPC 主要功能简介
度娘还行,尽管不好用,但所有的开发人员不懈努力地写博客,能得到很多东西! 这里向所有未谋面的博主们致敬! 搜了一堆OPC资料,在这里整理一下,用一个封装类来说明utgard的主要接口.使用了java自 ...