monitorダウンロード - monitorソースコードのダウンロード

monitor

その他のカテゴリー

1.0.0

ダウンロード

導入

初心者のエントリーレベルのJava Webアプリケーションは非常に簡単です。それがどれほど簡単かについては、誤ってそれを読んだら、私をoldっないでください。

フレーム

フロントエンドにはフレームワークがなく、最も単純なjQuery+ajaxメソッドが対話するために使用されます
UIライブラリはブートストラップを使用しています
Javaを使用したバックエンドサーバー開発

地図

公式のウェブサイトのドキュメントアドレスが使用されています。ここをクリックしてください

これは、Imported Baidu Map APIで、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);
...

追跡のための実装コードの一部

追跡効果

完全な機器マイレージ統計とスピード違反の統計

エリア

地域が地図上に描かれていることがわかり、機器が指定された領域を離れると通知されます。

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