在之前的文章,讲解了 点,线,面的绘制。每一个物体都是一个对象,在实际开发中难免会对这些对象,进行隐藏和显示操作。
如果一个一个隐藏,会非常麻烦,这里我们就可以使用OverlayGroup ,将一个个覆盖物对象添加到OverlayGroup里,通过对OverlayGroup的显隐控制达到,对多个覆盖物的显隐操作。
全部代码展示 (其中xxxx 高德的秘钥,cccc是高德的key,需要自己申请)
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map</title>
<style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
.button-group {
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input
type="button"
class="button"
value="显示覆盖物"
onClick="overlayGroup.show()"
/>
<input
type="button"
class="button"
value="隐藏覆盖物"
onClick="overlayGroup.hide()"
/>
</div>
</body>
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
</script>
<script
language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"
></script>
<script language="javascript">
const map = (window.map = new AMap.Map("container", {
center: [114.942465, 39.78421],
viewMode: "3D",
zoom: 8,
showLabel: false,
}));
//--------------------------------------面--------------------------------------
let polygon = new AMap.Polygon({
map,
path: [
[113.932241, 39.695409],
[114.573982, 39.732067],
[114.662936, 39.214627],
[113.855994, 39.076651],
[113.512885, 39.352332],
],
});
//--------------------------------------点--------------------------------------
let text = new AMap.Text({
map,
position: [115.618336, 39.87965],
text: "我是text",
});
//--------------------------------------线--------------------------------------
let polyline = new AMap.Polyline({
map,
path: [
[115.657355, 39.889531],
[115.962309, 39.902048],
[115.971514, 39.751649],
],
});
//创建overlayGroup 也可以在创建overlayGroup的同时将覆盖物添加进overlayGroup
let overlayGroup = new AMap.OverlayGroup();
//将覆盖物添加到overlayGroup
overlayGroup.addOverlay(polygon);
overlayGroup.addOverlay(text);
overlayGroup.addOverlay(polyline);
//将overlayGroup添加到指定地图对象中
map.add(overlayGroup);
</script>
</html>
在地图上添加了两个按钮 ,用于更直观的控制overlayGroup的显隐