vue引入百度地图 地图控件和绘图工具（电子围栏）

最新推荐文章于 2024-05-29 14:16:59 发布
置顶 最新推荐文章于 2024-05-29 14:16:59 发布
阅读量8.8k 收藏 17
点赞数 7
分类专栏： vue 百度地图 电子围栏 地图鼠标绘制工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingbipai5492/article/details/89398824
版权
vue 同时被 3 个专栏收录
17 篇文章 1 订阅
订阅专栏
百度地图
1 篇文章 0 订阅
订阅专栏
电子围栏
1 篇文章 0 订阅
订阅专栏

一、参考文档
1、官方文档：http://lbsyun.baidu.com/index.php?title=jspopular/guide/show
2、百度地图JavaScript API v2.0类参考：（方法很细）
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a6b0

二、代码：

1、HTML代码

<template>
  <div class="cp-page">
    <el-form size="mini" :inline="true">
      <el-form-item>
        <el-button @click="clearAll">重置</el-button>
      </el-form-item>
      <div class="input_list">
        <span style="padding-right: 30px">圆半径(m)：<input v-model="Math.floor(radius)"/></span>
        <span style="padding-right: 30px">圆面积(m²)：<input v-model="Math.floor(circleArea)"/> (m²)</span>
        <span >多边形面积(m²)：<input v-model="Math.floor(polygonArea)"/> </span>
      </div>
    </el-form>
    <div id="bmap-box"></div>
  </div>
</template>

2、JS代码
引入百度地图链接和秘钥
在这里插入图片描述3、JS代码

  import '@/assets/js/bmap/DrawingManager_min.js'
  import '@/assets/js/bmap/DrawingManager_min.css'
  export default {
		data(){
		      return{
		        mapObj: null, //地图
		        drawingManager:null, //鼠标绘图工具
		        overlays:[],//清除底层图案
		        show:false,
		
		        circle:null,//圆形
		        radius:'', //半径
		        circlecenter:[],//圆心坐标
		        circleArea:'', //面积
		
		        polygon:null, //多边形
		        polygonPath:[],//获取多边形点坐标
		        polygonArea:'', //面积
		
		      }
     },
     created(){
      this.loadBMapScript();
    },
    mounted(){
      this.initMap();
     //初始化加载绘图工具
      window.setTimeout(()=>{
        this.showDraw()
      }, 100);
    },
    methods:{
      //加载在线文件
      loadBMapScript () {
        let script = document.createElement('script');
        script.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js';
        document.body.appendChild(script);

        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css';
        document.body.appendChild(link);
      },
      //初始化地图
      initMap: function () {
        let self = this;
        let map = utils.bmap.initMap('bmap-box');
        // 创建点坐标
        let point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);
        //鱼骨图
        map.addControl(new BMap.NavigationControl());
        //创建信息窗口
        //let infoWindow = new BMap.InfoWindow();
        //map.openInfoWindow(infoWindow);
        //添加地图类型控件（右上角）
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]})
        );
        self.mapObj = map;
      },
      //显示绘制工具
      showDraw(){
        let self = this;
        self.show=true;
        self.clearAll();
        //画图样式
        let styleOptions = {
          strokeColor:"#f00",    //边线颜色。
          fillColor:"#fff",      //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 1,       //边线的宽度，以像素为单位。
          strokeOpacity: 1,	   //边线透明度，取值范围0 - 1。
          fillOpacity: 0.85,      //填充的透明度，取值范围0 - 1。
          strokeStyle: 'solid' //边线的样式，solid或dashed。
        };
        //生成鼠标绘制工具
        self.drawingManager = new BMapLib.DrawingManager(self.mapObj , {
          isOpen: false,
          enableDrawingTool:true, //是否显示工具栏
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 50),
            /*drawingModes:[
              BMAP_DRAWING_POLYGON,
              BMAP_DRAWING_CIRCLE
            ]*/
          },
          //图形默认样式
          circleOptions: styleOptions,
          polylineOptions: styleOptions,
          polygonOptions: styleOptions,
          rectangleOptions: styleOptions
        });
        //判断图案类型
        let overlaycomplete = function(e){
          //清除底层图案
          self.mapObj.clearOverlays();
           //判断画图的类型
          if(e.drawingMode=='circle'){
            self.clearData();
            self.radius=e.overlay.getRadius();//圆半径
            self.circlecenter=e.overlay.getCenter(); //圆心坐标
            self.circleArea = 3.14*(self.radius*self.radius)
            self.drawingManager.close();
            //增加圆
            self.circle = new BMap.Circle(self.circlecenter,self.radius,
              {strokeColor:"red", strokeWeight:1, strokeOpacity:0.85});
            self.mapObj.clearOverlays();
            self.mapObj.addOverlay(self.circle);
            //编辑圆
            self.circle.enableEditing();
            self.circle.addEventListener("lineupdate",function(e){
              self.circlecenter=e.target.point; //圆心
              self.radius=e.target.ya; //半径
              self.circleArea = 3.14*(self.radius*self.radius); //面积
            });
          }else if(e.drawingMode=='polygon'||e.drawingMode=='rectangle'){
              //画多边形
              self.clearData();
              self.polygonPath=e.overlay.getPath(); //获取多边形路径点
              self.drawingManager.close();
              self.mapObj.clearOverlays();
              //增加多边形，
              self.polygon = new BMap.Polygon(self.polygonPath,
                {strokeColor:"red", strokeWeight:1, strokeOpacity:0.85});
              self.mapObj.clearOverlays();
              self.mapObj.addOverlay(self.polygon);
              //编辑多边形
              self.polygon.enableEditing();
              self.polygon.addEventListener("lineupdate",function(e){
                self.polygonArea = ""; //面积
                //alert(e.target.Nc[0].tb.lng);
                console.log(e.target.Nc[0].tb.lng)
              });
          }else if(e.drawingMode=='marker'){
            //显示mark点
            self.clearData();
            self.drawingManager.close();
            self.mapObj.clearOverlays();
            let point=e.overlay.point;
            let marker = new BMap.Marker(point);// 创建标注
            self.mapObj.clearOverlays();
            self.mapObj.addOverlay(marker);
            marker.enableDragging();
          }else if(e.drawingMode=='polyline'){
            self.clearData();
            self.drawingManager.close();
            self.mapObj.clearOverlays();
            let polyPath = e.overlay.getPath();
            let polyline= new BMap.Polyline(polyPath,{strokeColor:"red", strokeWeight:1, strokeOpacity:0.85})
            self.mapObj.clearOverlays();
            self.mapObj.addOverlay(polyline);
            polyline.enableEditing()
          }
        };
        //监听画图方法
        self.drawingManager.addEventListener('overlaycomplete', overlaycomplete);
      },
      //清空坐标点
      clearData(){
        let self=this;
        self.radius=''; //半径
        self.circleArea='';
        self.polygonArea="";
      },
      //重置方法
      clearAll(){
        let self=this;
        self.clearData();
        self.mapObj.clearOverlays();
        for(let i = 0; i < self.overlays.length; i++){
          self.mapObj.clearOverlays(self.overlays[i]);
        }
        self.overlays.length = 0;
      },

    }

}

三、注意事项
1、初始化鼠标绘制工具，一直报错，这段代码放在mounted(){}方法里，没办法用了延迟加载

//初始化加载绘图工具
      window.setTimeout(()=>{
        this.showDraw()
      }, 100);

2、需要注意的是drawingToolOptions可选参数里面的drawingModes，工具栏上可以选择出现的绘制模式,将需要显示的DrawingType以数组型形式传入，如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 将只显示画点和画圆的选项，总共有以下五个常量，可根据自己情况选择是否添加显示
BMAP_DRAWING_MARKER 画点
BMAP_DRAWING_CIRCLE 画圆
BMAP_DRAWING_POLYLINE 画线
BMAP_DRAWING_POLYGON 画多边形
BMAP_DRAWING_RECTANGLE 画矩形

