高德地图进阶开发实战案例(2):电子围栏（多边形的绘制）的展示

构建高德地图

   var map = new AMap.Map('container', {
     
        center: [121.548181, 29.806906],
        zoom: 15
    });

多边形展示

    var path = [
        [121.546266, 29.80975],
        [121.54543, 29.806845],
        [121.548713, 29.806752],
        [121.549957, 29.809508]
    ]

    var polygon = new AMap.Polygon({
     
        path: path,
        strokeColor: "#1E9FFF",
        strokeWeight: 2,
        strokeStyle: 'dashed',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50,
    })

    map.add(polygon)
    // 缩放地图到合适的视野级别
    map.setFitView([polygon])

多边形绘制辅助工具

引入外部API

   <script src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed5c66**&plugin=AMap.MouseTool">script>

   var map = new AMap.Map('container', {
     
        zoom: 14
    });

    var mouseTool = new AMap.MouseTool(map);

    //监听draw事件可获取画好的覆盖物
    var overlays = [];
    mouseTool.on('draw', function (e) {
     
        //绘制多边形;
        overlays.push(e.obj);
        //获取坐标;
        console.log(e.obj.getPath());
        //格式化坐标;
        var polyPoints = e.obj.getPath();
        var arr = "";
        for (var i = 0; i < polyPoints.length; i++) {
     
            arr += polyPoints[i].lng + "," + polyPoints[i].lat + ";";
        }
        console.log(arr);//121.540994,29.870174;121.55138,29.858116;121.55756,29.874193;
    })

    //多边形样式;
    mouseTool.polygon({
     
        strokeColor: "#1E9FFF",
        strokeWeight: 2,
        strokeStyle: 'dashed',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50,
    });

    //清除覆盖物;
    var radios = document.getElementsByName('func');
    document.getElementById('clear').onclick = function () {
     
        map.remove(overlays)
        overlays = [];
    }

lockdatav Done!