monitor
1.0.0
A novice entry-level java web application is very simple. As for how simple it is, if you accidentally read it, please don't scold me.
The front-end has no framework, and the simplest Jquery+ajax method is used to interact
The UI library uses Bootstrap
Backend server development using Java
The official website document address is used: click here
This is the imported Baidu Map API, which shows the device location query from the mysql database. This is the code implemented in the above figure. After the official version of the URL was developed, it was directly changed to cross-domain to continuously obtain processed equipment and latitude and longitude data from another host.
jQuery(document).ready(function() {
Map.init();
});
var map;
var point=new Array();//存放标注点经纬度信息的数组
var marker=new Array();//存放标注点对象的数组
var info=new Array();//存放提示信息窗对象的数组
var Map=function(){
var initMap=function(){
// 百度地图API功能
map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.001404, 30.55915), 5); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
};
var addMarker=function(){ //添加标注
var url=""; //这里的url部分要添加数据源，可以直接改为get方式去获取后台servlet传过来的数据
$.getJSON(url,function(data){
//alert(data);
//alert(JSON.stringify(data));
var json=data;
var list=json.aaData;
for(var i=0;i<list.length;i++){
var ID=list[i].device_id;
var L0=list[i].longitude;
var L1=list[i].latitude;
//var popcontent=list[i].device_content;
point[i]=new BMap.Point(L0,L1);
marker[i]=new BMap.Marker(point[i]);
map.addOverlay(marker[i]);
info[i]=new window.BMap.InfoWindow("<div>设备ID:"+ID+"<br>经度:"+L0+"<br>纬度:"+L1+"<br><a href="device.jsp">more information</a></div>");
addPopup(i);
}
});
};
var addPopup=function(i){
marker[i].addEventListener("click",function(){
this.openInfoWindow(info[i]);
});
};
return{
init: function(){
initMap();
addMarker();
//addLine();
}
};
}();
Implemented the device tracking and playback function
...
//连接所有点
map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
//显示小车子
label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
car = new BMap.Marker(points[0]);
car.setLabel(label);
map.addOverlay(car);
...
Part of the implementation code for tracking
Track tracking effect
And complete equipment mileage statistics and speeding statistics
It realizes that a region is drawn on the map, and once the equipment leaves the specified area, it will be notified.
Area management functions implemented using geometric functions provided by Baidu Map API
var showRecord = function (json) {
alert("[showRecord]"+JSON.stringify(json));
console.log(JSON.stringify(json));
json.points=json.points.replace("POINTS","");
json.points=json.points.replace("POINT","");
json.points=json.points.replace("LINESTRING","");
json.points=json.points.replace("POLYGON","");
json.points=json.points.replace("((","");
json.points=json.points.replace("))","");
json.points=json.points.replace("(","");
json.points=json.points.replace(")","");
//alert(json.points);
//alert(json.layer_id);
var polygonData=json.points;
//alert(polygonData);
var removeArea = function(e,ee,marker){
map.removeOverlay(polygon);
var url = "deleteareaServletAction?layer_id=" + json.layer_id;
$.post(url, function (data) {
if (data.result_code == 0) {
alert("删除成功");
}
});
}
index=0;
{
var pointListx = [];
var pointListy = [];
polygonPoints = polygonData.split(",");
var i=0;
for(inner_index in polygonPoints){
singlePoint = polygonPoints[inner_index].split(" ");
pointX = singlePoint[0];
pointY = singlePoint[1];
//alert(pointX+" "+pointY);
pointListx[i] = Number(pointX);
pointListy[i] = Number(pointY);
point[i] = new BMap.Point(pointListx[i], pointListy[i]);
i++;
}
}
var polygon = new BMap.Polygon(point, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeArea.bind(polygon)));
map.addOverlay(polygon);
polygon.addContextMenu(markerMenu);
};
User management and device management two most basic modules have achieved complete addition, deletion, modification and inspection, and the eight functions of the guide system are used.
Starting from scratch, from front to back, it is not easy to write, but I have written all the way. Now when I go back to see the code I wrote at that time, I really can't bear to look at it for a long time and put this project up. There are many problems. I have summarized it:
