monitor
1.0.0
Aplikasi web Java entry-level pemula sangat sederhana. Adapun betapa sederhananya, jika Anda secara tidak sengaja membacanya, tolong jangan memarahi saya.
Front-end tidak memiliki kerangka kerja, dan metode jQuery+AJAX paling sederhana digunakan untuk berinteraksi
Pustaka UI menggunakan bootstrap
Pengembangan server backend menggunakan java
Alamat dokumen situs web resmi digunakan: Klik di sini
Ini adalah API peta Baidu yang diimpor, yang menunjukkan permintaan lokasi perangkat dari database MySQL. Ini adalah kode yang diterapkan pada gambar di atas. Setelah versi resmi URL dikembangkan, itu secara langsung diubah menjadi domain silang untuk terus mendapatkan peralatan yang diproses dan data lintang dan bujur dari host lain.
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();
}
};
}();
Mengimplementasikan fungsi pelacakan dan pemutaran perangkat
...
//连接所有点
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);
...
Bagian dari kode implementasi untuk pelacakan
Lacak efek pelacakan
Dan statistik jarak tempuh peralatan lengkap dan statistik ngebut
Ia menyadari bahwa suatu daerah ditarik di peta, dan begitu peralatan meninggalkan area yang ditentukan, itu akan diberitahu.
Fungsi Manajemen Area Diimplementasikan Menggunakan Fungsi Geometris Yang Disediakan oleh 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);
};
Manajemen Pengguna dan Manajemen Perangkat Dua modul paling dasar telah mencapai penambahan lengkap, penghapusan, modifikasi dan inspeksi, dan delapan fungsi sistem panduan digunakan.
Mulai dari awal, dari depan ke belakang, tidak mudah untuk menulis, tetapi saya telah menulis sepanjang jalan. Sekarang ketika saya kembali untuk melihat kode yang saya tulis pada waktu itu, saya benar -benar tidak tahan melihatnya untuk waktu yang lama dan memasang proyek ini. Ada banyak masalah. Saya telah merangkumnya:
