前言
项目中用到高德地图制作电子围栏，遂留下记录。
实例
<!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">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>多边形和圆的绘制和编辑</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=您的key&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 多边形 -->
<div class="input-card" style="width: 120px">
<button class="btn" style="margin-bottom: 5px">多边形</button>
<button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">创建多边形</button>
<button class="btn" onclick="openPolygon()" style="margin-bottom: 5px">开始编辑</button>
<button class="btn" onclick="closePolygon()" style="margin-bottom: 5px">结束编辑</button>
<button class="btn" onclick="setDraggable()" style="margin-bottom: 5px">切换拖拽</button>
<button class="btn" onclick="clearMask()" style="margin-bottom: 5px">清除遮罩</button>
<button class="btn" onclick="clearAllMask()" style="margin-bottom: 5px">清除所有覆盖物</button>
</div>
<!-- 圆 -->
<div class="input-card" style="width: 120px;margin-right: 133px;">
<button class="btn" style="margin-bottom: 5px">圆</button>
<button class="btn" onclick="createCircle()" style="margin-bottom: 5px">创建圆</button>
<button class="btn" onclick="openCircle()" style="margin-bottom: 5px">开始编辑</button>
<button class="btn" onclick="closeCircle()" style="margin-bottom: 5px">结束编辑</button>
<button class="btn" onclick="setCircleDraggable()" style="margin-bottom: 5px">切换拖拽</button>
<button class="btn" onclick="clearCircleMask()" style="margin-bottom: 5px">清除遮罩</button>
<button class="btn" onclick="clearAllMask()" style="margin-bottom: 5px">清除所有覆盖物</button>
</div>
<!-- 多边形 -->
<script type="text/javascript">
var polyEditor = null
var polygon = null
var draggable = true
var map = new AMap.Map("container", {
center: [116.400274, 39.905812],
zoom: 14
});
// 创建多边形
function createPolygon() {
polygon = new AMap.Polygon({
path: [
[116.403322, 39.920255],
[116.410703, 39.897555],
[116.402292, 39.892353],
[116.389846, 39.891365]
],
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
draggable: draggable, //是否可拖动
})
map.add(polygon)
// 缩放地图到合适的视野级别
map.setFitView([polygon])
polyEditor = new AMap.PolyEditor(map, polygon)
// 监听事件,注意监听事件分为polyEditor和polygon
// https://lbs.amap.com/api/javascript-api/reference/overlay#polygon
// https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.PolyEditor
polyEditor.on('addnode', function (event) {
//切忌不要通过event的路径去拿path，tm路径居然会不定时变，
//辛亏上线前发现了。可以用polygon.getPath()
log.info('触发事件：addnode')
})
polyEditor.on('adjust', function (event) {
log.info('触发事件：adjust')
})
polyEditor.on('removenode', function (event) {
log.info('触发事件：removenode')
})
polyEditor.on('end', function (event) {
log.info('触发事件： end')
// event.target 即为编辑后的多边形对象
})
polygon.on('dragging', function (event) {
log.info('触发事件：dragging')
})
}
function closePolygon() {
polyEditor.close()
}
function openPolygon() {
polyEditor.open()
}
function setDraggable() {
draggable = !draggable
log.info('修改draggable为-' + draggable)
polygon.setOptions({
strokeColor: '#ffeeff',
fillColor: '#3366FF',
draggable: draggable, //是否可拖动
});
}
function clearMask() {
log.info('清除遮罩')
map.remove(polygon); //可以传入一个数组，表示批量移除.这里有个问题就是，如何矢量图处于编辑状态，他的编辑点是清除不了的
// polygon.setMap(null) //同样无法清除编辑点
//没找到相应api，想着直接把path变成空数组达到清除编辑点的效果
// polygon.setOptions({
// path: [], //发现这样清空没效果
// });
polygon.setPath([]); //这样可以
}
function clearAllMask() {
log.info('清除所有覆盖物')
map.clearMap()
}
</script>
<!-- 圆 -->
<script type="text/javascript">
var circle = null
var circleEditor = null
var map = new AMap.Map("container", {
center: [116.400274, 39.905812],
zoom: 14
});
// 创建圆
function createCircle() {
circle = new AMap.Circle({
center: [116.433322, 39.900255],
radius: 1000, //半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
draggable: draggable, //是否可拖动
})
circle.setMap(map)
// 缩放地图到合适的视野级别
map.setFitView([circle])
circleEditor = new AMap.CircleEditor(map, circle)
// 监听事件,注意监听事件分为polyEditor和polygon
// https://lbs.amap.com/api/javascript-api/reference/overlay#circle
// https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.CircleEditor
circleEditor.on('move', function (event) {
//切忌不要通过event的路径去拿path，tm路径居然会不定时变，辛亏上线前发现了。
//可以用circle.getRadius()和circle.getCenter()获取中心坐标和半径。
log.info('触发事件：move')
})
circleEditor.on('adjust', function (event) {
log.info('触发事件：adjust')
})
circleEditor.on('end', function (event) {
log.info('触发事件： end')
// event.target 即为编辑后的圆形对象
})
circle.on('dragging', function (event) {
log.info('触发事件：dragging')
})
}
function closeCircle() {
circleEditor.close()
}
function openCircle() {
circleEditor.open()
}
// 圆在编辑状态下，已经可以拖动了，其实这样挺好的，不像多边形，还是有点小坑
function setCircleDraggable() {
draggable = !draggable
log.info('修改draggable为-' + draggable)
circle.setOptions({
draggable: draggable, //是否可拖动
});
}
function clearCircleMask() {
log.info('清除遮罩')
map.remove(circle); //和多边形一样 编辑点还在
// circle.setMap(null) //或
circle.setCenter([0, 0]) //设置下圆心已达到清除编辑点效果
}
</script>
</body>
</html>
结语
如果觉得这篇文章对您有帮助的话，欢迎点赞评论加转发。
首发于语雀文档@is_tao
