如何用ArcGIS API for JavaScript 抓取切片的百度地图和高德地图
首先需要建立抓取不同图层并切片的js文件，并通过 js文件返回url
有需要的话可以通过访问以下github链接进行获取
首先给出baidu地图的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 (properties) {
this.spatialReference = new SpatialReference({
wkid: 102113
});
// 图层提供的起始显示范围以及整个图层的地理范围
this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
this.initialExtent = new Extent(5916776.8, 1877209.3, 19242502.6, 7620381.8, this.spatialReference);
// 图层提供的切片信息
this.tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {
"x": -20037508.342787,
"y": 20037508.342787
},
"spatialReference": {
"wkid": 102113
},
"lods": [
{ "level": 0, "resolution": 156543.033928, "scale": 591657527.591555 },
{ "level": 1, "resolution": 78271.5169639999, "scale": 295828763.795777 },
{ "level": 2, "resolution": 39135.7584820001, "scale": 147914381.897889 },
{ "level": 3, "resolution": 19567.8792409999, "scale": 73957190.948944 },
{ "level": 4, "resolution": 9783.93962049996, "scale": 36978595.474472 },
{ "level": 5, "resolution": 4891.96981024998, "scale": 18489297.737236 },
{ "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618 },
{ "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 },
{ "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 },
{ "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 },
{ "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 },
{ "level": 11, "resolution": 76.4370282850732, "scale": 288895.277144 },
{ "level": 12, "resolution": 38.2185141425366, "scale": 144447.638572 },
{ "level": 13, "resolution": 19.1092570712683, "scale": 72223.819286 },
{ "level": 14, "resolution": 9.55462853563415, "scale": 36111.909643 },
{ "level": 15, "resolution": 4.77731426794937, "scale": 18055.954822 },
{ "level": 16, "resolution": 2.38865713397468, "scale": 9027.977411 },
{ "level": 17, "resolution": 1.19432856685505, "scale": 4513.988705 },
{ "level": 18, "resolution": 0.597164283559817, "scale": 2256.994353 },
{ "level": 19, "resolution": 0.298582141647617, "scale": 1128.497176 }
]
});
// 设置图层的loaded属性，并触发onLoad事件
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
var zoom = level - 1;
var offsetX = Math.pow(2, zoom);
var offsetY = offsetX - 1;
var numX = col - offsetX;
var numY = (-row) + offsetY;
zoom = level + 1;
var num = (col + row) % 8 + 1;
var url = "http://online1.map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + zoom + "&styles=pl";
return url;
}
});
}
)
高德地图与百度地图的获取类似
getTileUrl: function (level, row, col) {
var url = "";
switch (this.layertype) {
case "road":
url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
break;
case "st":
url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;
break;
case "label":
url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;
break;
default:
url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
break;
}
return url;
}
html主体如下
添加了按钮进行图层的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地图抓取</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.23/3.23/dijit/themes/tundra/tundra.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [{
"name": "js",
"location": location.pathname.replace(/\/[^/]+$/, "") + "/js"
}]
};
</script>
<script src="http://localhost/arcgis_js_api/library/3.23/3.23/init.js"></script>
<script>
var map;
var bdlayer;
//var bdlayer2;
//var bdlayer3;
var gdlayer;
//var gdlayer2;
//var gdlayer3;
require([
"esri/map",
"js/BaiduLayer",
"js/GaodeLayer",
"dojo/parser",
"dojo/domReady!"],
function(Map, BaiduLayer,GaodeLayer,parser) {
parser.parse();
map = new Map("map", {
logo: false,
center: [119.9, 40.7],
zoom: 4
});
//加载百度地图图层
bdlayer = new BaiduLayer( { mapType: "dark"});
gdlayer = new GaodeLayer({layertype:"st"});
map.addLayer(bdlayer);
map.addLayer(gdlayer);
bdlayer.hide();
gdlayer.hide();
});
function baidu()
{
bdlayer.show();
gdlayer.hide();
}
function gaode()
{
gdlayer.show();
bdlayer.hide();
}
</script>
</head>
<body class="tundra">
<p>
<button name="bt1" onclick="baidu();">百度地图</button>
</p>
<p>
<button name="bt2" onclick="gaode();">高德地图</button>
</p>
<div id="map">
</div>
</body>
</html>
百度地图如下
高德地图如下（采用的是高德地图的卫星图）