monitor
1.0.0
Веб-приложение для Java начального уровня очень просто. Что касается того, насколько это просто, если вы случайно это прочитали, пожалуйста, не ругайте меня.
Фронт-энд не имеет рамки, а самый простой метод jQuery+Ajax используется для взаимодействия
Библиотека пользовательского интерфейса использует начальную загрузку
Разработка сервера бэкэнд с использованием Java
Официальный адрес документа на веб -сайте используется: Нажмите здесь
Это импортированный API MAP Baidu, который показывает запрос местоположения устройства из базы данных MySQL. Это код, реализованный на приведенном выше рисунке. После того, как официальная версия URL была разработана, она была непосредственно изменена на междомен, чтобы непрерывно получить обработанное оборудование и широту и долготу от другого хоста.
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();
}
};
}();
Реализовано функцию отслеживания и воспроизведения устройства
...
//连接所有点
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);
...
Часть кода реализации для отслеживания
Эффект отслеживания отслеживания
И полная статистика пробега оборудования и статистика ускорения
Он понимает, что на карте нарисована область, и как только оборудование покинет указанную область, она будет уведомлена.
Функции управления областями реализованы с использованием геометрических функций, предоставленных API 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);
};
Управление пользователями и управление устройствами Два основных модуля достигли полного добавления, удаления, модификации и проверки, и используются восемь функций руководящей системы.
Начиная с нуля, спереди к спине, это нелегко написать, но я написал все возможное. Теперь, когда я возвращаюсь, чтобы увидеть код, который я написал в то время, я действительно не могу смотреть на него в течение долгого времени и разместить этот проект. Есть много проблем. Я суммировал это:
