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

置顶 于 2019-04-19 14:00:21 发布
阅读量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
    评论
专栏目录
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值