今天点开arcgis api for javascript官网一看，又更新新版本了【3.23和4.6】。由于之前项目需求用到了谷歌地图、海图这些在线地图，于是这两天突然有了一个想法：整理常用在线地图的引用方法和，包括百度地图、天地图、谷歌地图、高德地图、海图。首先来讲解百度地图的引用。
方法：主要是利用tiledmapservicelayer加载切片地图，关于tiledmapservicelayer的说明大家可以去官网学习一下。
下面是加载百度地图和遥感影像的效果图。
下面是定义百度地图图层baidulayer的相关代码：
我要评论
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 = "https://online1.map.bdimg.com/tile/?qt=tile&x=" + numx + "&y=" + numy + "&z=" + zoom + "&styles=pl";
return url;
}
});
}
)
加载百度地图图层的代码：
<script>
var map;
require([
"esri/map",
"src/baidulayer",
"dojo/parser",
"dojo/domready!"],
function(map, baidulayer, parser) {
parser.parse();
map = new map("map", {
logo: false,
center: [119.9, 40.7],
zoom: 4
});
//加载百度地图图层
var bdlayer = new baidulayer();
map.addlayer(bdlayer);
});
</script>
源码下载：
源码包括百度地图和影像（加标注）的自定义文件(src/*.js)和加载文件（.html），arcgis api for javascript使用的是最新版本【3.23】。
其他在线地图的相关代码会后续更新，敬请持续关注。
如对本文有疑问， 点击进行留言回复！！
ros编译package后，devel文件夹内没有对应package的可执行文件
网友评论