添加点位为指定图片

package-lock.json

@@ -10,6 +10,8 @@
       "dependencies": {
         "@antv/l7": "^2.22.1",
         "@antv/l7-maps": "^2.22.1",
+        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.8",
+        "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.8",
         "@turf/bbox": "^7.1.0",
         "@turf/helpers": "^7.1.0",
         "@yzfe/svgicon": "^1.2.2",
@@ -907,6 +909,29 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmmirror.com/@epicgames-ps/lib-pixelstreamingfrontend-ue5.2/-/lib-pixelstreamingfrontend-ue5.2-0.5.8.tgz",
+      "integrity": "sha512-mVh05FFFRNc0VQy95V2mgISLDHIoYZyvspsw5GiaG9RZN5uEhR+YPCm/WvvKOatwqAlR7XOZ1sml1Lj1ymz7eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sdp": "^3.1.0"
+      }
+    },
+    "node_modules/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmmirror.com/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.8.tgz",
+      "integrity": "sha512-KqAT1hFA6aQsILg59nO1iUBCHRFhJ951X3L8mvOcAh9Qwo8hSFYK3n8kgcqQylCR1U+Z18GtFLvG6zv0CMk8ng==",
+      "license": "MIT",
+      "dependencies": {
+        "jss": "^10.9.2",
+        "jss-plugin-camel-case": "^10.9.2",
+        "jss-plugin-global": "^10.9.2"
+      },
+      "peerDependencies": {
+        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.8"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -6219,6 +6244,12 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -6381,6 +6412,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==",
+      "license": "MIT"
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -6766,6 +6803,43 @@
         "verror": "1.10.0"
       }
     },
+    "node_modules/jss": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmmirror.com/jss/-/jss-10.10.0.tgz",
+      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/jss"
+      }
+    },
+    "node_modules/jss-plugin-camel-case": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmmirror.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
+      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-global": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmmirror.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
+      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
     "node_modules/kdbush": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/kdbush/-/kdbush-4.0.2.tgz",
@@ -8404,6 +8478,12 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz",
@@ -9003,6 +9083,12 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "dev": true
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/tinybench/-/tinybench-2.9.0.tgz",
@@ -10934,6 +11020,24 @@
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "requires": {}
     },
+    "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmmirror.com/@epicgames-ps/lib-pixelstreamingfrontend-ue5.2/-/lib-pixelstreamingfrontend-ue5.2-0.5.8.tgz",
+      "integrity": "sha512-mVh05FFFRNc0VQy95V2mgISLDHIoYZyvspsw5GiaG9RZN5uEhR+YPCm/WvvKOatwqAlR7XOZ1sml1Lj1ymz7eQ==",
+      "requires": {
+        "sdp": "^3.1.0"
+      }
+    },
+    "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmmirror.com/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.8.tgz",
+      "integrity": "sha512-KqAT1hFA6aQsILg59nO1iUBCHRFhJ951X3L8mvOcAh9Qwo8hSFYK3n8kgcqQylCR1U+Z18GtFLvG6zv0CMk8ng==",
+      "requires": {
+        "jss": "^10.9.2",
+        "jss-plugin-camel-case": "^10.9.2",
+        "jss-plugin-global": "^10.9.2"
+      }
+    },
     "@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -14521,6 +14625,11 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -14621,6 +14730,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
+    },
     "is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -14898,6 +15012,36 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmmirror.com/jss/-/jss-10.10.0.tgz",
+      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmmirror.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
+      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.10.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmmirror.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
+      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
     "kdbush": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/kdbush/-/kdbush-4.0.2.tgz",
@@ -16044,6 +16188,11 @@
         "xmlchars": "^2.2.0"
       }
     },
+    "sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
     "semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz",
@@ -16488,6 +16637,11 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "dev": true
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/tinybench/-/tinybench-2.9.0.tgz",

package.json

@@ -18,6 +18,8 @@
   "dependencies": {
     "@antv/l7": "^2.22.1",
     "@antv/l7-maps": "^2.22.1",
+    "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.8",
+    "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.8",
     "@turf/bbox": "^7.1.0",
     "@turf/helpers": "^7.1.0",
     "@yzfe/svgicon": "^1.2.2",

src/components/AntvMap/index.vue

@@ -4,9 +4,19 @@ import {onMounted, watch} from "vue";
 import {useMapStore} from "@/stores/map";
 
 const store = useMapStore()
+const stationPointBlueImage = new URL('@/assets/images/map/station-point-blue.png', import.meta.url).href
+const stationPointYellowImage = new URL('@/assets/images/map/station-point-yellow.png', import.meta.url).href
+const stationPointGrayImage = new URL('@/assets/images/map/station-point-gray.png', import.meta.url).href
+
 
 onMounted(() => {
-  init()
+  init({
+    images: [
+      {name: 'stationPointBlue', src: stationPointBlueImage},
+      {name: 'stationPointYellow', src: stationPointYellowImage},
+      {name: 'stationPointGray', src: stationPointGrayImage},
+    ]
+  })
 })
 
 watch(() => store.mapOption, (option): void => {

src/components/UePlayer.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {Config, PixelStreaming} from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
+import {Application, PixelStreamingApplicationStyle} from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
+
+const uePlayerRef = ref(null)
+
+onMounted(() => {
+  const pixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
+  pixelStreamingApplicationStyles.applyStyleSheet();
+
+  // 创建 config 对象
+  const config = new Config({useUrlParams: true});
+
+  // 创建实现 Delegate 接口类的本机 DOM 委托实例
+  const stream = new PixelStreaming(config);
+  const application = new Application({
+    stream,
+    onColorModeChanged: (isLightMode) => pixelStreamingApplicationStyles.setColorMode(isLightMode)
+  });
+
+  uePlayerRef.value.appendChild(application.rootElement);
+})
+
+</script>
+
+<template>
+  <div ref="uePlayerRef" class="ue-player"></div>
+</template>
+
+<style lang="scss" scoped>
+.ue-player {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  pointer-events: auto;
+}
+</style>

src/layout/index.vue

@@ -1,17 +1,33 @@
 <script lang="ts" setup>
 import {AppMain, Navbar} from '@/layout/components/index.js'
 import AntvMap from '@/components/AntvMap/index.vue'
+import UePlayer from "@/components/UePlayer.vue";
+import {useAppStore} from "@/stores/app";
+import {watch} from "vue";
+import {useRoute} from "vue-router";
 
 let navbarHeight = '12vh'
 
 let theme = ''
 let navbarStyle = {height: navbarHeight}
+
+const appStore = useAppStore()
+const route = useRoute()
+
+watch(() => route.path, path => {
+  if (path === '/index') {
+    appStore.changeFloorType('map')
+  } else {
+    appStore.changeFloorType('ue')
+  }
+})
 </script>
 
 <template>
   <div :style="{ '--current-color': theme }" class="app-wrapper">
 
-    <antv-map class="floor-container"></antv-map>
+    <antv-map v-show="appStore.floorType === 'map'" class="floor-container"></antv-map>
+    <ue-player v-show="appStore.floorType === 'ue'" class="floor-container"></ue-player>
 
     <!-- 顶部阴影 -->
     <div class="header-shade"></div>

src/stores/app.ts

@@ -0,0 +1,13 @@
+import {ref} from 'vue'
+import {defineStore} from 'pinia'
+
+export const useAppStore = defineStore('app', () => {
+  // 底板类型
+  const floorType = ref('map')
+
+  function changeFloorType(type: string) {
+    floorType.value = type
+  }
+
+  return {floorType, changeFloorType}
+})

src/stores/counter.ts

@@ -1,13 +0,0 @@
-import {computed, ref} from 'vue'
-import {defineStore} from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-
-  function increment() {
-    count.value++
-  }
-
-  return {count, doubleCount, increment}
-})

src/stores/map.ts

@@ -1,6 +1,5 @@
 import {computed, ref} from 'vue'
 import {defineStore} from 'pinia'
-import bus from "@/utils/bus";
 
 export const useMapStore = defineStore('map', () => {
   let mapOption: any = ref(null)
@@ -16,16 +15,5 @@ export const useMapStore = defineStore('map', () => {
     count.value++
   }
 
-  /**
-   * 点击事件处理
-   * @param data 数据
-   * @param e     元数据
-   * @param type 类型（point,line,polygon）
-   */
-  function handleClick(data: any, e: any, type: string) {
-    // @ts-ignore
-
-  }
-
-  return {mapOption, setOption, handleClick, count, doubleCount, increment}
+  return {mapOption, setOption, count, doubleCount, increment}
 })

src/utils/mapConfig.ts

@@ -2,15 +2,25 @@ import {LineLayer, PointLayer, PolygonLayer, Popup, RasterLayer, Scene} from "@a
 import type {ICameraOptions, ISourceCFG, Point} from "@antv/l7-core";
 import {Map as AntvMap} from "@antv/l7-maps";
 import {formatStringByTemplate} from "@/utils/string";
-import {getUUID} from "@/utils/ruoyi";
 import bus from "@/utils/bus";
 
 export let scene: Scene;
+export const imageMap = new Map()
+
+function loadImage(images: any[]) {
+  debugger
+  images.forEach((item: any) => {
+    if (!imageMap.has(item.name)) {
+      imageMap.set(item.name, item.src);
+      scene.addImage(item.name, item.src);
+    }
+  })
+}
 
 /**
  * 初始化地图
  */
-export function init() {
+export function init(config: any) {
   scene = new Scene({
     id: 'mapDiv',
     map: new AntvMap({
@@ -21,6 +31,11 @@ export function init() {
 
   scene.on('loaded', () => {
     loadBaseLayer()
+
+    // 加载图片
+    if (config && config.images && config.images.length > 0) {
+      loadImage(config.images)
+    }
   });
 
   // 地图平移时触发事件
@@ -125,16 +140,17 @@ export function loadMap(option: any) {
 }
 
 function createPointByCongfig(config: any) {
+  console.log('config', config, imageMap)
   const layer = new PointLayer({})
     .source(config.data, config.dataOptions)
-    .size(14)
+    .size(config.size)
     .active(config.emphasis.show);
   setLayerShape(layer, config.shape);
   // 颜色配置
-  setLayerColor(layer, config.color);
+  // setLayerColor(layer, config.color);
   scene.addLayer(layer);
   setMark(config);
-  setPopup(layer, config);
+  // setPopup(layer, config);
 
   // 点击事件
   layer.on('click', (e: any) => {
@@ -143,7 +159,6 @@ function createPointByCongfig(config: any) {
   });
 }
 
-const imageMap = new Map()
 
 function getValueByConditions(data: any, conditions: any, field: any) {
   let condition;
@@ -167,15 +182,7 @@ function getValueByConditions(data: any, conditions: any, field: any) {
   }
 
   if (condition[field] === 'image') {
-    let id;
-    if (imageMap.has(condition.imageSrc)) {
-      id = imageMap.get(condition.imageSrc)
-    } else {
-      id = getUUID()
-      imageMap.set(condition.imageSrc, id);
-      scene.addImage(id, condition.imageSrc);
-    }
-    return id
+    return condition.imageName
   }
 
   return null;
@@ -246,25 +253,9 @@ function getSourceOptions(dataType: any) {
  */
 function setLayerShape(layer: any, config: any) {
   if (config.isConstant) {
-    let shape = config.value
-    if (config.value === 'image') {
-      let id;
-      if (imageMap.has(config.imageSrc)) {
-        id = imageMap.get(config.imageSrc)
-      } else {
-        id = getUUID()
-        imageMap.set(config.imageSrc, id);
-        scene.addImage(id, config.imageSrc);
-      }
-      shape = id
-    }
-    layer.shape(shape)
+    layer.shape(config.value)
   } else {
-    const field = config.field
-    const conditions = config.conditions
-    layer.shape(field, (field: any) => {
-      return getValueByConditions(field, conditions, 'shape');
-    });
+    layer.shape(config.field, config.value)
   }
 }
 
@@ -293,16 +284,16 @@ export function setMark(config: any) {
   const markLayer = new PointLayer({})
     .source(config.data, config.dataOptions)
     .shape(config.label.field, 'text')
-    .size(12)
-    .color('#000')
+    .size(16)
+    .color('#fff')
     .style({
       textAnchor: config.label.position || 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-      textOffset: [0, -60], // 文本相对锚点的偏移量 [水平, 垂直]
+      textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
       spacing: 2, // 字符间距
-      padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-      stroke: '#ffffff', // 描边颜色
-      strokeWidth: 2, // 描边宽度
-      strokeOpacity: 1.0,
+      // padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+      // stroke: '#ffffff', // 描边颜色
+      // strokeWidth: 2, // 描边宽度
+      // strokeOpacity: 1.0,
     });
   scene.addLayer(markLayer);
 }

src/utils/station.ts

@@ -18,7 +18,8 @@ export default [
     isExternalAddress: false,
     path: '',
     sttp: '',
-    detail: '', img: ''
+    detail: '',
+    img: ''
   },
   {
     stcd: '70111400',
@@ -26,19 +27,10 @@ export default [
     lgtd: '118.71691',
     lttd: '29.72391',
     isExternalAddress: true,
-    path: '',
-    sttp: '',
-    detail: '', img: ''
-  },
-  {
-    stcd: '70112100',
-    stnm: '罗桐埠',
-    lgtd: '119.254444',
-    lttd: '29.476389',
-    isExternalAddress: true,
-    path: '',
+    path: 'http://10.8.252.18:8080',
     sttp: '',
-    detail: '', img: ''
+    detail: '',
+    img: ''
   },
   {
     stcd: '71501010',
@@ -46,8 +38,9 @@ export default [
     lgtd: '119.354764',
     lttd: '27.491128',
     isExternalAddress: true,
-    path: '',
+    path: 'http://10.8.252.126:8088',
     sttp: '',
-    detail: '', img: ''
+    detail: '',
+    img: ''
   },
 ]

src/views/Home.vue

@@ -9,6 +9,7 @@ import {getRStLLMaxDate} from "@/api/home";
 import bus from "@/utils/bus";
 import stations from "@/utils/station";
 import {jumpPage} from "@/utils";
+import {copyObj} from "@/utils/ruoyi";
 
 const zmwjianjie = new URL('@/assets/images/zmw_jieshao.jpg', import.meta.url).href
 
@@ -69,7 +70,6 @@ function reloadRight1() {
     legend: {
       type: 'scroll',
       icon: 'circle',
-      data: ['1', '2', '3', '4', '5'],
       selectedMode: false,
       textStyle: {
         color: '#fff'
@@ -196,9 +196,7 @@ function reloadRight3() {
         },
       },
       axisLabel: { //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: '#fff',
-        },
+        color: '#fff',
       },
       axisTick: {show: false,},
       data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
@@ -211,9 +209,7 @@ function reloadRight3() {
       min: value => value.min.toFixed(2),
       axisLabel: {
         margin: 20,
-        textStyle: {
-          color: '#fff',
-        },
+        color: '#fff',
       },
       splitLine: {
         show: true,
@@ -227,9 +223,7 @@ function reloadRight3() {
       type: 'line',
       smooth: true, //是否平滑曲线显示
       lineStyle: {
-        normal: {
-          color: "#3deaff"   // 线条颜色
-        }
+        color: "#3deaff"   // 线条颜色
       },
       data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
     },
@@ -244,6 +238,12 @@ const mapStore = useMapStore()
  * 初始化测站点位
  */
 function initPoints() {
+  const data = copyObj(tableData)
+  data.forEach(s => {
+    const station = stations.find(item => item.stcd === s.stcd)
+    s.jump = !!station
+  })
+
   const option = {
     view: {
       center: [104.114129, 37.550339],
@@ -252,7 +252,7 @@ function initPoints() {
     layers: [
       {
         type: 'point',
-        data: tableData,
+        data: data,
         dataOptions: {
           parser: {
             type: 'json',
@@ -270,19 +270,13 @@ function initPoints() {
             show: true
           }
         },
-        size: 16,
-        color: {
-          isConstant: true,
-          value: '#004ef8',
-          field: null,
-          conditions: []
-        },
+        size: [50, 50],
         shape: {
-          isConstant: true,
-          value: 'circle',
-          imageSrc: null,
-          field: null,
-          conditions: []
+          isConstant: false,
+          field: 'jump',
+          value: value => {
+            return value ? 'stationPointBlue' : 'stationPointGray'
+          },
         },
         popup: {
           enabled: true,