船舶轨迹

src/components/easyMap/component/tools-dialog.vue

@@ -24,8 +24,8 @@
           </div>
           <div class="buttons">
             <slot name="buttons"/>
-            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: notExpend}" @click="notExpend = !notExpend" name="arrow_4" color="#ffffff" size="18"/>
-            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_2" color="#ffffff" size="14"/>
+            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: notExpend}" @click="notExpend = !notExpend" name="arrow_4" color="#ffffff" size="16"/>
+            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_3" color="#ffffff" size="14"/>
           </div>
         </div>
       </div>
@@ -157,7 +157,7 @@
         display: flex;
         align-items: center;
         .expend-button {
-          margin-right: 15px;
+          margin-right: 8px;
           transition: all .2s;
           &.active {
             transform: rotate(180deg) !important;

src/components/easyMap/component/tools/tools-location.vue

@@ -125,6 +125,8 @@ export default defineComponent({
   props: {
     show: {required: true},
     mapFuncToLocation: {required: true},
+    mapHeight: {},
+    mapWidth: {},
   },
   setup(props, { emit }) {
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
@@ -156,8 +158,8 @@ export default defineComponent({
       },
       toolsLayout: {
         width: 400,
-        left: 40,
-        top: 6
+        left: props.mapWidth - 443,
+        top: props.mapHeight - 300,
       }
     });
     const toPosition = () => {
@@ -183,8 +185,6 @@ export default defineComponent({
         })
       }
     })
-    onMounted(() => {
-    })
     return {
       ...toRefs(state),
       toPosition,

src/components/easyMap/index.vue

@@ -8,130 +8,9 @@
       @olMapLoad="(map) => handleOlMapLoad(map)"
       :layout="layout"
     />
-    <template v-if="drawEditsConfig.show">
-      <div class="draw-edits-config">
-        <div class="draw-edits-config_feature-type">
-          <el-select v-model="drawEditsConfig.featureType" @change="drawEditsSwitchFeatureType">
-            <el-option label="点" value="Point" :disabled="!drawEditsConfig.isPoint"/>
-            <el-option label="线" value="LineString" :disabled="!drawEditsConfig.isLineString"/>
-            <el-option label="面" value="Polygon" :disabled="!drawEditsConfig.isPolygon"/>
-          </el-select>
-        </div>
-        <div class="draw-edits-config_position __hover">
-          <el-popover
-              width="500px"
-              placement="top"
-              title="经纬度"
-              trigger="click"
-              v-model:visible="drawEditsConfig.showPosition"
-          >
-            <div class="popover">
-              <CusForm ref="ref_drawEditsForm" labelWidth="0">
-                <CusFormColumn
-                    ref="ref_drawEditsWkt"
-                    required
-                    :span="24"
-                    type="textarea"
-                    :rows="4"
-                    v-model:param="drawEditsConfig.wkt"
-                    :placeholder="drawEditsWktPlaceholderCpt"
-                    :rules="[
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'Point' || (drawEditsConfig.featureType === 'Point' && $easyMap.validWkt.Point(val)),
-                        message: '点位WKT坐标格式错误'
-                      },
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'LineString' || (drawEditsConfig.featureType === 'LineString' && $easyMap.validWkt.LineString(val)),
-                        message: '线段WKT坐标格式错误'
-                      },
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'Polygon' || (drawEditsConfig.featureType === 'Polygon' && $easyMap.validWkt.Polygon(val)),
-                        message: '区域WKT坐标格式错误'
-                      },
-                      {
-                        handle: (val) => drawEditsConfig.featureType !== 'Polygon' || (drawEditsConfig.featureType === 'Polygon' && $easyMap.validWkt.PolygonKinks(val)),
-                        message: '区域坐标不可自相交'
-                      },
-                    ]"
-                />
-              </CusForm>
-
-<!--              <el-input-->
-<!--                  v-model="drawEditsConfig.wkt"-->
-<!--                  type="textarea"-->
-<!--                  :rows="4"-->
-<!--                  placeholder="请输入经纬度"-->
-<!--              ></el-input>-->
-              <div class="footer">
-                <el-button size="small" type="primary" @click="changeWkt">保存</el-button>
-                <el-button size="small" @click="drawEditsConfig.showPosition = false">取消</el-button>
-              </div>
-            </div>
-            <template #reference>
-              <div class="reference">
-                <img src="./images/draw-edits-position.png" alt />
-                <span>经纬度</span>
-              </div>
-            </template>
-          </el-popover>
-        </div>
-        <template v-if="drawEditsConfig.featureType === 'Point'">
-          <div class="draw-edits-config_icon">
-            <img v-if="drawEditsConfig.pointIcon" class="icon" :src="drawEditsConfig.pointIcon"/>
-            <div class="text"><CusEllipsis :value="drawEditsConfig.text || '点位'"/></div>
-          </div>
-        </template>
-        <template v-if="drawEditsConfig.featureType === 'LineString'">
-          <div class="draw-edits-config_split"/>
-          <div class="draw-edits-config_line">
-            <div class="text">线段</div>
-            <el-input-number
-                class="width"
-                v-model="drawEditsConfig.lineWidth"
-                :min="1"
-                :max="100"
-                controls-position="right"
-                step-strictly
-                @change="drawEditsConfig.refreshStyleFunc()"
-            />
-            <el-color-picker v-model="drawEditsConfig.lineColor" show-alpha @change="drawEditsConfig.refreshStyleFunc()"/>
-            <el-select class="type" v-model="drawEditsConfig.lineType" @change="drawEditsConfig.refreshStyleFunc()">
-              <el-option label="—————" :value="0"/>
-              <el-option label="— — — —" :value="1"/>
-              <el-option label="- - - - - -  - -" :value="2"/>
-            </el-select>
-          </div>
-        </template>
-        <template v-if="drawEditsConfig.featureType === 'Polygon'">
-          <div class="draw-edits-config_split"/>
-          <div class="draw-edits-config_line">
-            <div class="text">边框</div>
-            <el-input-number
-                class="width"
-                v-model="drawEditsConfig.polyBorderWidth"
-                :min="1"
-                :max="100"
-                controls-position="right"
-                step-strictly
-                @change="drawEditsConfig.refreshStyleFunc()"
-            />
-            <el-color-picker v-model="drawEditsConfig.polyBorderColor" show-alpha @change="drawEditsConfig.refreshStyleFunc()"/>
-            <el-select class="type" v-model="drawEditsConfig.polyBorderType" @change="drawEditsConfig.refreshStyleFunc()">
-              <el-option label="—————" :value="0"/>
-              <el-option label="— — — —" :value="1"/>
-              <el-option label="- - - - - -  - -" :value="2"/>
-            </el-select>
-          </div>
-          <div class="draw-edits-config_split"/>
-          <div class="draw-edits-config_poly">
-            <div class="text">填充</div>
-            <el-color-picker v-model="drawEditsConfig.polyColor" show-alpha @change="drawEditsConfig.refreshStyleFunc()"/>
-          </div>
-        </template>
-      </div>
-    </template>
     <template v-if="layout === 'info'">
       <div class="easy-map_layout-info">
+        <slot name="info"/>
         <div class="measure">
           <el-popover
             placement="right"
@@ -380,7 +259,13 @@
         </div>
       </div>
     </template>
-    <ToolsLocationCom v-model:show="toolsShow.location" :mapFuncToLocation="toLocation"/>
+    <ToolsLocationCom
+        v-if="mapHeight"
+        v-model:show="toolsShow.location"
+        :mapFuncToLocation="toLocation"
+        :mapHeight="mapHeight"
+        :mapWidth="mapWidth"
+    />
     <FormDrawCom
       ref="ref_formDrawCom"
       v-model:show="toolsShow.formDraw"
@@ -416,7 +301,6 @@ import DrawFunc, {DrawClear} from "./func/draw";
 import LocationFunc from "./func/location";
 import ToolsLocationCom from './component/tools/tools-location.vue'
 import FormDrawCom from './component/form-draw/index.vue'
-import * as BaseDraw from './func/base-draw'
 import {ElMessage, ElMessageBox} from "element-plus";
 import './func/dom.scss'
 
@@ -442,7 +326,6 @@ export default defineComponent({
         location: false,
         formDraw: false,
       },
-      drawEditsConfig: BaseDraw.getBaseDrawConfig(),
       paramsLis: {
         isFullScreen: false,
         resizeNum: 1,
@@ -499,9 +382,6 @@ export default defineComponent({
           switchLayer: ref_olMap.value.switchBaseLayer,
           judgeActive: judgeBaseLayerActive,
         },
-        drawViews,
-        drawEdits,
-        drawExit,
         zoom: ref_olMap.value.mapBasicInfo.zoom,
         mouse: ref_olMap.value.mapBasicInfo.mouse,
         formDrawEdit,
@@ -557,72 +437,6 @@ export default defineComponent({
         zoom,
       });
     };
-    const drawViews = (arr: any) => {
-      BaseDraw.drawViews(easyMap.value, arr)
-    }
-    const drawEdits = (obj: any, emitFunc, com) => {
-      for (const [k, v] of Object.entries(obj)) {
-        if (v === null || v === undefined || (typeof v === 'string' && v.trim() === '') || (typeof v === 'object' && v?.length === 0)) {
-          delete obj[k]
-        }
-      }
-      state.drawEditsConfig = Object.assign(BaseDraw.getBaseDrawConfig(), obj, {
-        emitFunc
-      })
-      setTimeout(() => {
-        state.drawEditsConfig.show = true
-        if (state.drawEditsConfig.featureType === 'Point') {
-          state.drawEditsConfig.isPoint = true
-        } else if (state.drawEditsConfig.featureType === 'LineString') {
-          state.drawEditsConfig.isLineString = true
-        } else if (state.drawEditsConfig.featureType === 'Polygon') {
-          state.drawEditsConfig.isPolygon = true
-        }
-        BaseDraw.drawEdits(easyMap.value, state.drawEditsConfig, (wkt) => {
-          state.drawEditsConfig.wkt = wkt
-          emitFunc(state.drawEditsConfig)
-        }).then((func: any) => {
-          state.drawEditsConfig.refreshStyleFunc = () => {
-            func()
-            emitFunc(state.drawEditsConfig)
-          }
-          emitFunc(state.drawEditsConfig)
-        })
-      })
-    }
-    const drawExit = () => {
-      state.drawEditsConfig.show = false
-      BaseDraw.drawExit(easyMap.value)
-    }
-    const drawEditsSwitchFeatureType = (val) => {
-      state.drawEditsConfig.wkt = null
-      state.drawEditsConfig.featureType = val
-      drawEdits(state.drawEditsConfig, state.drawEditsConfig.emitFunc)
-    }
-    const ref_drawEditsForm = ref();
-    const changeWkt = () => {
-      //  缺少wkt格式校验
-      ref_drawEditsForm.value.submit().then(() => {
-        drawEdits(state.drawEditsConfig, state.drawEditsConfig.emitFunc)
-      }).catch((e) => {
-        ElMessage({
-          message: e[0].message,
-          grouping: true,
-          type: 'warning',
-        })
-      })
-    }
-    const drawEditsWktPlaceholderCpt = computed(() => {
-      let str = ''
-      if (state.drawEditsConfig.featureType === 'Point') {
-        str = '请输入点位WKT格式坐标，例：POINT(109.1 20.5)'
-      } else if (state.drawEditsConfig.featureType === 'LineString') {
-        str = '请输入线段WKT格式坐标，例：LINESTRING(109.2 19.5,109.6 19.1,110.2 19.4)'
-      } else if (state.drawEditsConfig.featureType === 'Polygon') {
-        str = '请输入区域WKT格式坐标，例：POLYGON((109.7 19.3,109.5 19.1,109.8 19.1,109.7 19.3))'
-      }
-      return str
-    })
     const fullScreenHas = () => {
       if (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled) {
         console.log('浏览器支持全屏功能');
@@ -712,10 +526,6 @@ export default defineComponent({
       toLocation,
       handleOlMapLoad,
       judgeBaseLayerActive,
-      drawEditsSwitchFeatureType,
-      changeWkt,
-      ref_drawEditsForm,
-      drawEditsWktPlaceholderCpt,
       fullScreenIn,
       fullScreenOut,
       mapHeight,
@@ -838,15 +648,13 @@ export default defineComponent({
     align-items: center;
     padding: 8px 0;
     border-radius: 8px;
+    gap: 12px;
     >div {
       z-index: 2;
       width: 20px;
       height: 20px;
       display: grid;
       place-items: center;
-      &:not(:last-child) {
-        margin-bottom: 12px;
-      }
       >img {
         width: 100%;
         height: 100%;

src/stores/app.ts

@@ -17,7 +17,7 @@ export const useAppStore = defineStore('app', {
       window.location.replace(`${import.meta.env.BASE_URL}`);
     },
     getZIndex() {
-      return this.zIndex + 1
+      return this.zIndex++
     }
   },
 })

src/stores/ship-map/map-style.ts

@@ -1,4 +1,6 @@
 import * as style from 'ol/style'
+import * as geom from 'ol/geom'
+import * as extent from "ol/extent";
 
 import AIS from './/ship-type/AIS.svg'
 import AIS_BEIDOU from './/ship-type/AIS_BEIDOU.svg'
@@ -8,8 +10,9 @@ import BEIDOU from './/ship-type/BEIDOU.svg'
 import BEIDOU_RADAR from './/ship-type/BEIDOU_RADAR.svg'
 import OTHER from './/ship-type/OTHER.svg'
 import RADAR from './/ship-type/RADAR.svg'
+import FIXED from './/ship-type/FIXED.svg'
 const shipIcon = {
-    AIS, AIS_BEIDOU, AIS_BEIDOU_RADAR, AIS_RADAR, BEIDOU, BEIDOU_RADAR, OTHER, RADAR
+    AIS, AIS_BEIDOU, AIS_BEIDOU_RADAR, AIS_RADAR, BEIDOU, BEIDOU_RADAR, OTHER, RADAR, FIXED
 }
 
 const speedStyle =  (lineRadius, rotation) => {
@@ -66,6 +69,141 @@ const ShipNormalStyle = ({course = 0, speed = 0, head = null, color = '#01f200',
     }))
     return _style
 }
+const trackStyle = (feature, resolution, map, color, callback) => {
+    const geometry = feature.getGeometry();
+    const length = geometry.getLength();//获取线段长度
+    const radio = (200 * resolution) / length;
+    const dradio = 1;//投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
+    const _style = [
+        new style.Style({
+            stroke: new style.Stroke({
+                color: color,
+                width: 2,
+            })
+        })
+    ];
+    const radius = 10
+    const longRadius = radius * Math.SQRT2;
+    const flag = map.getView().getZoom() < map.getView().getMaxZoom() - 1
+    const E = 0.00000001
+    const judgeIs = (p1, p2, p3) => {
+        const k1 = (ps, pe) => {
+            return (pe[1] - ps[1]) / (pe[0] - ps[0])
+        }
+        const k2 = (ps, pe) => {
+            return (pe[0] - ps[0]) / (pe[1] - ps[0])
+        }
+        const a = (ps, pe) => {
+            return Math.abs(k1(p1, ps) - k1(p1, pe)) <= E && Math.abs(k1(p1, ps) - k1(p1, pe)) >= -E
+        }
+        const d = (ps, pe) => {
+            return Math.abs(k2(p1, ps) - k2(p1, pe)) <= E && Math.abs(k2(p1, ps) - k2(p1, pe)) >= -E
+        }
+        const s = (p) => {
+            return p3[0] === p[0] && p3[1] === p[1]
+        }
+        return s(p1) || s(p2) || a(p2, p3) || d(p2, p3)
+    }
+    for (let i = 0; i <= 1; i += radio) {
+        const arrowLocation = geometry.getCoordinateAt(i);
+        if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), arrowLocation)) {
+            geometry.forEachSegment((start, end) => {
+                if (!judgeIs(start, end, arrowLocation)) {
+                    return
+                }
+                let rotation = 0;
+                const dx = end[0] - start[0];
+                const dy = end[1] - start[1];
+                rotation = Math.atan2(dy, dx);
+                const pushStyle = (position) => {
+                    _style.push(new style.Style({
+                        geometry: new geom.Point(position),
+                        image: new style.RegularShape({
+                            stroke: new style.Stroke({
+                                color,
+                                width: 2,
+                                lineDash: [
+                                    longRadius - (4 * (radius / 10)),
+                                    longRadius + (5.5 * (radius / 10)),
+                                    longRadius,
+                                    0
+                                ]
+                            }),
+                            radius: radius / Math.SQRT2,
+                            rotation: -rotation,
+                            angle: Math.PI / (180 / 90),
+                            points: 4
+                        })
+                    }));
+                }
+                if (flag) {
+                    const dx1 = end[0] - arrowLocation[0];
+                    const dy1 = end[1] - arrowLocation[1];
+                    const dx2 = arrowLocation[0] - start[0];
+                    const dy2 = arrowLocation[1] - start[1];
+                    if (dx1 != dx2 && dy1 != dy2) {
+                        if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
+                            pushStyle(arrowLocation)
+                        }
+                    }
+                } else {
+                    if (Math.sqrt(Math.pow(start[0] - end[0], 2) + Math.pow(start[1] - end[1], 2)) > resolution * 100) {
+                        pushStyle([(start[0] + end[0]) / 2, (start[1] + end[1]) / 2])
+                    }
+                }
+            });
+        }
+    }
+    const trackPointList = feature.get('trackPointList')
+    const pList: any = []
+    let trackPointListIndex = 0
+    let lC = 0
+    pList.push(trackPointList[0])
+    if (flag) {
+        geometry.forEachSegment((start, end) => {
+            trackPointListIndex++
+            const l = new geom.LineString([start,end])
+            lC += l.getLength()
+            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), end) && lC > 200 * resolution) {
+                pList.push(trackPointList[trackPointListIndex])
+                lC = 0
+            }
+        });
+    } else {
+        geometry.forEachSegment((start, end) => {
+            trackPointListIndex++
+            const l = new geom.LineString([start,end])
+            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), end)) {
+                pList.push(trackPointList[trackPointListIndex])
+            }
+        });
+    }
+    const arr: any = []
+    const num = 100
+    const step = Math.ceil(_style.length / num)
+    for (let i = 0; i < _style.length; i += step) {
+        arr.push(_style[i])
+    }
+    return callback([..._style, ...arr], pList)
+}
+const trackPointNormalStyle = (color) => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Circle({
+            radius: 3,
+            fill: new style.Fill({
+                color: color,
+            }),
+            stroke: new style.Stroke({
+                color: '#ffffff',
+                width: 1,
+            }),
+        })
+    }))
+    return _style
+}
 export default {
     ShipNormalStyle,
+    trackStyle,
+    trackPointNormalStyle,
 }

