数据处理

src/components/easyMapGL/index.vue

@@ -58,7 +58,7 @@ export default defineComponent({
       const BBOX = [sw.lng, sw.lat, ne.lng, ne.lat]
       return BBOX
     };
-    const addImg = async (name, url, sdf = false) => {
+    const addImg = async (name, url, options = {sdf: false}) => {
       const loadImage = (url) => {
         return new Promise((resolve, reject) => {
           const img = new Image();
@@ -70,7 +70,7 @@ export default defineComponent({
         });
       }
       const img = await loadImage(url);
-      state.map.addImage(name, img, {sdf: sdf});
+      state.map.addImage(name, img, options);
     }
     const addCss = () => {}
     onMounted(() => {

src/views/ship-test/business/v2/index.vue

@@ -125,7 +125,7 @@ export default defineComponent({
     }
     const initMap = () => {
       // 船舶图片
-      props.mapFunc.addImg('ais', AisImg)
+      props.mapFunc.addImg('ais', AisImg, {sdf: true})
       // 船舶source
       props.map.addSource(state.mapIds.current.source.ship, {
         type: 'geojson',
@@ -184,7 +184,7 @@ export default defineComponent({
         state.hoverShip.popup = new mapboxgl.Popup({
           className: 'cus',
           maxWidth: 'none',
-          closeButton: true,
+          closeButton: false,
           closeOnClick: false,
           offset: 15
         }).setLngLat(e.lngLat).setDOMContent(contentElement).addTo(props.map);
@@ -272,9 +272,9 @@ export default defineComponent({
           obj.properties._wsDataFlag = state.shipFilter.config.wsDataFlag
           obj.properties._wsUrl = state.shipFilter.config.wsUrl
           obj.properties._sourceId = state.shipFilter.config.id
-          obj.properties._historyWsUrl = state.shipFilter.config.historyWsUrl
-          obj.properties._historyWsDataFlag = state.shipFilter.config.historyWsDataFlag
-          obj.properties._historyWsOtherParams = JSON.parse(state.shipFilter.config.historyWsOtherParams)
+          obj.properties._historyWsUrl = state.shipFilter.config.historyWsUrl || ''
+          obj.properties._historyWsDataFlag = state.shipFilter.config.historyWsDataFlag || ''
+          obj.properties._historyWsOtherParams = JSON.parse(state.shipFilter.config.historyWsOtherParams || '{}')
           obj.properties._config = state.shipFilter.config
           obj.properties._hover = {
             data: DATA,
@@ -290,15 +290,11 @@ export default defineComponent({
       })
       props.map.setPaintProperty(state.mapIds.current.layer.ship, 'icon-color', state.shipFilter.config.color)
     }
-    const handleShipClick = (DATA) => {
-      console.log(DATA)
+    const handleShipClick = (ship) => {
+      console.log(ship)
       const color = `rgb(${that.$util.randomNum(0, 255)}, ${that.$util.randomNum(0, 255)}, ${that.$util.randomNum(0, 255)})`
-      // const trackLayer: any = new layer.Vector({
-      //   zIndex: 10
-      // })
-      // props.map.addLayer(trackLayer)
-      const trackId = DATA._trackId
-      const rWs = new WebSocket(DATA._wsUrl)
+      const trackId = ship._trackId
+      const rWs = new WebSocket(ship._wsUrl)
       state.trackMap.set(trackId, {
         color: color,
         webSocket: rWs,
@@ -306,177 +302,176 @@ export default defineComponent({
         glLayerIds: [],
         historyData: [],
         realData: [],
-        sourceId: DATA._sourceId,
-        config: DATA._config,
+        sourceId: ship._sourceId,
+        config: ship._config,
         show: true,
         trackTime: '?'
       })
       const updateTrackMapByKey = (key, data) => {
         state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {key: data}))
       }
-      // initWebSocketShip()
-      // if (clickFeat.get('_historyWsUrl')) {
-      //   const hWs = new WebSocket(clickFeat.get('_historyWsUrl'))
-      //   hWs.onopen = (e) => {
-      //     const str = {
-      //       ...clickFeat.get('_historyWsOtherParams'),
-      //       endTime: that.$util.YMDHms(new Date().getTime() + 1000 * 60 * 10),
-      //       shipId: trackId,
-      //       startTime: that.$util.YMDHms(new Date().getTime() - 1000 * 60 * 60 * 4)
-      //     }
-      //     hWs.send(JSON.stringify(str))
-      //   }
-      //   hWs.onmessage = (e) => {
-      //     try {
-      //       const json = JSON.parse(e.data)
-      //       const s = 'json' + clickFeat.get('_historyWsDataFlag')
-      //       const data = eval(s)
-      //       const _historyData = [...state.trackMap.get(trackId).historyData, ...data]
-      //       state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {historyData: _historyData}))
-      //       draw()
-      //     } catch (e) {
-      //     }
-      //   }
-      // }
-      // rWs.onopen = (e) => {
-      //   const str = {
-      //     cql: `${clickFeat.get('_trackKey')} = '${trackId}'`
-      //   }
-      //   rWs.send(JSON.stringify(str))
-      // }
-      // rWs.onmessage = (e) => {
-      //   try {
-      //     const json = JSON.parse(e.data)
-      //     const s = 'json' + clickFeat.get('_wsDataFlag')
-      //     const data = eval(s)
-      //     // 实时船舶
-      //     const DATA = data?.[0]
-      //     const getKeyData = (key) => {
-      //       if (clickFeat.get(key)) {
-      //         return eval(clickFeat.get(key))
-      //       } else {
-      //         return null
-      //       }
-      //     }
-      //     if (DATA) {
-      //       if (state.trackMap.get(trackId).realData.length === 0 || state.trackMap.get(trackId).realData[state.trackMap.get(trackId).realData.length - 1]._trackPointId != getKeyData('trackPointKey')) {
-      //         DATA._trackPointId = getKeyData('trackPointKey')
-      //         state.trackMap.get(trackId).realData.push(DATA)
-      //         if (state.currentTime != state.trackMap.get(trackId).currentTime) {
-      //           draw()
-      //         }
-      //       }
-      //     }
-      //   } catch (e) {
-      //   }
-      // }
-      // const draw = () => {
-      //   const timeArr: any = []
-      //   state.trackMap.get(trackId).currentTime = JSON.parse(JSON.stringify(state.currentTime))
-      //   const features: any = []
-      //   // 轨迹线
-      //   const lineArr: any = []
-      //   state.trackMap.get(trackId).historyData.forEach((DATA, i) => {
-      //     DATA.isHistory = true
-      //     const getKeyData = (key) => {
-      //       if (clickFeat.get(key)) {
-      //         return eval(clickFeat.get(key))
-      //       } else {
-      //         return null
-      //       }
-      //     }
-      //     lineArr.push(getKeyData('historyTrackWktKey'))
-      //     if (i === 0 || i === state.trackMap.get(trackId).historyData.length - 1) {
-      //       timeArr.push(getKeyData('historyTrackTimeKey'))
-      //     }
-      //   })
-      //   state.trackMap.get(trackId).realData.forEach((DATA, i) => {
-      //     DATA.isHistory = false
-      //     const getKeyData = (key) => {
-      //       if (clickFeat.get(key)) {
-      //         return eval(clickFeat.get(key))
-      //       } else {
-      //         return null
-      //       }
-      //     }
-      //     lineArr.push(getKeyData('trackWktKey'))
-      //     if (i === 0 || i === state.trackMap.get(trackId).realData.length - 1) {
-      //       timeArr.push(getKeyData('trackTimeKey'))
-      //     }
-      //   })
-      //   if (lineArr.length > 0) {
-      //     const lineWkt = that.$easyMap.formatPosition.wptTwl(lineArr)
-      //     const feat: any = new format.WKT().readFeature(lineWkt)
-      //     feat.set('trackPointList', [...state.trackMap.get(trackId).historyData, ...state.trackMap.get(trackId).realData])
-      //     feat.set('featureType', 'shipTrack')
-      //     feat.setStyle((f, r) => ShipStyle.trackStyle(f, r, props.map, state.trackMap.get(trackId).color, (s, pointList) => {
-      //       const pointFeatures: any = []
-      //       pointList.forEach(DATA => {
-      //         try {
-      //           const getKeyData = (key) => {
-      //             if (clickFeat.get(key)) {
-      //               return eval(clickFeat.get(key))
-      //             } else {
-      //               return null
-      //             }
-      //           }
-      //           const feat: any = new format.WKT().readFeature(DATA.isHistory ? getKeyData('historyTrackWktKey') : getKeyData('trackWktKey'))
-      //           feat.set('featureType', 'shipPoint')
-      //           feat.set('_hover', {
-      //             data: DATA,
-      //             config: clickFeat.get('_config'),
-      //             isHistory: DATA.isHistory
-      //           })
-      //           feat.setStyle(ShipStyle.trackPointNormalStyle(state.trackMap.get(trackId).color))
-      //           pointFeatures.push(feat)
-      //         } catch (e) {
-      //           console.log(e)
-      //         }
-      //       })
-      //       trackLayer.getSource().addFeatures(pointFeatures)
-      //       return s
-      //     }))
-      //     features.push(feat)
-      //   }
-      //   // 船舶
-      //   if (state.trackMap.get(trackId).realData.length > 0) {
-      //     try {
-      //       const DATA = state.trackMap.get(trackId).realData[state.trackMap.get(trackId).realData.length - 1]
-      //       const getKeyData = (key) => {
-      //         if (clickFeat.get(key)) {
-      //           return eval(clickFeat.get(key))
-      //         } else {
-      //           return null
-      //         }
-      //       }
-      //       const feat: any = new format.WKT().readFeature(getKeyData('trackWktKey'))
-      //       feat.set('featureType', 'ship')
-      //       feat.setId(getKeyData('trackPointKey'))
-      //       feat.set('_hover', {
-      //         data: DATA,
-      //         config: clickFeat.get('_config'),
-      //         isHistory: false
-      //       })
-      //       feat.setStyle(ShipStyle.ShipNormalStyle({
-      //         course: clickFeat.get('_course'),
-      //         speed: clickFeat.get('_speed'),
-      //         head: clickFeat.get('_head'),
-      //         color: state.trackMap.get(trackId).color
-      //       }))
-      //       features.push(feat)
-      //     } catch (e) {
-      //       console.log(e)
-      //     }
-      //   }
-      //   const vectorSource = new source.Vector({
-      //     features: features,
-      //     wrapX: false
-      //   });
-      //   trackLayer.setSource(vectorSource)
-      //   if (timeArr.length > 1) {
-      //     state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {trackTime: that.$util.comTimeByArea(timeArr[0], timeArr[timeArr.length - 1], true)}))
-      //   }
-      // }
+      const getKeyDataByConfig = (DATA, key) => {
+        const conf = JSON.parse(ship._config)
+        if (conf.track[key]) {
+          return eval(conf.track[key])
+        } else {
+          return null
+        }
+      }
+      initWebSocketShip()
+      if (ship._historyWsUrl) {
+        const hWs = new WebSocket(ship._historyWsUrl)
+        hWs.onopen = (e) => {
+          const str = {
+            ...JSON.parse(ship._historyWsOtherParams),
+            endTime: that.$util.YMDHms(new Date().getTime() + 1000 * 60 * 10),
+            shipId: trackId,
+            startTime: that.$util.YMDHms(new Date().getTime() - 1000 * 60 * 60 * 4)
+          }
+          hWs.send(JSON.stringify(str))
+        }
+        hWs.onmessage = (e) => {
+          try {
+            const json = JSON.parse(e.data)
+            const s = 'json' + ship._historyWsDataFlag
+            const data = eval(s)
+            const _historyData = [...state.trackMap.get(trackId).historyData, ...data]
+            state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {historyData: _historyData}))
+            draw()
+          } catch (e) {
+          }
+        }
+      }
+      rWs.onopen = (e) => {
+        const str = {
+          cql: `${ship._trackKey} = '${trackId}'`
+        }
+        rWs.send(JSON.stringify(str))
+      }
+      rWs.onmessage = (e) => {
+        try {
+          const json = JSON.parse(e.data)
+          const s = 'json' + ship._wsDataFlag
+          const data = eval(s)
+          // 实时船舶
+          const DATA = data?.[0]
+          if (DATA) {
+            if (state.trackMap.get(trackId).realData.length === 0 || state.trackMap.get(trackId).realData[state.trackMap.get(trackId).realData.length - 1]._trackPointId != getKeyDataByConfig(DATA, 'trackPointKey')) {
+              DATA._trackPointId = getKeyDataByConfig(DATA, 'trackPointKey')
+              state.trackMap.get(trackId).realData.push(DATA)
+              draw()
+            }
+          }
+        } catch (e) {
+        }
+      }
+      const draw = () => {
+        // console.log(state.trackMap.get(trackId).realData)
+        // const timeArr: any = []
+        // const features: any = []
+        // // 轨迹线
+        // const lineArr: any = []
+        // state.trackMap.get(trackId).historyData.forEach((DATA, i) => {
+        //   DATA.isHistory = true
+        //   const getKeyData = (key) => {
+        //     if (clickFeat.get(key)) {
+        //       return eval(clickFeat.get(key))
+        //     } else {
+        //       return null
+        //     }
+        //   }
+        //   lineArr.push(getKeyData('historyTrackWktKey'))
+        //   if (i === 0 || i === state.trackMap.get(trackId).historyData.length - 1) {
+        //     timeArr.push(getKeyData('historyTrackTimeKey'))
+        //   }
+        // })
+        // state.trackMap.get(trackId).realData.forEach((DATA, i) => {
+        //   DATA.isHistory = false
+        //   const getKeyData = (key) => {
+        //     if (clickFeat.get(key)) {
+        //       return eval(clickFeat.get(key))
+        //     } else {
+        //       return null
+        //     }
+        //   }
+        //   lineArr.push(getKeyData('trackWktKey'))
+        //   if (i === 0 || i === state.trackMap.get(trackId).realData.length - 1) {
+        //     timeArr.push(getKeyData('trackTimeKey'))
+        //   }
+        // })
+        // if (lineArr.length > 0) {
+        //   const lineWkt = that.$easyMap.formatPosition.wptTwl(lineArr)
+        //   const feat: any = new format.WKT().readFeature(lineWkt)
+        //   feat.set('trackPointList', [...state.trackMap.get(trackId).historyData, ...state.trackMap.get(trackId).realData])
+        //   feat.set('featureType', 'shipTrack')
+        //   feat.setStyle((f, r) => ShipStyle.trackStyle(f, r, props.map, state.trackMap.get(trackId).color, (s, pointList) => {
+        //     const pointFeatures: any = []
+        //     pointList.forEach(DATA => {
+        //       try {
+        //         const getKeyData = (key) => {
+        //           if (clickFeat.get(key)) {
+        //             return eval(clickFeat.get(key))
+        //           } else {
+        //             return null
+        //           }
+        //         }
+        //         const feat: any = new format.WKT().readFeature(DATA.isHistory ? getKeyData('historyTrackWktKey') : getKeyData('trackWktKey'))
+        //         feat.set('featureType', 'shipPoint')
+        //         feat.set('_hover', {
+        //           data: DATA,
+        //           config: clickFeat.get('_config'),
+        //           isHistory: DATA.isHistory
+        //         })
+        //         feat.setStyle(ShipStyle.trackPointNormalStyle(state.trackMap.get(trackId).color))
+        //         pointFeatures.push(feat)
+        //       } catch (e) {
+        //         console.log(e)
+        //       }
+        //     })
+        //     trackLayer.getSource().addFeatures(pointFeatures)
+        //     return s
+        //   }))
+        //   features.push(feat)
+        // }
+        // // 船舶
+        // if (state.trackMap.get(trackId).realData.length > 0) {
+        //   try {
+        //     const DATA = state.trackMap.get(trackId).realData[state.trackMap.get(trackId).realData.length - 1]
+        //     const getKeyData = (key) => {
+        //       if (clickFeat.get(key)) {
+        //         return eval(clickFeat.get(key))
+        //       } else {
+        //         return null
+        //       }
+        //     }
+        //     const feat: any = new format.WKT().readFeature(getKeyData('trackWktKey'))
+        //     feat.set('featureType', 'ship')
+        //     feat.setId(getKeyData('trackPointKey'))
+        //     feat.set('_hover', {
+        //       data: DATA,
+        //       config: clickFeat.get('_config'),
+        //       isHistory: false
+        //     })
+        //     feat.setStyle(ShipStyle.ShipNormalStyle({
+        //       course: clickFeat.get('_course'),
+        //       speed: clickFeat.get('_speed'),
+        //       head: clickFeat.get('_head'),
+        //       color: state.trackMap.get(trackId).color
+        //     }))
+        //     features.push(feat)
+        //   } catch (e) {
+        //     console.log(e)
+        //   }
+        // }
+        // const vectorSource = new source.Vector({
+        //   features: features,
+        //   wrapX: false
+        // });
+        // trackLayer.setSource(vectorSource)
+        // if (timeArr.length > 1) {
+        //   state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {trackTime: that.$util.comTimeByArea(timeArr[0], timeArr[timeArr.length - 1], true)}))
+        // }
+      }
     }
     const initStatic = () => {
       state.staticList = []

src/views/ship-test/index.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     const state = reactive({
       map: <any>null,
       mapFunc: <any>null,
-      version: 'v1'
+      version: 'v2'
     })
     const mapLoad = (map, func) => {
       state.map = map