船动

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

@@ -393,6 +393,7 @@ export default {
             activeName: 'first',
             tabledatas: [],
             deviceTableShow:false,
+            posints:{},
             pointDevice:{
                 name:'',
                 list:[],
@@ -828,6 +829,11 @@ export default {
 
         addpoint: function(addrArry, data, img, type,rotation=0) {
             var lnglat = this.transpoints(addrArry, 0)[0];
+            var lnglats = null;
+
+            if(data["lnglats"]!=undefined){
+             lnglats =  this.transpoints(data["lnglats"], 0);
+            }
 
             let tamarker = new Feature({
                 tadata: {
@@ -837,7 +843,7 @@ export default {
                     type: type
                 }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
 
-                geometry: new Point(lnglat) //这里是点坐标的位置，这里要注意fromLonLat
+                geometry: new Point(lnglats==null?lnglat:lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
             });
             tamarker.setStyle(
                 new Style({
@@ -858,7 +864,62 @@ export default {
                     features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                 })
             });
-            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+
+          this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+            if(data["mmsi"]!=undefined){
+               this.posints["ship_"+data["mmsi"]] = markerta;
+
+            }
+
+
+
+
+           if(lnglats!=null){
+             var that = this;
+             var indexp = 0;
+              function addlayers(indexp){
+
+                var last = that.posints["ship_"+data["mmsi"]];
+
+
+               let tamarker = new Feature({
+                tadata: {
+                    sectionId: "point",
+                    towerNumber: 22,
+                    data: data,
+                    type: type
+                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+
+                geometry: new Point(lnglats==null?lnglat:lnglats[indexp]) //这里是点坐标的位置，这里要注意fromLonLat
+            });
+            tamarker.setStyle(
+                new Style({
+                    image: new Icon({
+                        color: "#eee",
+                        rotation:rotation,
+                        anchor:[0.5,0.5],
+                        rotateWithView:true,
+                        // color:"red",
+                        // size:[60,20],
+                        crossOrigin: "anonymous",
+                        src: require("../../assets/images/icon/" + img) //本地的样式
+                    })
+                })
+            ); //这里是样式
+
+            last.setSource(new SourceVec({
+                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+                }));
+
+            }
+
+
+             setInterval(()=>{  indexp = indexp>=lnglats.length?0:indexp; addlayers(indexp++);},1000);
+
+
+
+           }
+
         }
     }
 };

ruoyi-ui/src/views/components/table/homeTable.vue

@@ -202,10 +202,10 @@ export default {
         {"name": "润扬大桥光谱2", "locations": [[119.369724, 32.204459]]},
       ],
       ship: [
-        {"name": "一号船", "locations": [[118.639711, 31.98602]], 'type': 1,"head":0},
+        {"name": "一号船","mmsi":"s", "locations": [[118.639711, 31.98602]], 'type': 1,"head":0,"lnglats":[[118.649711, 31.98602],[118.639711, 31.98602],[118.629711, 31.98602],[118.619711, 31.98602]]},
         // {"name": "二号船", "locations": [[118.639711, 31.96602]], 'type': 2,"head":60},
-        {"name": "三号船", "locations": [[118.639711, 31.96622]], 'type': 1,"head":90},
-        {"name": "三号船", "locations": [[118.639711, 31.93662]], 'type': 1,"head":180},
+        {"name": "三号船","mmsi":"s1", "locations": [[118.639711, 31.96622]], 'type': 1,"head":90},
+        {"name": "三号船","mmsi":"s2", "locations": [[118.639711, 31.93662]], 'type': 1,"head":180},
         // {"name": "四号船", "locations": [[118.639711, 31.96602]], 'type': 3,"head":180},
         // {"name": "五号船", "locations": [[118.639711, 31.96602]], 'type': 2,"head":270},
         // {"name": "五号船", "locations": [[118.639711, 31.96602]], 'type': 2,"head":360},