我们在做卫星影像地图开发时,在偏远地区,高德地图的清晰度不够,因此需要使用天地图,但是高德地图的API更有利于开发者进行功能开发,因此,我们想到使用高德地图添加天地图作为底图来进行使用。废话不多说,直接上代码,该示例代码除了使用天地图作为底图外,还添加了多边形编辑功能。
代码中的key替换为高德地图和天地图的key即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<title>自定义栅格底图</title>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
<button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">新建</button>
<button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button>
<button class="btn" onclick="polyEditor.close()">结束编辑</button>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=xxx&plugin=AMap.PolygonEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
map = new AMap.Map("container", {
//设置地图容器id
viewMode: "2D", //是否为3D地图模式
pitch: 40,
zoom: 9, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置
});
// 值得一提的是,在使用高德地图时是可以将天地图转成3d的
var wms = new AMap.TileLayer.WMTS({
url: "http://t4.tianditu.gov.cn/img_w/wmts",
blend: false,
tileSize: 256,
params: {
Layer: "img",
Version: "1.0.0",
Format: "tiles",
TileMatrixSet: "w",
STYLE: "default",
tk: "xxx", // 申请的天地图开发者key
},
});
wms.setMap(map);
var path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]]
// var path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]]
var path2 = [[116.54264805936002,39.990644273255185], [116.52508559899643,39.97740652328089], [116.50848020794649,39.99115004875152],[116.52945031889253,40.00276956444862]]
var polygon1 = new AMap.Polygon({
path: path1
})
var polygon2 = new AMap.Polygon({
path: path2
})
map.add([polygon1, polygon2]);
map.setFitView();
var polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons([polygon1, polygon2]);
polyEditor.on('add', function (data) {
console.log(data);
var polygon = data.target;
polyEditor.addAdsorbPolygons(polygon);
polygon.on('dblclick', () => {
polyEditor.setTarget(polygon);
polyEditor.open();
})
})
polygon1.on('dblclick', () => {
polyEditor.setTarget(polygon1);
polyEditor.open();
})
polygon2.on('dblclick', () => {
polyEditor.setTarget(polygon2);
polyEditor.open();
})
function createPolygon() {
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
}
polyEditor.setTarget(polygon2);
polyEditor.open();
</script>
</body>
</html>
Android端使用高德地图加载天地图的案例参考:
Android使用高德地图添加天地图作为底图-CSDN博客