文章为转载,内容并未做验证,只是在此记录以便后续使用查看
前言
加载高德作为底图
切片线划图层
gaodelayer.js
define(["dojo/_base/declare",
"esri/geometry/extent",
"esri/spatialreference",
"esri/geometry/point",
"esri/layers/tileinfo",
"esri/layers/tiledmapservicelayer"], function (declare, extent, spatialreference, point, tileinfo, tiledmapservicelayer) {
return declare("gaodelayer", tiledmapservicelayer, {
layertype: "road",//图层类型
constructor: function (args) {
this.spatialreference = new spatialreference({
wkid: 3857
});
declare.safemixin(this, args);
this.fullextent = new extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialreference);
this.initialextent = this.fullextent;
this.tileinfo = new tileinfo({
"cols": 256,
"rows": 256,
"compressionquality": 0,
"origin": new point(-20037508.342787, 20037508.342787, this.spatialreference),
"spatialreference": this.spatialreference,
"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
}]
});
this.loaded = true;
this.onload(this);
},
/**
* 根据不同的laytype返回不同的图层
* @param level
* @param row
* @param col
* @returns {string}
*/
gettileurl: function (level, row, col) {
var url = "";
switch (this.layertype) {
case "road":
url = 'https://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 = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;
break;
case "label":
url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;
break;
default:
url = 'https://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;
}
});
});
在首页集成
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>arcgis js加载高德地图</title>
<link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<style>
html,body{
height: 100%;
}
#map{
height: 100%;
}
</style>
<script type="text/javascript">
var dojoconfig = {
async: false, //是否异步
parseonload: true,
packages: [{ //解释:require(["js/.."],function(){}) 中 js/ 即为 location的值
name: "js", //对应require引用包里的js
location: location.pathname.replace(/\/[^/]*$/, '') + '/js' //对应的路径
}]
};
</script>
<script type="text/javascript" src="https://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script>
//地图控件
var map;
require(["esri/map", "js/gaodelayer", "dojo/domready!"], function (map, gaodelayer) {
map = new map("map", {
center: [118.15, 31.55],
zoom: 11,
logo : false, //logo
slider : false //缩小按钮
});
// var baselayer = new gaodelayer();//默认加载矢量 new gaodelayer({layertype:"road"});也可以
// var baselayer = new gaodelayer({layertype: "st"});//加载卫星图
var baselayer = new gaodelayer({layertype: "label"});//加载标注图
map.addlayer(baselayer);//添加高德地图到map容器
});
</script>
</head>
<body>
<!-- 地图p的id设为map -->
<p id="map"></p>
</body>
</html>
结果: