v1

src/components/easyMap/initMapInfo.ts

@@ -52,7 +52,7 @@ const baseMapLayers = [
     visible: false,
     img: HaituImg
   }),
-  window.location.origin.includes('localhost')
+  !window.location.origin.includes('localhost')
     ? initBaseLayer({
       key: 'tdtsl',
       name: 'base_tianditu',

src/store/index.ts

@@ -1,5 +1,6 @@
 import { createStore } from "vuex";
 import app from "./modules/app";
+import easyMap from "./modules/easy-map";
 
 export default createStore({
   state: {},
@@ -7,5 +8,6 @@ export default createStore({
   actions: {},
   modules: {
     app,
+    easyMap
   },
 });

src/store/modules/easy-map.ts

@@ -0,0 +1,38 @@
+const state = {
+	clickInfo: {
+		layerName: null,
+		value: null,
+		feature: null,
+		isClick: false,
+		e: null
+	},
+	hoverInfo: {
+		layerName: null,
+		value: null,
+		feature: null
+	},
+}
+
+const mutations = {
+	SET_INFO (state: { clickInfo: any; hoverInfo: any }, {data, type}: any) {
+		if (type === 'click') {
+			state.clickInfo = data
+		} else if (type === 'hover') {
+			state.hoverInfo = data
+		}
+	},
+}
+
+const actions = {
+	// @ts-ignore
+	LOAD_INFO ({ commit }, {data, type}) {
+		commit('SET_INFO', {data, type})
+	},
+}
+
+export default {
+	namespaced: true,
+	state,
+	mutations,
+	actions
+}

src/views/init-speed-track/index.vue

@@ -11,23 +11,45 @@
           <div class="card-header">
             <span>轨迹列表</span>
             <el-button-group>
-              <el-button color="#f0a461" size="small" @click="drawTrack('TIANAO_RADAR')" style="color: white">小目标雷达</el-button>
-              <el-button color="#f755f3" size="small" @click="drawTrack('BEIDOU')" style="color: white">北斗</el-button>
-              <el-button type="primary" size="small" @click="drawTrack('GLOBAL_AIS')" style="color: white">全球AIS</el-button>
+              <template v-for="[key, value] in SourceMap">
+                <el-button :color="value.color" size="small" @click="drawTrack(key)" style="color: white">{{value.label}}</el-button>
+              </template>
             </el-button-group>
           </div>
         </template>
-        <div class="track-list">
+        <div class="track-line">
+          <template v-for="(item, index) in trackList">
+            <div class="line">
+              <div class="label" :style="`color: ${SourceMap.get(item.type).color};`">{{SourceMap.get(item.type).label}}</div>
+              <el-tooltip :enterable="false" placement="top" content="隐藏" v-if="item.show">
+                <img class="__hover" src="./ship-track-visible.svg" @click="handleShow(false, item)"/>
+              </el-tooltip>
+              <el-tooltip :enterable="false" placement="top" content="显示" v-else>
+                <img class="__hover" src="./ship-track-invisible.svg" @click="handleShow(true, item)"/>
+              </el-tooltip>
+            </div>
+          </template>
         </div>
       </el-card>
       <el-card shadow="always">
         <template #header>
           <div class="card-header">
             <span>轨迹点列表</span>
+            <el-button v-if="trackPointList.length > 0" type="primary" size="small" @click="onSubmit" style="color: white">保存</el-button>
           </div>
         </template>
         <div class="track-point">
-          <template v-for="(item, index) in trackPointList"></template>
+          <template v-for="(item, index) in trackPointList">
+            <div class="point">
+              <div class="position">
+                <span>{{item.position[0]}}</span><br/>
+                <span>{{item.position[1]}}</span>
+              </div>
+              <div class="speed">
+                <el-input-number v-model="item.speed" :precision="2" :step="0.1" :max="100" :min="0" @focus="onPointFocus(trackPointList[index - 1], item, trackPointList[index + 1])"/>
+              </div>
+            </div>
+          </template>
         </div>
       </el-card>
     </div>
@@ -59,6 +81,7 @@ import {unByKey} from "ol/Observable";
 import { Geometry } from 'ol/geom';
 import { EventsKey } from 'ol/events';
 import { Coordinate } from 'ol/coordinate';
+import TrackStyle from './track-style'
 
 export default defineComponent({
   name: 'App',
@@ -66,10 +89,31 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const SourceMap = new Map([
+        ['TIANAO_RADAR', {
+          label: '小目标雷达',
+          color: '#f0a461'
+        }],
+        ['BEIDOU', {
+          label: '北斗',
+          color: '#f755f3'
+        }],
+        ['GLOBAL_AIS', {
+          label: '全球AIS',
+          color: '#409eff'
+        }],
+    ])
     const state = reactive({
       map: <any>null,
       mapFunc: null,
-      trackPointList: []
+      trackPointList: [],
+      trackList: <any>[],
+      formTrackPointStartCount: 0,
+      formTrackPointEndCount: 0,
+      formTrackPointList: [],
+      initTrackPointStartCount: 0,
+      initTrackPointEndCount: 0,
+      initTrackPointList: [],
     });
     const mapLoad = (map: null, func: null) => {
       state.map = map
@@ -79,33 +123,6 @@ export default defineComponent({
       let measureTooltipElement: HTMLDivElement | null;
       let helpTooltipElement: HTMLDivElement | null;
       const realLayer = state.map.getLayers().getArray().filter((v: { get: (arg0: string) => string; }) => v.get('layerName') === 'measureLayer')
-      let _source: { removeFeature: (arg0: any) => void; } | null = null
-      if (realLayer[0]) {
-        _source = realLayer[0].getSource()
-      } else {
-        _source = new source.Vector(); //图层数据源
-        const _vector = new layer.Vector({
-          zIndex: 9999,
-          source: _source,
-          style: new style.Style({ //图层样式
-            fill: new style.Fill({
-              color: 'rgba(255, 255, 255, 0.2)' //填充颜色
-            }),
-            stroke: new style.Stroke({
-              color: '#f31a4a',  //边框颜色
-              width: 2   // 边框宽度
-            }),
-            image: new style.Circle({
-              radius: 7,
-              fill: new style.Fill({
-                color: '#ffcc33'
-              })
-            })
-          })
-        });
-        _vector.set('layerName', 'measureLayer')
-        state.map.addLayer(_vector);
-      }
       let sketch: { getGeometry: () => { (): any; new(): any; on: { (arg0: string, arg1: (evt: any) => void): any; new(): any; }; }; } | null;
       let helpTooltip: ol.Overlay;
       let measureTooltip: ol.Overlay;
@@ -160,7 +177,6 @@ export default defineComponent({
       const addInteraction = () => {
         const id = 'drawName'
         const draw = new interaction.Draw({
-          source: _source,//测量绘制层数据源
           type: 'LineString',  //几何图形类型
           style: new style.Style({
             fill: new style.Fill({
@@ -255,13 +271,204 @@ export default defineComponent({
     const drawTrack = (trackSource: string) => {
       startDraw((evt) => {
         const geom = evt.feature.getGeometry()
-        state.trackPointList = geom.getCoordinates()
+        const pMap = new Map()
+        state.trackPointList = geom.getCoordinates().map((v: any) => {
+          const obj = {
+            source: trackSource,
+            position: v,
+            speed: 0
+          }
+          pMap.set(`${v[0]}-${v[1]}`, obj)
+          return obj
+        })
+        that.$easyMap.initShape({
+          map: state.map,
+          layerName: "form-track-point-line",
+          layerZIndex: 9,
+          list: [
+            {
+              easyMapParams: {
+                id: new Date().getTime(),
+                position: that.$easyMap.formatPosition.wptTwl(state.trackPointList.map(v => that.$easyMap.formatPosition.cptTwpt(v.position))),
+                normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(trackSource)?.color, pMap, (s, p) => {
+                  state.formTrackPointStartCount++
+                  setTimeout(() => {
+                    state.formTrackPointEndCount++
+                    state.formTrackPointList.push(...p)
+                    if (state.formTrackPointStartCount === state.formTrackPointEndCount) {
+                      console.log(state.formTrackPointList)
+                      that.$easyMap.initShape({
+                        map: state.map,
+                        layerName: 'form-track-point',
+                        layerZIndex: 10,
+                        list: state.formTrackPointList.map((v, i) => {
+                            return {
+                                easyMapParams: {
+                                    id: `form-track-point-${i}`,
+                                    position: that.$easyMap.formatPosition.cptTwpt(v.position),
+                                    normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.source).color, v.speed)
+                                }
+                            }
+                        })
+                      })
+                      state.formTrackPointStartCount = 0
+                      state.formTrackPointEndCount = 0
+                      state.formTrackPointList = []
+                    }
+                  }, 10)
+                  return s
+                }),
+              }
+            }
+          ]
+        });
       })
     }
+    const onPointFocus = (p1: any, p2: any, p3: any) => {
+      that.$easyMap.getShapeView(state.map, [p1?.position, p2.position, p3?.position].filter(v => v))
+      const radius = 25
+      const longRadius = radius * Math.SQRT2
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "focus",
+        layerZIndex: 20,
+        list: [
+          {
+            easyMapParams: {
+              id: 'focus',
+              position: that.$easyMap.formatPosition.cptTwpt(p2.position),
+              normalStyle: [new style.Style({ //图层样式
+                image: new style.RegularShape({
+                  stroke: new style.Stroke({
+                    color: '#9F2EFF',
+                    width: 2,
+                    lineDash: [
+                      (longRadius * 3) / 10,
+                      (longRadius * 4) / 10,
+                      (longRadius * 3) / 10,
+                      0
+                    ]
+                  }),
+                  radius1: radius,
+                  rotation: Math.PI / (180 / 45),
+                  points: 4
+                })
+              })]
+            }
+          }
+        ]
+      });
+    }
+    const onSubmit = () => {
+      const obj = {
+        type: state.trackPointList[0].source,
+        lines: state.trackPointList.map(v => {
+          return {
+            lon: v.position[0],
+            lat: v.position[1],
+            speed: v.speed
+          }
+        })
+      }
+      const result = JSON.parse(JSON.stringify(obj))
+      state.trackList.push(Object.assign(result, {show: false, ID: new Date().getTime()}))
+      state.trackPointList = []
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "form-track-point-line",
+        layerZIndex: 9,
+        list: []
+      });
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "form-track-point",
+        layerZIndex: 10,
+        list: []
+      });
+      console.log(result)
+    }
+    const trackShowListCom = computed(() => {
+      return state.trackList.filter((v: { show: any; }) => v.show)
+    })
+    const initTrack = () => {
+      console.log(trackShowListCom.value)
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "track-point-line",
+        layerZIndex: 7,
+        list: []
+      });
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "track-point",
+        layerZIndex: 8,
+        list: []
+      });
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "track-point-line",
+        layerZIndex: 7,
+        list: trackShowListCom.value.map((v: any) => {
+          const pMap = new Map()
+          v.lines.forEach((p: {
+              speed: any; type: any; lon: any; lat: any;
+          }) => {
+            const obj = {
+              source: v.type,
+              position: [p.lon, p.lat],
+              speed: p.speed
+            }
+            pMap.set(`${p.lon}-${p.lat}`, obj)
+          })
+          return {
+            easyMapParams: {
+              id: v.ID,
+              position: that.$easyMap.formatPosition.wptTwl(v.lines.map((c: { lon: any; lat: any; }) => that.$easyMap.formatPosition.cptTwpt([c.lon, c.lat]))),
+              normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(v.type)?.color, pMap, (s, p) => {
+                state.initTrackPointStartCount++
+                setTimeout(() => {
+                  state.initTrackPointEndCount++
+                  state.initTrackPointList.push(...p)
+                  if (state.initTrackPointStartCount === state.initTrackPointEndCount) {
+                    console.log(state.initTrackPointList)
+                    that.$easyMap.initShape({
+                      map: state.map,
+                      layerName: 'track-point',
+                      layerZIndex: 8,
+                      list: state.initTrackPointList.map((v, i) => {
+                        return {
+                          easyMapParams: {
+                            id: `init-track-point-${v.ID}-${i}`,
+                            position: that.$easyMap.formatPosition.cptTwpt(v.position),
+                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.source).color, v.speed)
+                          }
+                        }
+                      })
+                    })
+                    state.initTrackPointStartCount = 0
+                    state.initTrackPointEndCount = 0
+                    state.initTrackPointList = []
+                  }
+                }, 10)
+                return s
+              }),
+            }
+          }
+        })
+      });
+    }
+    const handleShow = (show: any, item: any) => {
+      item.show = show
+      initTrack()
+    }
     return {
       ...toRefs(state),
       mapLoad,
-      drawTrack
+      drawTrack,
+      onPointFocus,
+      SourceMap,
+      onSubmit,
+      handleShow
     }
   }
 })