src/stores/ship-map/ship-map.ts

@@ -1,12 +1,13 @@
 import {defineStore} from "pinia";
 import {ElMessage} from "element-plus";
-import {computed, createApp, markRaw, reactive, render, toRefs, watch} from "vue";
+import {computed, reactive, toRefs} from "vue";
 import * as format from "ol/format";
 import * as layer from "ol/layer";
 import * as source from "ol/source";
-import * as style from "ol/style";
 import MapStyle from "./map-style";
 import * as ol from "ol";
+import {randomColor, YMDHms} from "@/utils/util";
+import {formatPosition, getShapeView} from "@/utils/easyMap";
 
 export const useShipMapStore = defineStore('shipMap', () => {
   const state: any = reactive({
@@ -18,7 +19,8 @@ export const useShipMapStore = defineStore('shipMap', () => {
       layerShip: null,
       overlayTrack: null,
     },
-    trackHoverData: null
+    trackHoverData: null,
+    trackMap: new Map()
   })
   const initMap = (map, {trackPointDom}) => {
     state.map = map
@@ -38,7 +40,7 @@ export const useShipMapStore = defineStore('shipMap', () => {
     state.ws.overlayTrack = new ol.Overlay({
       element: trackPointDom,
       autoPan: false,
-      offset: [0, -12],
+      offset: [0, -22],
       positioning: 'bottom-center',
       stopEvent: true,
     })
@@ -49,22 +51,143 @@ export const useShipMapStore = defineStore('shipMap', () => {
     let feature = state.map.forEachFeatureAtPixel(pixel, function (feature) {
       return feature
     })
-    if (feature) {
+    if (feature && (feature.get('_featureType') == 'ship' || feature.get('_featureType') == 'trackPoint')) {
+      state.map.getTargetElement().style.cursor = 'pointer'
       state.trackHoverData = feature.get('_data')
       state.ws.overlayTrack.setPosition(feature.getGeometry().getCoordinates())
     } else {
+      state.map.getTargetElement().style.cursor = ''
       state.trackHoverData = null
       state.ws.overlayTrack.setPosition(undefined)
     }
   }
-  const mapSingleClick = (ev) => {}
-
+  const mapSingleClick = (ev) => {
+    let pixel = ev.pixel
+    let feature = state.map.forEachFeatureAtPixel(pixel, function (feature) {
+      return feature
+    })
+    if (feature && feature.get('_featureType') == 'ship') {
+      if (!state.trackMap.has(feature.get('_id'))) {
+        const d = feature.get('_data')
+        state.trackMap.set(feature.get('_id'), {
+          data: feature.get('_data'),
+          color: randomColor(1),
+          history: [],
+          real: [d],
+          trackId: feature.get('_trackId'),
+          moveToTrack: () => {
+            const position = []
+            const t = state.trackMap.get(feature.get('_id'))
+            const arr = [...t.history, ...t.real]
+            arr.forEach(v => {
+              position.push([v.targetLongitude, v.targetLatitude])
+            })
+            getShapeView(state.map, position)
+          },
+          lineLayer: new layer.Vector({
+            zIndex: 4000
+          }),
+          pointsLayer: new layer.Vector({
+            zIndex: 4100
+          }),
+          del: () => {
+            state.map.removeLayer(state.trackMap.get(feature.get('_id')).lineLayer)
+            state.map.removeLayer(state.trackMap.get(feature.get('_id')).pointsLayer)
+            state.trackMap.delete(feature.get('_id'))
+          },
+          refreshTrackStyle: () => {
+            const t = state.trackMap.get(feature.get('_id'))
+            const arr = [...t.history, ...t.real]
+            let lineWkt = ''
+            if (arr.length > 1) {
+              arr.forEach((v, i) => {
+                if (i === 0) {
+                  lineWkt += `LINESTRING(${v.targetLongitude} ${v.targetLatitude}`
+                } else if (i === arr.length - 1) {
+                  lineWkt += `,${v.targetLongitude} ${v.targetLatitude})`
+                } else {
+                  lineWkt += `,${v.targetLongitude} ${v.targetLatitude}`
+                }
+                v.wkt = `POINT(${v.targetLongitude} ${v.targetLatitude})`
+              })
+            }
+            if (lineWkt) {
+              const lS  = new source.Vector({
+                features: [],
+                wrapX: false
+              })
+              const lineF: any = new format.WKT().readFeature(lineWkt)
+              lineF.set('trackPointList', arr)
+              lineF.setStyle((f, r) => MapStyle.trackStyle(f, r, state.map, t.color, (_s, pointList) => {
+                const pointFeatures: any = []
+                pointList.forEach(DATA => {
+                  try {
+                    const feat: any = new format.WKT().readFeature(DATA.wkt)
+                    feat.set('_featureType', 'trackPoint')
+                    feat.set('_data', DATA)
+                    feat.setStyle(MapStyle.trackPointNormalStyle(t.color))
+                    pointFeatures.push(feat)
+                  } catch (e) {
+                    console.log(e)
+                  }
+                })
+                lS.clear()
+                lS.addFeatures(pointFeatures)
+                return _s
+              }))
+              t.lineLayer.setSource(new source.Vector({
+                features: [lineF],
+                wrapX: false
+              }))
+              t.pointsLayer.setSource(lS)
+            }
+          },
+          showTrack: true
+        })
+        state.map.addLayer(state.trackMap.get(feature.get('_id')).lineLayer)
+        state.map.addLayer(state.trackMap.get(feature.get('_id')).pointsLayer)
+        const ws = new WebSocket(`ws://${location.host}/history-track-ws-api/history-fkShips-track`)
+        ws.onopen = (e) => {
+          const str = {
+            shipId: feature.get('_id'),
+            startTime: YMDHms(new Date(d.mergeTime).getTime() - 1000 * 60 * 60),
+            endTime: YMDHms(d.mergeTime),
+            searchType: 1,
+            sendInterval: 1
+          }
+          ws.send(JSON.stringify(str))
+        }
+        ws.onmessage = (e) => {
+          try {
+            const json = JSON.parse(e.data)
+            if (json.message === '查询结束') {
+              ws.close()
+            } else if (json.data?.length > 0) {
+              state.trackMap.get(feature.get('_id')).history.push(...json.data.map(v => ({
+                targetName: v.shipName,
+                mergeTarget: v.shipId,
+                targetLongitude: v.shipLon,
+                targetLatitude: v.shipLat,
+                targetCourse: v.shipCourse,
+                targetSpeed: v.shipSpeed,
+                mergeTime: v.trackTime,
+                targetSourceJson: v.targetSource,
+              })))
+              state.trackMap.get(feature.get('_id')).refreshTrackStyle()
+            }
+          } catch (e) {
+          }
+        }
+        initWebSocket()
+      }
+    }
+  }
   const zoomWMS = computed(() => {
-    return state.zoom <= 12
+    return state.zoom <= 14
   })
   const switchZoom = () => {
     if (zoomWMS.value) {
-      if (state.ws.instance) {
+      if (state.ws.instance && state.trackMap.size === 0) {
         state.ws.instance.close()
         state.ws.instance = null
         state.map.removeLayer(state.ws.layerShip)
@@ -72,6 +195,10 @@ export const useShipMapStore = defineStore('shipMap', () => {
       }
       // 瓦片
       initWMS()
+      // ws
+      if (state.trackMap.size > 0) {
+        initWebSocket()
+      }
     } else {
       if (state.layerWMS) {
         state.map.removeLayer(state.layerWMS)
@@ -112,16 +239,33 @@ export const useShipMapStore = defineStore('shipMap', () => {
   const getBBOX = () => {
     return `BBOX(location, ${state.map.getView().calculateExtent(state.map.getSize()).join(',')})`;
   };
+  const getWSParams = () => {
+    const param = {
+      cql: '',
+      realCql: '',
+      userId: "18889231165"
+    }
+    let idCql = ''
+    if (state.trackMap.size > 0) {
+      let arr = []
+      state.trackMap.forEach((v, k) => {
+        arr.push(`'${k}'`)
+      })
+      idCql = `mergeTarget in (${arr.join(',')})`
+    }
+    if (zoomWMS.value) {
+      param.cql = idCql
+    } else {
+      param.cql = getBBOX()
+      param.realCql = idCql
+    }
+    return JSON.stringify(param)
+  }
   const initWebSocket = () => {
     if (!state.ws.instance) {
       state.ws.instance = new WebSocket(`ws://${location.host}/rh-ws-api/webSocket`)
       state.ws.instance.onopen = (e) => {
-        const param = {
-          "cql": getBBOX(),
-          "realCql": null,
-          "userId": "18889231165"
-        }
-        state.ws.instance.send(JSON.stringify(param))
+        state.ws.instance.send(getWSParams())
       }
       state.ws.instance.onmessage = (e) => {
         try {
@@ -132,13 +276,8 @@ export const useShipMapStore = defineStore('shipMap', () => {
         }
       }
     } else {
-      const param = {
-        "cql": getBBOX(),
-        "realCql": null,
-        "userId": "18889231165"
-      }
       if (state.ws.instance.readyState == 1) {
-        state.ws.instance.send(JSON.stringify(param))
+        state.ws.instance.send(getWSParams())
       }
     }
   }
@@ -152,6 +291,7 @@ export const useShipMapStore = defineStore('shipMap', () => {
             speed: f.get('_speed'),
             head: f.get('_head'),
             mergeType: f.get('_mergeType'),
+            color: state.trackMap.get(f.get('_id'))?.color
           })
         }
       })
@@ -160,12 +300,22 @@ export const useShipMapStore = defineStore('shipMap', () => {
     //  动态拼接数据的唯一标识DATA，不可修改
     const features = data.map(v => {
       try {
-        const feat: any = new format.WKT().readFeature(v.location)
+        const feat: any = new format.WKT().readFeature(`POINT(${v.targetLongitude} ${v.targetLatitude})`)
         feat.set('_course', v.targetCourse || 0)
         feat.set('_speed', v.targetSpeed || 0)
         feat.set('_head', v.targetHeading)
         feat.set('_mergeType', v.mergeType)
+        feat.set('_id', v.mergeTarget)
+        feat.set('_trackId', v.mergeId)
         feat.set('_data', v)
+        feat.set('_featureType', 'ship')
+        // 实时轨迹
+        const t = state.trackMap.get(feat.get('_id'))
+        if (t && t.trackId !== feat.get('_trackId')) {
+          t.real.push(feat.get('_data'))
+          t.trackId = feat.get('_trackId')
+          t.refreshTrackStyle()
+        }
         return feat
       } catch (e) {
         console.log(e)
@@ -177,7 +327,6 @@ export const useShipMapStore = defineStore('shipMap', () => {
     });
     state.ws.layerShip.setSource(vectorSource)
   }
-
   return {
     ...toRefs(state),
     initMap,

src/utils/easyMap.ts

@@ -34,49 +34,6 @@ export const getShapeView = (map, position, L = 600, defaultZoom = 12) => {
     center, resolution
   }
 }
-
-export const getShapeView2 = (map, source, L = 600) => {
-  const features = source.getFeatures();
-  const bounce = extent.boundingExtent(
-    features.map((feature) => feature.getGeometry().getExtent())
-  );
-  const center = extent.getCenter(bounce);
-
-  let x = 0;
-  let y = 0;
-  [[bounce[0], bounce[1]], [bounce[2], bounce[3]]].forEach((v) => {
-    if (Math.abs(v[0] - center[0]) > x) {
-      x = Math.abs(v[0] - center[0]);
-    }
-    if (Math.abs(v[1] - center[1]) > y) {
-      y = Math.abs(v[1] - center[1]);
-    }
-  })
-  const resolution =
-    Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) /
-    ((L / document.body.clientWidth) * document.body.clientHeight);
-
-
-  if (map) {
-    map.getView().animate({
-      center,
-      resolution,
-    });
-  }
-  return {
-    center,
-    resolution,
-  };
-};
-
-export const getShapeView3 = (map, source, L = 600) => {
-  map.getView().fit(source.getExtent(), {
-    size: map.getSize(),
-    padding: [50, 50, 50, 50],
-    duration: 1000,
-  });
-};
-
 export const formatPosition = {
   wptTwl: (arr) => {  // WKT POINT ARR TO WKT LINESTRING
     // @ts-ignore

src/views/web/config/index.vue

@@ -214,8 +214,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+$mapHeight: var(--easy-map-height);
 .config {
-  height: 790px;
+  height: calc($mapHeight - 40px - 20px);
   padding: 12px 10px;
   .tabs {
     display: flex;

src/views/web/example.vue

@@ -0,0 +1,88 @@
+<template>
+  <DragWindow
+    v-if="show"
+    @onClose="$emit('update:show', false)"
+    title="图例"
+    v-model:layout="state.layout"
+    close
+    expend
+  >
+    <div class="example">
+      <div class="title">来源</div>
+      <div class="list">
+        <template v-for="item in source">
+          <div class="item">
+            <img :src="item.icon"/>{{item.name}}
+          </div>
+        </template>
+      </div>
+    </div>
+  </DragWindow>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, markRaw, nextTick, onMounted, reactive, ref, watch} from "vue";
+import DragWindow from './components/drag-window.vue'
+import AIS from '@/assets/images/ship-type/AIS.png'
+import RADAR from '@/assets/images/ship-type/RADAR.png'
+import BEIDOU from '@/assets/images/ship-type/BEIDOU.png'
+import AIS_BEIDOU from '@/assets/images/ship-type/AIS_BEIDOU.png'
+import AIS_RADAR from '@/assets/images/ship-type/AIS_RADAR.png'
+import BEIDOU_RADAR from '@/assets/images/ship-type/BEIDOU_RADAR.png'
+import AIS_BEIDOU_RADAR from '@/assets/images/ship-type/AIS_BEIDOU_RADAR.png'
+import FIXED from '@/assets/images/ship-type/FIXED.png'
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  show: {},
+  mapFunc: {},
+  mapHeight: {},
+  mapWidth: {},
+})
+const state: any = reactive({
+  layout: {
+    width: 400,
+    left: props.mapWidth - 443,
+    top: props.mapHeight - 248
+  },
+})
+const source = [
+  {name: 'AIS', icon: AIS},
+  {name: '雷达', icon: RADAR},
+  {name: '北斗', icon: BEIDOU},
+  {name: 'AIS 北斗', icon: AIS_BEIDOU},
+  {name: 'AIS 雷达', icon: AIS_RADAR},
+  {name: '北斗雷达', icon: BEIDOU_RADAR},
+  {name: 'AIS 北斗雷达', icon: AIS_BEIDOU_RADAR},
+  {name: '固定目标', icon: FIXED},
+]
+</script>
+
+<style lang="scss" scoped>
+.example {
+  padding: 12px 10px;
+  .title {
+    height: 20px;
+    line-height: 20px;
+    color: #c0c4cc;
+    margin-bottom: 6px;
+    font-size: 14px;
+  }
+  .list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 10px;
+    .item {
+      display: flex;
+      align-items: center;
+      color: #FFFFFF;
+      font-size: 14px;
+      >img {
+        width: 18px;
+        height: 18px;
+        margin-right: 12px;
+      }
+    }
+  }
+}
+</style>

src/views/web/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout">
+  <div class="layout" ref="ref_web">
     <div class="layout-head">
       <div class="layout-head-title">{{titleCpt}}</div>
     </div>
@@ -10,7 +10,22 @@
           @easyMapLoad="mapLoad"
           layout="info"
           @mapClose="val => val.source === 'formDraw' ? refreshArea() : undefined"
-        />
+          @paramsListener="mapParamsListener"
+        >
+          <template #info>
+            <div style="width: 20px; height: 20px">
+              <el-tooltip
+                  effect="light"
+                  content="图例"
+                  placement="right"
+                  :teleported="false"
+                  :enterable="false"
+              >
+                <SvgIcon name="tips" color="#152584" class="__hover"@click="state.tools.showExample = !state.tools.showExample"/>
+              </el-tooltip>
+            </div>
+          </template>
+        </EasyMapComponent>
       </div>
       <div class="content-tools">
         <el-tooltip
@@ -53,16 +68,20 @@
       <configCom v-model:show="state.tools.showConfig" :mapFunc="state.mapFunc"/>
       <archiveCom v-model:show="state.tools.showArchive"/>
       <warningCom v-model:show="state.tools.showWarning"/>
+      <exampleCom v-if="state.mapFunc" v-model:show="state.tools.showExample" :mapHeight="state.mapFunc.mapHeight" :mapWidth="state.mapFunc.mapWidth"/>
+      <trackCom v-model:show="state.tools.showTrack"/>
       <trackPointCom ref="ref_trackPoint"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, reactive, ref} from "vue";
+import {computed, getCurrentInstance, reactive, ref, watch} from "vue";
 import configCom from './config/index.vue'
 import archiveCom from './archive/index.vue'
 import warningCom from './warning/index.vue'
+import trackCom from './track/index.vue'
+import exampleCom from './example.vue'
 import {useShipMapStore} from "@/stores";
 import trackPointCom from '@/stores/ship-map/track-point.vue'
 
@@ -75,8 +94,10 @@ const state: any = reactive({
     showConfig: false,
     showArchive: false,
     showWarning: false,
+    showExample: false,
   }
 })
+const ref_web = ref()
 const ref_trackPoint = ref()
 const titleCpt = computed(() => {
   return import.meta.env.VITE_TITLE
@@ -86,9 +107,16 @@ const mapLoad = (map, mapFunc) => {
   state.mapFunc = mapFunc
   // ShipMapStore.initMap(state.map, {trackPointDom: ref_trackPoint.value.$el})
 }
+const mapParamsListener = (p) => {
+  ref_web.value?.style.setProperty('--easy-map-height',  p.resizeMapHeight + 'px')
+  ref_web.value?.style.setProperty('--easy-map-width',  p.resizeMapWidth + 'px')
+}
 const refreshArea = () => {
   console.log(123)
 }
+watch(() => ShipMapStore.trackMap, (n) => {
+  state.tools.showTrack = n.size > 0
+}, {deep: true})
 </script>
 
 <style lang="scss" scoped>

src/views/web/track/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <DragWindow
+    v-if="show"
+    @onClose="$emit('update:show', false)"
+    title="轨迹列表"
+    v-model:layout="state.layout"
+    expend
+  >
+    <div class="swm-track-com">
+      <div class="swm-track-com-head row">
+        <div class="index">序号</div>
+        <div class="target">目标ID</div>
+        <div class="time">轨迹时长</div>
+        <div class="operation">操作</div>
+      </div>
+      <div class="swm-track-com-body">
+        <template v-for="([key, value], index) in ShipMapStore.trackMap">
+          <div class="row" :style="`color: ${value.color};`">
+            <div class="index">{{index + 1}}</div>
+            <div class="target __hover" @click="value.moveToTrack()">{{key}}</div>
+            <div class="time">
+              {{getDuration(value)}}
+            </div>
+            <div class="operation">
+              <el-tooltip :enterable="false" placement="top" content="隐藏轨迹" v-if="value.showTrack">
+                <SvgIcon class="__hover" name="eye" size="16" color="#22E622" @click="handleTrack(value, false)"/>
+              </el-tooltip>
+              <el-tooltip :enterable="false" placement="top" content="显示轨迹" v-else>
+                <SvgIcon class="__hover" name="eye-close" size="16" color="#22E622" @click="handleTrack(value, true)"/>
+              </el-tooltip>
+<!--              <el-tooltip :enterable="false" placement="top" content="轨迹分析" v-if="value.history?.length > 0">-->
+<!--                <SvgIcon class="__hover" name="panel" size="16" color="#48DCFD"/>-->
+<!--              </el-tooltip>-->
+              <el-tooltip :enterable="false" placement="top" content="调色盘">
+                <div class="color">
+                  <SvgIcon class="__hover" name="color" size="16" color="#FF7223"/>
+                  <el-color-picker v-model="value.color" @change="handleColor(value)"/>
+                </div>
+              </el-tooltip>
+              <el-tooltip :enterable="false" placement="top" content="删除">
+                <SvgIcon class="__hover" name="del" size="16" color="#AADDFF" @click="value.del()"/>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </DragWindow>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, markRaw, nextTick, onMounted, reactive, ref, watch} from "vue";
+import DragWindow from '../components/drag-window.vue'
+import {useShipMapStore} from "@/stores";
+import {comTimeByArea} from "@/utils/util";
+
+const ShipMapStore = useShipMapStore()
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  show: {},
+  mapFunc: {}
+})
+const state: any = reactive({
+  layout: {
+    width: 480,
+    left: 70,
+    top: 10
+  },
+})
+const getDuration = (value) => {
+  let start = null
+  const end = value.real[value.real.length - 1].mergeTime
+  if (value.history.length > 0) {
+    start = value.history[0].mergeTime
+  } else if (value.real.length > 0) {
+    start = value.real[0].mergeTime
+  }
+  return comTimeByArea(start, end, true)
+}
+const handleColor = (value) => {
+  nextTick(() => {
+    value.refreshTrackStyle?.()
+  })
+}
+const handleTrack = (value, visible) => {
+  value.lineLayer?.setVisible(visible)
+  value.pointsLayer?.setVisible(visible)
+  value.showTrack = visible
+  if (visible) {
+    value.moveToTrack()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$mapHeight: var(--easy-map-height);
+.swm-track-com {
+  max-height: calc($mapHeight - 40px - 20px);
+  display: flex;
+  flex-direction: column;
+  padding: 16px 8px;
+  overflow-y: auto;
+  .row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    >div {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-left: 1px solid rgba(104,195,255,0.1);
+      border-bottom: 1px solid rgba(104,195,255,0.1);
+      &:last-child {
+        border-right: 1px solid rgba(104,195,255,0.1);
+      }
+    }
+    .index {
+      width: 40px;
+    }
+    .target {
+      flex: 1;
+    }
+    .time {
+      width: 100px;
+    }
+    .operation {
+      width: 140px;
+    }
+  }
+
+  .swm-track-com-head {
+    background: #152584;
+    border-top: 1px solid rgba(104,195,255,0.1);
+    >div {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #68C3FF;
+    }
+  }
+  .swm-track-com-body {
+    flex: 1;
+    overflow-y: auto;
+    .row {
+      >div {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+      }
+      .operation {
+        gap: 4px;
+        >img {
+          width: 16px;
+          height: 16px;
+        }
+        .color {
+          position: relative;
+          width: 16px;
+          height: 16px;
+          display: flex;
+          >img {
+            width: 100%;
+            height: 100%;
+          }
+          :deep(.el-color-picker) {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            opacity: 0;
+            .el-color-picker__trigger {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/web/warning/index.vue

@@ -154,8 +154,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+$mapHeight: var(--easy-map-height);
 .warning {
-  height: 790px;
+  height: calc($mapHeight - 40px - 20px);
   padding: 12px 10px;
   display: flex;
   flex-direction: column;

vite.config.ts

@@ -99,6 +99,14 @@ export default defineConfig({
           return path.replace(/^\/rh-ws-api/, '')
         }
       },
+      '/history-track-ws-api': {
+        target: 'http://74.10.28.24:9999/', // fk
+        ws: true,
+        changeOrigin: true,
+        rewrite: path => {
+          return path.replace(/^\/history-track-ws-api/, '')
+        }
+      },
     }
   },
   css: {