百度地图调用电子围栏API实现案例

最基础的围栏展示效果： 以下所有参考学习，也可以先看看百度API了解。

具体代码实现如下：

1.以下是用百度地图 索要引用的 js

2. 围栏新增代码案例可简单看一下：

//百度地图API功能
var map = new BMap.Map('allmap');
map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
map.clearOverlays();    //清除地图上所有覆盖物

var overlays = [];
var overlaycomplete = function(e){
    overlays.push(e.overlay);
};
var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 1,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.3,       //边线透明度，取值范围0 - 1。
    fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
};
// 实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(100, 10), //偏离值
    },
    circleOptions: styleOptions, //圆的样式
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions //矩形的样式
    
});  
 //添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
function clearAll() {
   for(var i = 0; i < overlays.length; i++){
        map.removeOverlay(overlays[i]);
    }
    overlays.length = 0;
   map.clearOverlays();
          this.drawingManager.close();
          this.drawingManager._map.enableDoubleClickZoom();
}

var mypoints = "";
var tempoint = [];
var result= "";
  var allOverlay = map.getOverlays();
    for (var i = 0; i < allOverlay.length ; i++) {
        if (allOverlay[i].toString() == "[object Polygon]") {// 矩形
            for (var num = 0; num < allOverlay[i].getPath().length; num++) {
                if (num != allOverlay[i].getPath().length - 1) {
                    tempoint += allOverlay[i].getPath()[num].lng + "," + allOverlay[i].getPath()[num].lat + ";";
                }else {
                    tempoint += + allOverlay[i].getPath()[num].lng + "," + allOverlay[i].getPath()[num].lat;
                }
            }
           mypoints = tempoint;
           document.getElementById('POINT').value = mypoints;// 分别拿到值 放到point Value中
        } else  if (allOverlay[i].toString() == "[object Circle]") {// 圆形
            result += allOverlay[i].getCenter().lng + "," + allOverlay[i].getCenter().lat + ";"; 
            result += allOverlay[i].getRadius();  
           document.getElementById('POINT').value = result;
        }
    }

  3.以下是围栏的展示所有围栏的 运行代码，每个人数据库设置的不一样 代码也会不同，这是个参考，如果和我的一样可直接拿去用

// 查询当前所有围栏信息
$.ajax({
   url : '<%=basePath%>enclosure/queryEnclosure.do',
   type : "POST",
   data : "",
   success : function(data) {
      if (data.flag == true){
         if(data.data != ""){
            for(var i = 0; i < data.data.length;i++){
               var point = data.data[i].POINT; // 点位
               var shape = data.data[i].SHAPE; // 形状
               if(shape=="1"){ // 圆形
                  var pot = [];
                  pot = point.split(";");// 圆半径点通过分号分割
                  pot1=pot[0].split(",");
                  map.centerAndZoom(new BMap.Point(pot1[0],pot1[1]), 12); // 分割后的坐标作为起始坐标
                  var circle = new BMap.Circle(new BMap.Point(pot1[0],pot1[1]),pot[1],{fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
                    map.addOverlay(circle);
               } else if(shape == "2" || shape == "3"){ // 矩形 , 多边形
                  var str = [];
                  var arrPois = [];
                  var polyLine ="";
                  str = point.split(";");// 坐标点通过分号分割
                  for (var j=0;j<str.length;j++) // 循环数组
                  {  
                     map.centerAndZoom(new BMap.Point(str[j].split(",")[0],str[j].split(",")[1]), 12); // 分割后的坐标作为起始坐标
                     arrPois.push(new BMap.Point(str[j].split(",")[0],str[j].split(",")[1]));// 循环数组中每一组的坐标
                  }
                   polyLine = new BMap.Polygon(arrPois, {strokeColor:"red",fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});// 展示围栏
                     map.addOverlay(polyLine); 
               }
            }
         }else {
            bootbox.alert("没有相关信息", function () {});                  
         }
      } else {
         bootbox.alert("没有查询结果或无权查看", function () {});
      }
   }
});