最基础的围栏展示效果: 以下所有参考学习,也可以先看看百度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 () {});
}
}
});