百度地图做电子围栏总结

2020-02-24 18:36:17

参考地址 百度地图做电子围栏总结

需求:在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。


主要的难点(对于我而言)不在于画,而在于设置地图视野和围栏区域的中心点显示围栏名称,其实也不算难,主要是花比较多时间去看百度地图api,还有动手实践。(所以还是那句老话百度找不到答案就去看api文档,答案都在里面)。

以下主要说一下思路:

1.引入百度地图还有鼠标绘制管理类库DrawingManager


2.以下主要贴部分代码说明:


var electronitFence = {


//此处代码省略...


tableData: {},//保存每次list请求返回的数据

overlayObj: {},//保存图形对象(map)

  labelObj: {},//保存label对象(map)

  path: '',//当前新增围栏图形path

  pointArray: [],//坐标点数组用于调整地图视野范围

styleOptions: {//图形样式

    enableClicking: false,

    strokeColor: "blue",    //边线颜色。

    fillColor: "red",      //填充颜色。当参数为空时,圆形将没有填充效果。

    strokeWeight: 2,       //边线的宽度,以像素为单位。

    strokeOpacity: 0.6,    //边线透明度,取值范围0 - 1。

    fillOpacity: 0.5,      //填充的透明度,取值范围0 - 1。

    strokeStyle: 'solid' //边线的样式,solid或dashed。

  },

  init: function () {

    //此处代码省略...


    this.mapInit();

    this.bindEvent();


   //此处代码省略...


  },

  bindEvent:function(){

    //新增围栏

    $('#overlayType li').on('click', function () {

      var index = $(this).index();

      drawingManager.open();//开启地图的绘制模式

      if (index == 0) {

        drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);//绘制矩形

      } else if (index == 1) {

        drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);//绘制圆形

      } else {

        drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);//绘制多边形

      }

    });

    //全选

    $('#checkAll').on('change', function () {

      if ($(this).is(":checked")) {//全选

        $('#page-list .checkItem').prop("checked", true);

        self.pointArray.length = 0;//清空pointArray

        self.curPageOverlayAllShow();//显示全部

        map.setViewport(self.pointArray); //调整视野

      } else {

        $('#page-list .checkItem').prop("checked", false);

        self.curPageOverlayAllHide();//隐藏全部

      }

    });

    //单选

    $('#page-list').on('change', '.checkItem', function () {

      if ($(this).is(":checked")) {

        if (!$('#checkAll').is(":checked")) {

          $('#checkAll').prop("checked", true);

        }

        self.pointArray.length = 0;//清空pointArray

        self.overlayShow(+$(this).val());//显示

        map.setViewport(self.pointArray); //调整视野

      } else {

        self.overlayHide(+$(this).val());//隐藏

        if ($('.checkItem:checked').length == 0) {

          $('#checkAll').prop("checked", false);

        }

      }

    });

  },

  /**

   * map初始化

   */

  mapInit: function () {

    var self = electronitFence;

    map = new BMap.Map('mapBox', {minZoom: 4, maxZoom: 16});

    map.centerAndZoom(new BMap.Point(116.4035, 39.915), 5);

    map.enableScrollWheelZoom();

    //实例化鼠标绘制工具(我不需要工具栏所以直接注释了)

    drawingManager = new BMapLib.DrawingManager(map, {

      isOpen: false, //是否开启绘制模式

      //enableDrawingTool: false, //是否显示工具栏

      //drawingToolOptions: {

      //anchor: BMAP_ANCHOR_TOP_RIGHT, //位置

      //  offset: new BMap.Size(5, 5) //偏离值

      //},

      circleOptions: self.styleOptions, //圆的样式

      polygonOptions: self.styleOptions, //多边形的样式

      rectangleOptions: self.styleOptions //矩形的样式

    });

    //添加鼠标绘制工具监听事件,用于获取绘制结果

    drawingManager.addEventListener('overlaycomplete', electronitFence.overlayComplete);

  },

  overlayComplete: function (e) {

    var self = electronitFence;

    var path = {};

    var bs = e.overlay.getBounds();//覆盖物对象的地理区域范围

    if (e.drawingMode == BMAP_DRAWING_CIRCLE) {//圆形

      path.radius = e.overlay.getRadius();//半径

      path.center = {};//中心点坐标

      path.center.lng = e.overlay.getCenter().lng;

      path.center.lat = e.overlay.getCenter().lat;

      path.path = [bs.getSouthWest(), bs.getNorthEast()];//****这个是重点:用来保存圆形的地理区域范围(Bounds)东北角和西南角坐标,用于地图视野调整

    } else {//矩形或多边形

      path.data = e.overlay.getPath();

      path.center = bs.getCenter();//****这个是重点:用于在图形中心点显示围栏名称

    }

    self.path = JSON.stringify(path);//这个会传给后端保存,请求回围栏列表数据中会一起返回,用于画出对应的图形


    //此处代码省略...

  },


  //此处代码省略...



  /**

   * 在地图上新建图形

   * @param id

   * @param type

   * @returns {*}

   */

  newOverlay: function (id, type) {

    var self = electronitFence;

    var overlay = null;

    var path = JSON.parse(self.tableData[id].coordinate);//tableData[id]是围栏列表数据,coordinate保存的是上面的path 值

    if (type == 2) {//圆形

      var mPoint = new BMap.Point(path.center.lng, path.center.lat);

      overlay = new BMap.Circle(mPoint, path.radius, style);

      self.pointArray = self.pointArray.concat(path.path);

    } else {//矩形或四边形

      overlay = new BMap.Polygon(path.data, style);

      self.pointArray = self.pointArray.concat(path.data);

    }

    self.overlayObj[id] = {};

    self.overlayObj[id].overlay = overlay;//添加到overlayObj

    map.addOverlay(overlay);

    //创建label,显示围栏名称

    var opts = {position: path.center};

    var label = new BMap.Label(self.tableData[id].fenceName, opts);

    label.setStyle(self.labelStyle);

    label.addEventListener('click', function () {

      var carPath = JSON.parse(self.tableData[id].coordinate);//坐标点

      self.pointArray.length = 0;

      if (type == 2) {//圆

        self.pointArray = carPath.path;

      } else {

        self.pointArray = carPath.data;

      }

      map.setViewport(self.pointArray);    //调整视野

    });

    self.labelObj[id] = {};

    self.labelObj[id].label = label;

    map.addOverlay(label);

  },

  /**

   * 图形显示

   * @param id

   */

  overlayShow: function (id) {

    var self = electronitFence;

    var type = self.tableData[id].coordinateType;//图形类型

    var path = JSON.parse(self.tableData[id].coordinate);//坐标点

    if (self.overlayObj[id]) {//如果overlayObj中有就show

      self.overlayObj[id].overlay.show();

      self.labelObj[id].label.setContent(self.tableData[id].fenceName);

      self.labelObj[id].label.show();

      if (type != 2) {//圆

        self.pointArray = self.pointArray.concat(path.data);

      } else {

        self.pointArray = self.pointArray.concat(path.path);

      }

    } else {//如果overlayObj中无就new一个

      self.newOverlay(id, type);

    }

  },

  /**

   * 图形隐藏

   * @param id

   */

  overlayHide: function (id) {

    electronitFence.overlayObj[id].overlay.hide();

    electronitFence.labelObj[id].label.hide();

  },

