<!doctype html>
<html lang='en'>
<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'>
<meta name="description" content="通过 setMap(map) 在切片图层上显示行政区图层。">
<title>简易行政区图 - 在切片图层上显示行政区图层</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id='container'></div>
<div class="input-card" style="width: auto;">
<div class="input-item">
<button id="add-layer-btn" onclick="addLayer()" class="btn">添加图层</button>
</div>
<div class="input-item">
<button id="rm-layer-btn" onclick="rmLayer()" class="btn">移除图层</button>
</div>
</div>
<script src='https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictLayer'></script>
<script>
// 绘制世界地图国家轮廓
var disWorld = new AMap.DistrictLayer.World({
zIndex: 10,
styles: {
// 颜色格式: #RRGGBB、rgba()、rgb()、[r, g, b, a]
// 国境线
'nation-stroke': 'rgba(20, 20, 233, 0.6)',
// 海岸线
'coastline-stroke': '',
// 填充
'fill': ''
}
});
var tileLayer = new AMap.TileLayer();
var map = new AMap.Map('container', {
zooms: [3, 15],
center: [0, 20],
showIndoorMap: false,
zoom: 3,
isHotspot: false,
defaultCursor: 'pointer',
touchZoomCenter: 1,
pitch: 0,
// mapStyle: 'amap://styles/midnight',
layers: [
tileLayer,
disWorld
],
viewMode: '3D',
resizeEnable: true
});
document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号、GS(2019)756号'
function addLayer() {
disWorld.setMap(map);
document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号、GS(2019)756号'
}
function rmLayer() {
disWorld.setMap(null);
document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号'
}
</script>
</body>
</html>
订阅评论
0 评论