最近项目中用到电子围栏功能，于是简单了解一番，因之前的地图使用高德，故电子围栏仍使用高德，百度等其他地图类似。
该功能经过多次优化完善，基本可用。
1、主要功能：
围栏CURD；自定义围栏半径，中心点；越栏自动预警。
2、效果图：
3、核心代码：
<script type="text/javascript">
//Update by liangxin at 2020-08-21 23:34
//地图加载
var map = new AMap.Map("container", {
center:[0,0],
resizeEnable: true,
zoom: 14
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
});
var initFenceRadius='${fenceRadius}'||10000;
var circle = new AMap.Circle({
center: [0,0],
radius: 0, //半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
})
var circleEditor = new AMap.CircleEditor(map, circle)
//构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
$("#fenceRadius").text(initFenceRadius);
$("#fenceArea").text((Math.PI * Math.pow(Number(initFenceRadius),2)/10000000).toFixed(2));
circle.setMap(map)
// 缩放地图到合适的视野级别
map.setFitView([ circle ])
circleEditor.on('move', function(event) {
$("#fenceCenter").text(event.target.getCenter());
$("#fenceRadius").text(event.target.getRadius());
var area = (Math.PI * Math.pow(event.target.getRadius(),2)/10000000).toFixed(2);
$("#fenceArea").text(area);
})
circleEditor.on('adjust', function(event) {
$("#fenceRadius").text(event.target.getRadius());
var area = (Math.PI * Math.pow(event.target.getRadius(),2)/10000000).toFixed(2);
$("#fenceArea").text(area);
})
circleEditor.on('end', function(event) {
$("#fenceCenter").text(event.target.getCenter());
$("#fenceRadius").text(event.target.getRadius());
var area = (Math.PI * Math.pow(event.target.getRadius(),2)/10000000).toFixed(2);
$("#fenceArea").text(area);
})
}
</script>