/**

   * 显示当前页所有图形

   */

  curPageOverlayAllShow: function () {

    $('.checkItem').each(function () {

      electronitFence.overlayShow(+$(this).val());

    })

  },

  /**

   * 隐藏当前页所有图形

   */

  curPageOverlayAllHide: function () {

    var self = electronitFence;

    $('.checkItem').each(function () {

      var id = +$(this).val();

      if (self.overlayObj[id]) {

        self.overlayHide(id);

      }

    })

  },


 //此处代码省略...

}

$(function () {

  electronitFence.init();

});


总结:可能有人会问为什么不在newOverlay的时候getSouthWest(),getNorthEast(),getCenter()。一开始我也这么做但是根据返回的数据坐标点新建overlay生成的overlay.getBounds()执行报错。目前还不知道原因。。。隐藏overlay,很多人可能都喜欢用map.removeOverlay()的方法直接删掉overlay,下次显示再new。我发现如果overlay很多的时候会new得很慢,如果每次new的时候保存在一个对象里面,直接通过overlay.show(),overlay.hide()显示隐藏会快很多。



  • 2020-04-22 10:49:10

    css按钮特效大全

    打开这个连接,你会发现很多按钮动画脚本,基本这些动画就够大家用的了。

  • 2020-04-27 09:26:49

    transform与transition区别与详解

    对元素进行移动、缩放、转动、拉长或拉伸。 方法:translate(): 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数 有两个div,它们的css样式如下,transition:过渡 元素从一种样式逐渐改变为另一种的效果 有一个div,它的css样式如下:

  • 2020-04-27 11:02:21

    CSS 气泡对话框

    点击上面地址,我们可以看到一个灵活的css气泡,拖动按钮,改变气泡效果。

  • 2020-04-27 16:59:23

    Docker部署nuxtjs

    将一下文件拷贝至服务器目录/app |名称|描述| |-|-| |.nuxt|编译后生成的目录,开发模式和发布模式通用,注意发布前使用npm run build 防止将dev目录发布| |static| 静态资源文件,通过/可直接访问| |package.json|npm 包管理配置文件| |nuxt.config.js|Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置。| |node_modules|依赖模块|