//生成鼠标绘制工具
        self.drawingManager = new BMapLib.DrawingManager(self.mapObj , {
          isOpen: false,
          enableDrawingTool:true, //是否显示工具栏
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 50),
            // 在这里配置你需要的画图工具
            /*drawingModes:[   
              BMAP_DRAWING_POLYGON,
              BMAP_DRAWING_CIRCLE
            ]*/
          },
          //图形默认样式
          circleOptions: styleOptions,
          polylineOptions: styleOptions,
          polygonOptions: styleOptions,
          rectangleOptions: styleOptions
        });

3、加载外联的js和css，需要把这两个文件下载到本地，两种方式都加上

import '@/assets/js/bmap/DrawingManager_min.js'
 import '@/assets/js/bmap/DrawingManager_min.css'
loadBMapScript () {
  let script = document.createElement('script');
  script.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js';
  document.body.appendChild(script);
	
	let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css';
    document.body.appendChild(link);
},

4、画圆形
首先、清除地图上的图形；在添加

self.mapObj.clearOverlays();
self.mapObj.addOverlay(self.circle);

获取圆心坐标和半径（e.overlay.getRadius()）

self.radius=e.overlay.getRadius();//圆半径
self.circlecenter=e.overlay.getCenter(); //圆心坐标
self.circleArea = 3.14*(self.radius*self.radius) //圆的面积
self.drawingManager.close(); //关闭绘图工具

编辑圆

//编辑圆
     self.circle.enableEditing();  // 开启圆形编辑器
     self.circle.addEventListener("lineupdate",function(e){   //监听编辑圆形的事件
       self.circlecenter=e.target.point; //圆心
       self.radius=e.target.ya; //半径
       self.circleArea = 3.14*(self.radius*self.radius); //面积
     });

其他类型的编辑工具，类似方法，同上，一定要多看文档。

