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

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); //面积
     });

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

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
要实现百度地图电子围栏,需要使用百度地图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、付费专栏及课程。

余额充值