monitor
1.0.0
แอปพลิเคชันเว็บ Java ระดับเริ่มต้นเป็นมือใหม่นั้นง่ายมาก ถ้าคุณอ่านมันโดยไม่ตั้งใจโปรดอย่าดุฉัน
ส่วนหน้าไม่มีเฟรมเวิร์กและวิธี jQuery+Ajax ที่ง่ายที่สุดใช้ในการโต้ตอบ
ห้องสมุด UI ใช้ bootstrap
การพัฒนาเซิร์ฟเวอร์แบ็กเอนด์โดยใช้ Java
ใช้ที่อยู่เอกสารเว็บไซต์อย่างเป็นทางการ: คลิกที่นี่
นี่คือ API แผนที่ Baidu ที่นำเข้าซึ่งแสดงการสืบค้นตำแหน่งอุปกรณ์จากฐานข้อมูล MySQL นี่คือรหัสที่ใช้ในรูปด้านบน หลังจากพัฒนา URL เวอร์ชันอย่างเป็นทางการแล้วมันก็ถูกเปลี่ยนเป็น cross-domain โดยตรงเพื่อรับอุปกรณ์ประมวลผลและข้อมูลละติจูดและลองจิจูดจากโฮสต์อื่นอย่างต่อเนื่อง
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);
...
ส่วนหนึ่งของรหัสการใช้งานสำหรับการติดตาม
เอฟเฟกต์ติดตามติดตาม
และสถิติระยะทางของอุปกรณ์ที่สมบูรณ์และสถิติการเร่งความเร็ว
มันตระหนักดีว่าภูมิภาคถูกวาดบนแผนที่และเมื่ออุปกรณ์ออกจากพื้นที่ที่กำหนดก็จะได้รับแจ้ง
ฟังก์ชั่นการจัดการพื้นที่ใช้งานโดยใช้ฟังก์ชั่นทางเรขาคณิตที่จัดทำโดย 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);
};
การจัดการผู้ใช้และการจัดการอุปกรณ์สองโมดูลพื้นฐานที่สุดได้รับการเพิ่มการลบการดัดแปลงและการตรวจสอบอย่างสมบูรณ์และใช้ฟังก์ชั่นทั้งแปดของระบบคู่มือ
เริ่มต้นจากศูนย์จากด้านหน้าไปด้านหลังมันไม่ใช่เรื่องง่ายที่จะเขียน แต่ฉันได้เขียนไปตลอดทาง ตอนนี้เมื่อฉันกลับไปดูรหัสที่ฉันเขียนในเวลานั้นฉันทนไม่ได้ที่จะดูเป็นเวลานานและวางโครงการนี้ มีปัญหามากมาย ฉันได้สรุปแล้ว:
