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


相关文章
jeecgboot跨表联合查询分页查询
jeecgboot跨表联合查询分页查询
347 0
|
Java Linux iOS开发
Typora最新版破解, 2022年11.7破解成功
Typora最新版破解, 2022年11.7破解成功, 支持Linux, Windows, Mac三端破解, 你值得拥有哦
|
Docker 容器
Docker必备国内镜像
Docker必备国内镜像
13069 0
|
6月前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
5081 0
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
7月前
|
关系型数据库 分布式数据库 数据库
基于PolarDB Ganos的实时时空计算:电子围栏篇
文章着重介绍了PolarDB Ganos如何应用于实现实时电子围栏计算。这是一种依赖于位置技术来创建虚拟地理边界的解决方案,广泛应用于交通安全、应急管理、营销推广等多个领域。通过与阿里云实时计算Flink版产品的集成,PolarDB Ganos能够高效地进行空间计算和数据分析,显著提高了地理围栏应用的实时性和准确性。文章还提供了使用Ganos进行电子围栏计算的实际步骤、性能测试及优化建议,并强调了PolarDB Ganos在提高数据处理效率和降低成本方面的优势。
|
9月前
|
资源调度 JavaScript Windows
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
【5月更文挑战第7天】'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
12892 3
|
8月前
使用JTS及其姐妹项目GeoTools进行坐标系转换
【6月更文挑战第7天】使用JTS及其姐妹项目GeoTools进行坐标系转换
849 0
|
9月前
|
JavaScript 定位技术
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
612 0
|
9月前
|
定位技术
uniapp实现地图电子围栏功能
uniapp实现地图电子围栏功能
346 0
|
9月前
|
存储 资源调度 JavaScript
vue上传文件时显示上传进度
vue上传文件时显示上传进度
409 0

热门文章

最新文章