Eliano
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue中百度地图的图形绘制
kleinBlue.的博客
09-26 1299
说明 由于 MVVM 数据驱动视图的特性，地图中的图形绘制不再需要使用BMapLib.DrawingManager等第三方工具库来实现。 示例 绘制折线 代码 <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="14" @mousemove="syncPolyline" @click="paintPolyline" @rightclick="newPolyline"> &l..
DrawingManager.js和相关需要引入的文件
12-12
DrawingManager.js和相关需要引入的文件
vue3百度地图电子地图--电子围栏实现，绘制覆盖物圆和多边形的范围，覆盖物的回显和编辑
最新发布
weixin_43373009的博客
05-29 631
vue3百度地图电子地图--电子围栏实现，绘制覆盖物圆和多边形的范围，覆盖物的回显和编辑
认识vue-konva画图工具
weixin_45353536的博客
03-31 9728
认识vue-konva
Vue-baidu-map实现绘制多边形及回显多边形区域
Holly31的博客
04-21 1351
【代码】Vue-baidu-map实现绘制多边形及回显多边形区域。
百度地图BMap vue 绘制电子围栏--模拟矩形编辑--测距工具
weixin_46567616的博客
05-10 2814
具体集成请自行参考百度，页面地图是使用BMap，后面打算引入百度地图绘制辅助工具BMapGLLib，结果并不能正常显示绘制工具和进行绘制；注意：由于矩形特殊，且new BMapLib.DrawingManager绘制工具没有自带的矩形编辑功能，只能通过捷径进行模拟矩形绘制，本文只进行两个顶点的模拟拉动，如想四顶点一起模拟请自行编写（思路一致，处理好拉动一个顶点其余三顶点逻辑关系就好==>可参考如下方法：虽然比较笨，但可实现，如有高效便捷方法请分享呗）v=3.0&ak=您的密钥">
百度地图的DrawingManager使用
kiscon的博客
04-27 5936
背景 当需要绘制圆形、矩形等围栏需求的时候，就需要鼠标绘制管理类。下面谈谈BMapLib.DrawingManager的使用以及遇到的问题。 类BMapLib.DrawingManager使用 参考地址 可以动态加载DrawingManager_min.js，以下是把该js下载到项目中修改使用。 应用 定义一个绘制模式文件 export const BMAP_DRAWING_MARKER = 'm...
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
百度地图自定义控件分享
09-03
在使用百度地图API进行开发时，自定义控件是一个非常实用的功能，它允许开发者根据自己的需求创建独特的交互式按钮或工具栏，以增强用户体验。本文将深入解析如何使用百度地图API实现自定义控件，并通过示例代码进行...
vue电子地图围栏
03-01
vue电子地图围栏，只包含前端代码，后台需要根据自己需要连接起来
百度地图绘制电子围栏，圆形、矩形、多边形、行政区域 （ 方式2）
12-12
百度地图绘制电子围栏，圆形、矩形、多边形、行政区域 （ 方式2）
vue项目中使用百度地图的方法
08-27
在使用百度地图的方法时，需要在 Vue 项目中引入百度地图的 JavaScript 库，然后在组件中使用百度地图的 API 实现地图的显示和交互功能。例如，在上面的代码中，我们使用了 BMap.Map、BMap.Point、BMap.Marker 等 ...
Vue实现仿window画图
weixin_72388638的博客
05-20 2093
Vue仿Windows画图，通过canvas实现
Vue百度地图电子围栏
冷色Magic的博客
11-12 6640
在线访问地址 http://wecode2020.gitee.io/bmap-hurdle/ 码云仓库地址 https://gitee.com/wecode2020/bmap-hurdle 主要依赖 element-ui、v-region（地区选择器）、百度地图v3.0、DrawingManager（绘制工具） 1、index.html 引入百度地图v3.0、DrawingManager 2、packpage.json 引入element-ui、v-region 3、main.js .
【百度 JavaScript API v3.0】BMapLib.DrawingManager 鼠标绘制
joanmelon的博客
02-14 1457
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
vue绘制流程图的插件 flowchart-vue
SmallGirlYang的博客
11-13 7371
记录一个vue可以绘制流程图的插件 flowchart-vue。
vue2和vue3 canvas插件，绘制海报，生成图片等等。
PrimaryColor
08-26 3028
将插件代码下载后，放在vue项目中的components目录下。
DrawingManager.js___百度地图API
热门推荐
crazzy0727的专栏
07-03 1万+
1 /** 2 * @fileoverview 百度地图的鼠标绘制工具，对外开放。 3 * 允许用户在地图上点击完成鼠标绘制的功能。 4 * 使用者可以自定义所绘制结果的相关样式，例如线宽、颜色、测线段距离、面积等等。 5 * 主入口类是DrawingManager， 6 * 基于Baidu Map API 1.4。 7 * 8 * @author Bai
java和vue实现百度地图的电子围栏
05-24
要实现百度地图的电子围栏，需要使用百度地图JavaScript API和Vue.js框架。 首先，你需要在百度地图开放平台注册账号并创建应用，获取到AK（Access Key）。 接下来，在Vue项目中安装百度地图JavaScript API的库： ``` npm install baidu-map --save ``` 然后，需要在Vue组件中引入百度地图JavaScript API和Vue.js框架： ```javascript <script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_AK"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> ``` 在Vue组件中，可以使用`<baidu-map>`标签来显示百度地图： ```html <template> <div> <baidu-map :center="center" :zoom="zoom"></baidu-map> </div> </template> <script> import BaiduMap from 'vue-baidu-map' export default { components: { BaiduMap }, data() { return { center: { // 地图中心点 lng: 116.404, lat: 39.915 }, zoom: 15 // 地图缩放级别 } } } </script> ``` 接下来就是实现电子围栏功能了。首先，需要在地图上绘制一个多边形，表示电子围栏的范围： ```javascript // 创建多边形对象 const polygon = new BMap.Polygon([ new BMap.Point(116.409, 39.920), new BMap.Point(116.399, 39.920), new BMap.Point(116.399, 39.910), new BMap.Point(116.409, 39.910) ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.1}); // 添加多边形到地图中 map.addOverlay(polygon); ``` 然后，需要监听地图上的移动事件，判断当前位置是否在电子围栏内： ```javascript // 监听地图移动事件 map.addEventListener("moveend", function() { // 判断当前位置是否在电子围栏内 const point = map.getCenter(); if (BMapLib.GeoUtils.isPointInPolygon(point, polygon)) { alert("在电子围栏内！"); } else { alert("不在电子围栏内！"); } }); ``` 以上是Java和Vue实现百度地图的电子围栏的大致步骤，具体实现过程中还需要根据自己的需求进行调整。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值