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

简介: 高德地图进阶开发实战案例(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!


相关文章
|
26天前
|
数据可视化 数据挖掘 BI
|
8月前
|
前端开发 定位技术 API
怎么用LarkMap完成地图需求
本文属于技术选型的参考性文章,主要以一个一个的案例分析,来带各位快速的了解到LarkMap能帮助我们完成哪些需求。希望阅读完之后您对LarkMap有一个大致的印象,若后续有地图需求的话,可以考虑使用LarkMap。
291 2
|
8月前
|
前端开发 JavaScript 算法
程序技术好文:高德地图经纬度坐标拾取工具
程序技术好文:高德地图经纬度坐标拾取工具
219 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
378 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
329 0
|
定位技术 容器
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
160 0
|
9月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
120 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
250 1
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
184 0