@@ -281,6 +488,26 @@ export default defineComponent({
     z-index: 2;
     top: 0;
     left: 0;
+    .track-line {
+      .line {
+        height: 20px;
+        display: flex;
+        align-items: center;
+        .label {
+          width: 90px;
+        }
+
+      }
+    }
+    .track-point {
+      .point {
+        display: flex;
+        .position {
+          font-size: 12px;
+        }
+        border-bottom: 1px solid black;
+      }
+    }
   }
 }
 </style>

src/views/init-speed-track/track-style.ts

@@ -0,0 +1,176 @@
+import * as ol from 'ol'
+import * as style from 'ol/style'
+import * as layer from 'ol/layer'
+import * as source from 'ol/source'
+import * as geom from 'ol/geom'
+import * as proj from 'ol/proj'
+import * as interaction from 'ol/interaction'
+import * as extent from "ol/extent";
+import * as format from "ol/format";
+import { Coordinate } from 'ol/coordinate'
+const trackLineStyle = (feature: any, resolution: any, map: any, color: any, pMap: { get: (arg0: string) => any }, callback: (arg0: style.Style[], arg1: any[]) => void) => {
+    const _style = []
+    _style.push(new style.Style({
+        stroke: new style.Stroke({
+            color: color,
+            width: 2
+        })
+    }))
+    const geometry = feature.getGeometry();
+    const length = geometry.getLength();//获取线段长度
+    const radio = (200 * resolution) / length;
+    const dradio = 1;//投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
+    const radius = 10
+    const longRadius = radius * Math.SQRT2;
+    const judgeIs = (p1: any[], p2: any[], p3: any[]) => {
+        const k1 = (ps: any[], pe: number[]) => {
+            return (pe[1] - ps[1]) / (pe[0] - ps[0])
+        }
+        const k2 = (ps: any[], pe: number[]) => {
+            return (pe[0] - ps[0]) / (pe[1] - ps[0])
+        }
+        const a = (ps: any[], pe: any[]) => {
+            return Math.abs(k1(p1, ps) - k1(p1, pe)) <= E && Math.abs(k1(p1, ps) - k1(p1, pe)) >= -E
+        }
+        const d = (ps: any[], pe: any[]) => {
+            return Math.abs(k2(p1, ps) - k2(p1, pe)) <= E && Math.abs(k2(p1, ps) - k2(p1, pe)) >= -E
+        }
+        const s = (p: any[]) => {
+            return p3[0] === p[0] && p3[1] === p[1]
+        }
+        const E = 0.00000001
+        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: any[], end: any[]) => {
+                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: Coordinate) => {
+                    _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 (map.getView().getZoom() < map.getView().getMaxZoom()) {
+                    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 pList = []
+    let lC = 0
+    pList.push(pMap.get(geometry.getFirstCoordinate().join('-')))
+    if (map.getView().getZoom() < map.getView().getMaxZoom()) {
+        geometry.forEachSegment((start: number | Coordinate, end: number | any[]) => {
+            // @ts-ignore
+            const l = new geom.LineString([start, end])
+            lC += l.getLength()
+            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>end) && lC > 200 * resolution) {
+                // @ts-ignore
+                pList.push(pMap.get(`${end[0]}-${end[1]}`))
+                lC = 0
+            }
+        });
+    } else {
+        geometry.forEachSegment((start: number | Coordinate, end: number | any[]) => {
+            // @ts-ignore
+            const l = new geom.LineString([start, end])
+            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>end)) {
+                // @ts-ignore
+                pList.push(pMap.get(`${end[0]}-${end[1]}`))
+            }
+        });
+    }
+    callback(_style, pList)
+    // $easyMap.initShape({
+    //     map: map,
+    //     layerName: pointLayerName,
+    //     layerZIndex: pointLayerNameZ,
+    //     list: pList.map((v, i) => {
+    //         return {
+    //             easyMapParams: {
+    //                 id: `${pointLayerName}-${i}`,
+    //                 position: $easyMap.formatPosition.cptTwpt(v.position),
+    //                 normalStyle: [
+    //                     new style.Style({
+    //                         image: new style.Circle({
+    //                             radius: 10,
+    //                             fill: new style.Fill({
+    //                                 color: color,
+    //                             }),
+    //                         }),
+    //                         text: new style.Text({
+    //                             text: String(v.speed),
+    //                             font: "12px font-size", // 设置字体大小
+    //                             fill: new style.Fill({
+    //                                 // 设置字体颜色
+    //                                 color: "#000",
+    //                             }),
+    //                         })
+    //                     }),
+    //                 ]
+    //             }
+    //         }
+    //     })
+    // });
+    return _style
+}
+
+const trackPointStyle = (color: any, speed: any) => {
+    const _style = []
+    _style.push(new style.Style({
+        image: new style.Circle({
+            radius: 10,
+            fill: new style.Fill({
+                color: color,
+            }),
+        }),
+        text: new style.Text({
+            text: String(speed),
+            font: "12px font-size", // 设置字体大小
+            fill: new style.Fill({
+                // 设置字体颜色
+                color: "#000",
+            }),
+        })
+    }),)
+    return _style
+}
+export default {
+    trackLineStyle,
+    trackPointStyle
+}