轨迹实现

ruoyi-ui/src/components/AmApN/index.js

@@ -40,9 +40,6 @@ AmApNew.install = function (Vue) {
       if (data.code == 200) {
         instanceA.para=para;
         instanceA.olddata=data.data[1].rowList;
-        instanceA.wldata = [];
-
-
         instanceA.bjdata = [];
         if (para.para1=="gj") {
           instanceA.wldata = data.data[3].rowList;

ruoyi-ui/src/components/AmApN/index.vue

@@ -69,6 +69,7 @@ export default {
             let data = response
             if (data.code == 200) {
               this.olddata = data.data[1].rowList;
+
               this.wldata = [];
               this.bjdata = [];
               if (this.para.para1 == "gj") {
@@ -96,6 +97,9 @@ export default {
       para:{},
       rq:"",
       isopen:false,
+      wlMaker:{},
+      wllabel:{},
+      wlMakers: [],
       gjlx:"qt",
       lineArr: [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],
     }
@@ -230,58 +234,67 @@ export default {
         if (this.gjlx=="gj")
         {
           console.log("wl",this.wldata[0]);
-          let wl1=this.wldata[0][0].replaceAll('"','').trim();
-          let fw=this.wldata[0][1].replaceAll('"','').trim();
-          let wd=this.wldata[0][2].replaceAll('"','').trim();
-          let jd=this.wldata[0][3].replaceAll('"','').trim();
-          let wl2=this.wldata[0][4].replaceAll('"','').trim();
-          let path=this.wldata[0][5].trim();
-
-          if (wl1.length>0 && fw.length>0&& wd.length>0&& jd.length>0)
-          {
-            this.map.add(new AMap.Circle({
-              center: [jd,wd],
-              radius: 1250,
-              fillColor: 'blue',
-              strokeWeight: 5,
-              strokeColor: '#ff0202',
-              strokeStyle: 'dashed',
-              fillOpacity: 0.05,
-              bubble: true
-            }))
-          }
-          if (wl2.length>0 && path.length>10)
+          if (this.wldata[0][0].trim().length>20)
           {
-            let apath=[];
-            let tpath=JSON.parse(path);
-            // alert(path);
-            for (let i = 0; i <tpath.length ; i++) {
-              apath.push([tpath[i].lng,tpath[i].lat])
+            let wlobj=JSON.parse(this.wldata[0][0].trim());
+            if (wlobj)
+            {
+              if (wlobj.dzwlName && wlobj.vlxz)
+              {
+                let wlmc=wlobj.dzwlName;
+                let wllx=wlobj.vlxz;
+                if (wllx=="圆形" && wlobj.longitude && wlobj.latitude && wlobj.fanwei )
+                {
+                  let jd=wlobj.longitude;
+                  let wd=wlobj.latitude;
+                  let fw=wlobj.fanwei;
+                  this.map.add(new AMap.Circle({
+                    center: [jd,wd],
+                    radius: fw,
+                    fillColor: 'blue',
+                    strokeWeight: 5,
+                    strokeColor: '#ff0202',
+                    strokeStyle: 'dashed',
+                    fillOpacity: 0.05,
+                    bubble: true
+                  }))
+                }
+                if (wllx!="圆形" && wlobj.path && wlobj.path.length>3)
+                {
+                  let apath=[];
+                  for (let i = 0; i <wlobj.path.length ; i++) {
+                    apath.push([wlobj.path[i].lng,wlobj.path[i].lat])
+                  }
+                  this.map.add(new AMap.Polygon({
+                    path: apath,
+                    strokeColor: '#ff0202',
+                    fillColor: 'blue',
+                    strokeWeight: 5,
+                    strokeStyle: 'dashed',
+                    fillOpacity: 0.05,
+                    bubble: true
+                  }))
+                }
+              }
             }
-            this.map.add(new AMap.Polygon({
-              path: apath,
-              strokeColor: '#ff0202',
-              fillColor: 'blue',
-              strokeWeight: 5,
-              strokeStyle: 'dashed',
-              fillOpacity: 0.05,
-              bubble: true
-            }))
-          };
+
+          }
 
           console.log("bj",this.bjdata);
           for (let i = 0; i <this.bjdata.length ; i++) {
+            let wldata='';
             if (this.bjdata[i][3]=="进入围栏" || this.bjdata[i][3]=="离开围栏")
             {
-              if (this.bjdata[i][6].split(",").length==3)
+              if (this.bjdata[i][6].split("$").length==4)
               {
                 let t=this.bjdata[i][4];
-                this.bjdata[i][4]=this.bjdata[i][6].split(",")[0];
-                this.bjdata[i][5]=this.bjdata[i][6].split(",")[1];
+                this.bjdata[i][4]=this.bjdata[i][6].split("$")[0];
+                this.bjdata[i][5]=this.bjdata[i][6].split("$")[1];
+                wldata=this.bjdata[i][6].split("$")[3];
                 if (this.bjdata[i][3]=="进入围栏")
-                 this.bjdata[i][6]="进入【"+t+"】防区 "+this.bjdata[i][6].split(",")[2];
+                 this.bjdata[i][6]="进入【"+t+"】防区 "+this.bjdata[i][6].split("$")[2];
                 else
-                  this.bjdata[i][6]="离开【"+t+"】防区 "+this.bjdata[i][6].split(",")[2];
+                  this.bjdata[i][6]="离开【"+t+"】防区 "+this.bjdata[i][6].split("$")[2];
               }
             }
 
@@ -315,7 +328,9 @@ export default {
                 offset: new AMap.Pixel(-23, -26),
                 onclick:this.markerClick,
               });
+
               marker.setExtData({
+                wl:wldata,
                 nr: "类型："+this.bjdata[i][3]+"<br/>时间："+this.bjdata[i][1]+"<br/>地址："+this.bjdata[i][6],
               })
               marker.on('click', this.markerClick);
@@ -331,11 +346,99 @@ export default {
       })
 
     },
+     getCenter(PolygonArr) {
+  let total = PolygonArr.length;
+  let X = 0; let Y = 0; let Z = 0;
+  PolygonArr.forEach((lnglat) => {
+    let lng = lnglat[0] * Math.PI / 180;
+    let lat = lnglat[1] * Math.PI / 180;
+    let x, y, z;
+    x = Math.cos(lat) * Math.cos(lng);
+    y = Math.cos(lat) * Math.sin(lng);
+    z = Math.sin(lat);
+    X += x;
+    Y += y;
+    Z += z;
+  });
+  X = X / total;
+  Y = Y / total;
+  Z = Z / total;
+
+  let Lng = Math.atan2(Y, X);
+  let Hyp = Math.sqrt(X * X + Y * Y);
+  let Lat = Math.atan2(Z, Hyp);
+
+  return [Lng * 180 / Math.PI, Lat * 180 / Math.PI];
+
+},
     markerClick(e) {
+      this.map.remove(this.wlMaker);
+      this.map.remove(this.wllabel);
       const infoWindow = new AMap.InfoWindow({
         offset: new AMap.Pixel(0, -30),
         content: '<div>这是一个信息窗体</div>'
       });
+      if (e.target.getExtData().wl)
+      {
+        let wldata=e.target.getExtData().wl;
+        if (wldata.length>20)
+        {
+          this.map.remove(this.wlMaker);
+          let wlobj=JSON.parse(wldata);
+          if (wlobj)
+          {
+            if (wlobj.dzwlName && wlobj.vlxz)
+            {
+              let wlmc=wlobj.dzwlName;
+              let wllx=wlobj.vlxz;
+              if (wllx=="圆形" && wlobj.longitude && wlobj.latitude && wlobj.fanwei )
+              {
+                let jd=wlobj.longitude;
+                let wd=wlobj.latitude;
+                let fw=wlobj.fanwei;
+                this.wlMaker=new AMap.Circle({
+                  center: [jd,wd],
+                  radius: fw,
+                  fillColor: 'blue',
+                  strokeWeight: 5,
+                  strokeColor: '#021bff',
+                  strokeStyle: 'dashed',
+                  fillOpacity: 0.2,
+                  bubble: true
+                });
+
+                this.map.add(this.wlMaker);
+
+              }
+              if (wllx!="圆形" && wlobj.path && wlobj.path.length>3)
+              {
+                let apath=[];
+                for (let i = 0; i <wlobj.path.length ; i++) {
+                  apath.push([wlobj.path[i].lng,wlobj.path[i].lat])
+                }
+                this.wlMaker=new AMap.Polygon({
+                  path: apath,
+                  strokeColor: '#ff0202',
+                  fillColor: 'blue',
+                  strokeWeight: 5,
+                  strokeStyle: 'dashed',
+                  fillOpacity: 0.2,
+                  bubble: true
+                });
+                var point = this.getCenter(apath);  //获得中心点
+
+                this.map.add(this.wlMaker);
+
+
+              }
+            }
+          }
+
+          //wlMakers: [],
+
+        }
+
+      }
       infoWindow.setContent("<div>"+ e.target.getExtData().nr+"</div>");
       infoWindow.open(this.map, e.target.getPosition());
     },