monitor
1.0.0
Una aplicación Java de nivel de entrada novato es muy simple. En cuanto a lo simple que es, si lo lees accidentalmente, no me regañen.
El front-end no tiene marco, y el método jQuery+AJAX más simple se usa para interactuar
La biblioteca de la interfaz de usuario usa bootstrap
Desarrollo del servidor de backend usando Java
Se utiliza la dirección oficial del documento del sitio web: haga clic aquí
Esta es la API de mapa de Baidu importada, que muestra la consulta de ubicación del dispositivo desde la base de datos MySQL. Este es el código implementado en la figura anterior. Después de que se desarrolló la versión oficial de la URL, se cambió directamente al dominio cruzado para obtener continuamente equipos procesados y datos de latitud y longitud de otro 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();
}
};
}();
Implementó la función de seguimiento y reproducción de dispositivos
...
//连接所有点
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);
...
Parte del código de implementación para el seguimiento
Efecto de seguimiento de pistas
Y estadísticas completas de kilometraje de equipos y estadísticas de exceso de velocidad
Se da cuenta de que se dibuja una región en el mapa, y una vez que el equipo sale del área especificada, se le notificará.
Funciones de gestión del área implementadas utilizando funciones geométricas proporcionadas por la API de mapas de Baidu
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);
};
Administración de usuarios y administración de dispositivos Dos módulos más básicos han logrado adición completa, eliminación, modificación e inspección, y las ocho funciones del sistema de guía se utilizan.
A partir de cero, de adelante hacia atrás, no es fácil de escribir, pero he escrito todo el camino. Ahora, cuando vuelvo a ver el código que escribí en ese momento, realmente no puedo soportar mirarlo durante mucho tiempo y poner este proyecto. Hay muchos problemas. Lo he resumido:
