米秒

package.json

@@ -15,7 +15,8 @@
     "ol": "^6.5.0",
     "vuex": "^4.1.0",
     "vue-router": "^4.1.6",
-    "element-plus": "^2.3.1"
+    "element-plus": "^2.3.1",
+    "@turf/turf": "^6.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

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

@@ -302,8 +302,8 @@ export default defineComponent({
                         return {
                           easyMapParams: {
                             id: `form-track-point-${i}`,
-                            position: that.$easyMap.formatPosition.cptTwpt(v.position),
-                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.source).color, v.speed)
+                            position: that.$easyMap.formatPosition.cptTwpt(v.current.position),
+                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.current.source).color, v.current, v.next)
                           }
                         }
                       })
@@ -468,12 +468,12 @@ export default defineComponent({
                       map: state.map,
                       layerName: 'track-point',
                       layerZIndex: 8,
-                      list: state.initTrackPointList.map((v, i) => {
+                      list: state.initTrackPointList.map((c, 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)
+                            position: that.$easyMap.formatPosition.cptTwpt(c.current.position),
+                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(c.current.source).color, c.current, c.next)
                           }
                         }
                       })

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

@@ -8,6 +8,7 @@ import * as interaction from 'ol/interaction'
 import * as extent from "ol/extent";
 import * as format from "ol/format";
 import { Coordinate } from 'ol/coordinate'
+import * as turf from '@turf/turf'
 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({
@@ -93,15 +94,18 @@ const trackLineStyle = (feature: any, resolution: any, map: any, color: any, pMa
     }
     const pList = []
     let lC = 0
-    pList.push(pMap.get(geometry.getFirstCoordinate().join('-')))
+    // 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) {
+            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>start) && lC > 200 * resolution) {
                 // @ts-ignore
-                pList.push(pMap.get(`${end[0]}-${end[1]}`))
+                const current = pMap.get(`${start[0]}-${start[1]}`)
+                // @ts-ignore
+                const next = pMap.get(`${end[0]}-${end[1]}`)
+                pList.push({current, next})
                 lC = 0
             }
         });
@@ -109,18 +113,31 @@ const trackLineStyle = (feature: any, resolution: any, map: any, color: any, pMa
         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)) {
+            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>start)) {
+                // @ts-ignore
+                const current = pMap.get(`${start[0]}-${start[1]}`)
                 // @ts-ignore
-                pList.push(pMap.get(`${end[0]}-${end[1]}`))
+                const next = pMap.get(`${end[0]}-${end[1]}`)
+                pList.push({current, next})
             }
         });
     }
+    pList.push({
+        current: pMap.get(geometry.getLastCoordinate().join('-')),
+        next: null
+    })
     callback(_style, pList)
     return _style
 }
 
-const trackPointStyle = (color: any, speed: any) => {
+const trackPointStyle = (color: any, current: any, next: any) => {
     const _style = []
+    let _text = String(current.speed) + '节'
+    if (next) {
+        const dis = turf.distance(turf.point(current.position), turf.point(next.position), {units: 'meters'})
+        _text += dis > 1000 ? `\n${(dis / 1000).toFixed(1)}千米` : `\n${dis.toFixed(0)}米`
+        _text += `\n${(dis / 0.51444444).toFixed(0)}秒`
+    }
     _style.push(new style.Style({
         image: new style.Circle({
             radius: 10,
@@ -129,8 +146,8 @@ const trackPointStyle = (color: any, speed: any) => {
             }),
         }),
         text: new style.Text({
-            text: String(speed),
-            font: "12px font-size", // 设置字体大小
+            text: _text,
+            font: "12px Microsoft YaHei", // 设置字体大小
             fill: new style.Fill({
                 // 设置字体颜色
                 color: "#000",