悬浮

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

@@ -86,7 +86,9 @@ export default defineComponent({
       },
       currentWS: <any>null,
       trackMap: new Map(),
-      popupHover: <any>null,
+      hoverShip: {
+        popup: <any>null
+      },
       mapIds: {
         current: {
           source: {
@@ -114,6 +116,13 @@ export default defineComponent({
       console.log(state.shipFilter.config)
       refreshMap()
     }
+    const getKeyData = (DATA, key) => {
+      if (state.shipFilter.config.track[key]) {
+        return eval(state.shipFilter.config.track[key])
+      } else {
+        return null
+      }
+    }
     const initMap = () => {
       // 船舶图片
       props.mapFunc.addImg('ais', AisImg)
@@ -143,7 +152,7 @@ export default defineComponent({
             'ais' // 默认样式
           ],
           "symbol-spacing": 1,
-          "icon-rotate": ["get", "__course"]
+          "icon-rotate": ["get", "_course"]
         },
         paint: {
           'icon-color': '#000000',
@@ -160,38 +169,25 @@ export default defineComponent({
         state.shipHoverInfo = {
           data: properties,
           config: state.shipFilter.config,
-          isHistory: true
-        }
-        if (state.popupHover) {
-          state.popupHover.setLngLat(e.lngLat)
-        } else {
-          const p = reactive({
-            that: that,
-            info: state.shipHoverInfo,
-            staticList: state.staticList
-          })
-          const app = createApp(ShipHover, p)
-          // 将 Vue 实例挂载到一个新的 DOM 元素上
-          const vm = app.mount(document.createElement('div'));
-          // 获取包含 Vue 模板的 DOM 元素
-          const contentElement = vm.$el;
-          console.log(ShipHover)
-          console.log(app)
-          console.log(vm)
-          console.log(contentElement)
-          state.popupHover = new mapboxgl.Popup({
-            className: 'cus',
-            maxWidth: 'none',
-            closeButton: false,
-            closeOnClick: true,
-            offset: 15
-          }).setLngLat(e.lngLat)
-          .setDOMContent(contentElement)
-          .addTo(props.map);
-          state.popupHover.on('close', () => {
-            state.popupHover = null
-          })
+          isHistory: false
         }
+        state.hoverShip.popup?.remove()
+        const com = createApp(ShipHover, {
+          that: that,
+          info: state.shipHoverInfo,
+          staticList: state.staticList
+        })
+        // 将 Vue 实例挂载到一个新的 DOM 元素上
+        const vm = com.mount(document.createElement('div'));
+        // 获取包含 Vue 模板的 DOM 元素
+        const contentElement = vm.$el;
+        state.hoverShip.popup = new mapboxgl.Popup({
+          className: 'cus',
+          maxWidth: 'none',
+          closeButton: false,
+          closeOnClick: true,
+          offset: 15
+        }).setLngLat(e.lngLat).setDOMContent(contentElement).addTo(props.map);
       });
       props.map.on('mouseenter', state.mapIds.current.layer.ship, () => {
         props.map.getCanvas().style.cursor = 'pointer';
@@ -199,6 +195,18 @@ export default defineComponent({
       props.map.on('mouseleave', state.mapIds.current.layer.ship, () => {
         props.map.getCanvas().style.cursor = '';
       });
+      props.map.on('click', state.mapIds.current.layer.ship, (e) => {
+        const features = props.map.queryRenderedFeatures(e.point);
+        if (!features.length) {
+          return;
+        }
+        const DATA: any = features[0].properties;
+        console.log(getKeyData(DATA, 'trackKey'))
+        const trackId = getKeyData(DATA, 'trackKey')
+        if (trackId && !state.trackMap.has(trackId)) {
+          handleShipClick(DATA)
+        }
+      });
     }
     const refreshMap = () => {
       if (state.shipFilter.config) {
@@ -246,24 +254,33 @@ export default defineComponent({
     const initShip = (data) => {
       const formatData = (arr) => {
         return arr.map(DATA => {
-          const getKeyData = (key) => {
-            if (state.shipFilter.config.track[key]) {
-              return eval(state.shipFilter.config.track[key])
-            } else {
-              return null
-            }
-          }
           const obj = {
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: that.$easyMap.formatPosition.wptTcpt(getKeyData('trackWktKey'))
+              coordinates: that.$easyMap.formatPosition.wptTcpt(getKeyData(DATA, 'trackWktKey'))
             },
-            properties: DATA
+            properties: JSON.parse(JSON.stringify(DATA))
           }
           obj.properties.isHistory = false
-          obj.properties.__course = getKeyData('trackCourseKey')
-          obj.properties.config = JSON.parse(JSON.stringify(state.shipFilter.config))
+          obj.properties.ID = getKeyData(DATA, 'trackPointKey')
+          obj.properties._trackId = getKeyData(DATA, 'trackKey')
+          obj.properties._trackKey = state.shipFilter.config.track.trackKey.split('DATA.')[1]
+          obj.properties._course = getKeyData(DATA, 'trackCourseKey')
+          obj.properties._speed = getKeyData(DATA, 'trackSpeedKey')
+          obj.properties._head = getKeyData(DATA, 'trackDeadKey')
+          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._config = state.shipFilter.config
+          obj.properties._hover = {
+            data: DATA,
+            config: state.shipFilter.config,
+            isHistory: false
+          }
           return obj
         })
       }
@@ -273,7 +290,194 @@ export default defineComponent({
       })
       props.map.setPaintProperty(state.mapIds.current.layer.ship, 'icon-color', state.shipFilter.config.color)
     }
-
+    const handleShipClick = (DATA) => {
+      console.log(DATA)
+      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)
+      state.trackMap.set(trackId, {
+        color: color,
+        webSocket: rWs,
+        glSourceIds: [],
+        glLayerIds: [],
+        historyData: [],
+        realData: [],
+        sourceId: DATA._sourceId,
+        config: DATA._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 initStatic = () => {
       state.staticList = []
       that.$api.shipTestStaticList().then(res => {

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

@@ -90,6 +90,9 @@ export default defineComponent({
       }
       return arr
     })
+    watch(() => props.info, () => {
+      console.log(123)
+    })
     onMounted(() => {
       // eval注册函数动态方法，不调用一下的话打包不包含
       DISTANCE(null, null)

src/views/ship-test/index.vue

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