다운로드 monitor - monitor 소스 코드 다운로드

monitor

기타 카테고리

1.0.0

다운로드

소개

초보자 엔트리 레벨 Java 웹 응용 프로그램은 매우 간단합니다. 얼마나 간단한 지, 당신이 실수로 그것을 읽는다면, 나를 꾸짖지 마십시오.

액자

프론트 엔드에는 프레임 워크가 없으며 가장 간단한 jQuery+Ajax 메소드는 상호 작용하는 데 사용됩니다.
UI 라이브러리는 부트 스트랩을 사용합니다
Java를 사용한 백엔드 서버 개발

지도

공식 웹 사이트 문서 주소가 사용됩니다. 여기를 클릭하십시오

이것은 MySQL 데이터베이스의 장치 위치 쿼리를 보여주는 가져온 Baidu Map API입니다. 이것은 위 그림에서 구현 된 코드입니다. 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);
...

추적을위한 구현 코드의 일부

추적 추적 효과

완전한 장비 마일리지 통계 및 속도 통계

영역

그것은지도에 지역이 그려져 있음을 알고 있으며, 일단 장비가 지정된 영역을 떠나면 알림을받습니다.

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);
    };