monitor
1.0.0
Eine Java-Webanwendung für Anfänger ist sehr einfach. Wenn Sie es versehentlich gelesen haben, schimpfen Sie mich nicht, wenn Sie es versehentlich lesen.
Das Front-End hat kein Framework, und die einfachste JQuery+Ajax-Methode wird zur Interaktion verwendet
Die UI -Bibliothek verwendet Bootstrap
Backend Server -Entwicklung mit Java
Die offizielle Website -Dokumentadresse wird verwendet: Klicken Sie hier
Dies ist die importierte Baidu -Karten -API, die die Abfrage des Gerätestandorts aus der MySQL -Datenbank anzeigt. Dies ist der in der obige Abbildung implementierte Code. Nachdem die offizielle Version der URL entwickelt worden war, wurde sie direkt in die Cross-Domäne geändert, um protinuierliche verarbeitete Geräte sowie Breiten- und Längengraddaten von einem anderen Host zu erhalten.
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();
}
};
}();
Implementierte die Geräteverfolgung und die Wiedergabefunktion
...
//连接所有点
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);
...
Teil des Implementierungscode für die Verfolgung
Track -Tracking -Effekt
Und vollständige Ausrüstungskilometerstatistiken und Geschwindigkeitsstatistiken
Es wird erkannt, dass eine Region auf der Karte gezogen wird und die Ausrüstung den angegebenen Bereich verlässt, wird sie benachrichtigt.
Bereichsmanagementfunktionen, die mithilfe geometrischer Funktionen von Baidu MAP API implementiert sind
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);
};
Benutzerverwaltung und Geräteverwaltung Zwei grundlegendste Module haben eine vollständige Ergänzung, Löschung, Änderung und Inspektion erreicht, und die acht Funktionen des Handbuchsystems werden verwendet.
Von vorne von vorne nach hinten anfangen, ist es nicht einfach zu schreiben, aber ich habe den ganzen Weg geschrieben. Wenn ich jetzt zurück gehe, um den Code zu sehen, den ich damals geschrieben habe, kann ich es wirklich nicht ertragen, ihn lange zu betrachten und dieses Projekt zu verbessern. Es gibt viele Probleme. Ich habe es zusammengefasst:
