基于高德地图实现可编辑的电子围栏功能【圆形围栏】

最近项目中用到电子围栏功能，于是简单了解一番，因之前的地图使用高德，故电子围栏仍使用高德，百度等其他地图类似。

该功能经过多次优化完善，基本可用。

1、主要功能：

1. 围栏CURD；
2. 自定义围栏半径，中心点；
3. 越栏自动预警。

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>