monitor
1.0.0
Une application Web Java d'entrée de gamme novice est très simple. Quant à la simplicité, si vous le lisez accidentellement, ne me grondez pas.
Le front-end n'a pas de cadre, et la méthode JQuery + Ajax la plus simple est utilisée pour interagir
La bibliothèque d'interface utilisateur utilise Bootstrap
Développement du serveur backend à l'aide de Java
L'adresse officielle du document du site Web est utilisée: cliquez ici
Il s'agit de l'API Baidu Map importée, qui montre la requête d'emplacement de l'appareil de la base de données MySQL. Il s'agit du code implémenté dans la figure ci-dessus. Une fois la version officielle de l'URL développée, il a été directement transformé en domaine croisé pour obtenir en continu l'équipement traité et les données de latitude et de longitude d'un autre hôte.
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();
}
};
}();
Implémenté la fonction de suivi et de lecture de l'appareil
...
//连接所有点
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);
...
Partie du code d'implémentation pour le suivi
Effet de suivi de la piste
Et les statistiques complètes du kilométrage de l'équipement et les statistiques de vitesse
Il se rend compte qu'une région est dessinée sur la carte, et une fois que l'équipement quitte la zone spécifiée, il sera informé.
Fonctions de gestion de la zone implémentées à l'aide de fonctions géométriques fournies par l'API Baidu Map
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);
};
Gestion des utilisateurs et gestion des appareils Deux modules les plus élémentaires ont atteint l'addition, la suppression, la modification et l'inspection complètes, et les huit fonctions du système de guidage sont utilisées.
À partir de zéro, de l'avant en dos, il n'est pas facile d'écrire, mais j'ai écrit tout le long. Maintenant, quand je reviens voir le code que j'ai écrit à ce moment-là, je ne peux vraiment pas supporter de le regarder pendant longtemps et de mettre ce projet. Il y a beaucoup de problèmes. Je l'ai résumé:
