在arcgis api for js中仅有的basemap有"streets" , "satellite" , "hybrid", "topo", "gray", "oceans", "national-geographic", "osm",但是在特殊的情况下我们可能会需要天地图,那么一起来看一下arcgis api js是怎么调用天地图的吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>arcgis api js 调用天地图</title>
<link rel="stylesheet" href="3.27/esri/css/esri.css" />
<style>
html,
body,
#map {
margin: 0 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
<script type="text/javascript" src="3.27/init.js"></script>
</head>
<body>
<button id="cva">电子</button>
<button id="img">影像</button>
<div id="map"></div>
<script type="text/javascript">
require([
"esri/map",
"esri/geometry/Point",
"js/TDTLayer.js",
"dojo/domReady!"
],
function(
Map,
Point,
TDTLayer
) {
map = new Map("map", {
logo: false,
sliderPosition: "top-right"
});
var vecLayer = new TDTLayer("vec", {
"id": "矢量图"
});
var cvaLayer = new TDTLayer("cva", {
"id": "标注图"
});
var imgLayer = new TDTLayer("img", {
"id": "影像图"
});
map.addLayers([vecLayer, cvaLayer, imgLayer]);
map.centerAndZoom(new Point(116, 23), 12);
map.on("click", function(evt) {
console.log(evt.mapPoint);
console.log(map.extent);
console.log(map);
})
document.getElementById("img").onclick = function() {
map.getLayer("影像图").show();
map.getLayer("矢量图").hide();
map.getLayer("标注图").hide();
}
document.getElementById("cva").onclick = function() {
map.getLayer("影像图").hide();
map.getLayer("矢量图").show();
map.getLayer("标注图").show();
}
});
</script>
</body>
</html>
运行效果如上,地图上的“电子”和“影像”为自定义的按钮,可以进行电子和影像的切换;总体来说arcgis api js调用天地图是很简单的(①通过script标签引入天地图api+key;②在require引入arcgis api js支持天地图的依赖文件,接着在构造申明arcgis api js对象;③在js代码中实例化声明的arcgis api js对象即可),但是需要注意的一点是2019年1月1日开始天地图对外开放的地图不可以直接调用,而需要在天地图官网申请key值,然后才可以调用天地图对外开放的各类地图。