增加 CAD反差图

README.md

@@ -3,21 +3,23 @@
 1. '/' 多人画板
 2. '/chart' echart 码数表
 ![image](./public/imgs/2.png)
-3. '/edit' 富文本编辑
+3. '/edit' 富文本编辑-Demo
 ![image](./public/imgs/3.png)
-4. '/fly' 二维动态导向
+4. '/fly' 二维动态导向-Demo
 ![image](./public/imgs/4.png)
-5. '/plantool' 平面图缩放
+5. '/plantool' 平面图缩放-Demo
 ![image](./public/imgs/5.png)
-6. '/draw' canvas画图
+6. '/draw' canvas画图-Demo
 ![image](./public/imgs/6.png)
-7. '/face' 2D SVG
+7. '/face' 2D SVG-Demo
 ![image](./public/imgs/7.png)
-8. '/leaflet' leaflet画图
+8. '/leaflet' leaflet画图-Demo
 ![image](./public/imgs/8.png)
-9. '/three' threejs 3D
+9. '/three' threejs 3D-Demo
 ![image](./public/imgs/9.png)
-10. '/process' svg-进度
+10. '/process' svg-进度-Demo
 ![image](./public/imgs/10.png)
 11. '/video' 荧石视频SDK-Demo
-![image](./public/imgs/11.png)
+![image](./public/imgs/11.png)
+12. '/geo' CAD瓦片反差图-Demo
+![image](./public/imgs/12.png)

src/pages/App.vue

@@ -27,16 +27,17 @@ const themeOverrides = Theme
 console.log(
   `More:
 1. '/' 多人画板
-2. '/chart' echart 码数表
-3. '/edit' 富文本编辑
-4. '/fly' SVG二维动态导向
-5. '/plantool' openseadragon平面图缩放
-6. '/draw' canvas画图
-7. '/face' face SVG画图
-8. '/leaflet' leaflet画图
-9. '/three' threejs 3D画图
-10. '/process' process SVG画图
-11. '/video' 荧石视频SDK-Demo`
+2. '/chart' echart 码数表-Demo
+3. '/edit' 富文本编辑-Demo
+4. '/fly' SVG二维动态导向-Demo
+5. '/plantool' openseadragon平面图缩放-Demo
+6. '/draw' canvas画图-Demo
+7. '/face' face SVG画图-Demo
+8. '/leaflet' leaflet画图-Demo
+9. '/three' threejs 3D画图-Demo
+10. '/process' process SVG画图-Demo
+11. '/video' 荧石视频SDK-Demo
+12. '/geo' CAD瓦片反差图-Demo`
 )
 </script>
 <style>

src/pages/views/geo/index.vue

@@ -0,0 +1,689 @@
+<template>
+  <div class="geo">
+    <div id="openseadragon" />
+    <div class="geo-leng">
+      <template
+        v-for="(item, index) in lengs"
+        :key="index"
+      >
+        <div>
+          <div>{{ item.name }}：</div>
+          <div>
+            <template
+              v-for="(itm, ids) in item.children"
+              :key="ids"
+            >
+              <div>
+                <span :style="`background:${itm.itemStyle.color};`" />
+                <span>{{ itm.name }}{{ index === 0 ? '级' : '' }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div
+      v-if="marker.show"
+      class="geo-marker"
+      :style="`left:${marker.x}px;top:${marker.y}px;`"
+    >
+      <div class="geo-marker-txt">
+        <div>
+          <p>当前桩号:<span>{{ marker.data.m }}</span></p>
+          <p>{{ marker.data.n }}<span>{{ marker.data.d }}</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, onUnmounted, ref } from 'vue'
+import OpenSeadragon from 'openseadragon'
+import { svgOverlay } from '@/assets/js/openseadragon-svg-overlay'
+
+const lengs = [
+  {
+    name: '围岩级别',
+    children: [
+      { name: 'I', itemStyle: { color: '#163E99' } },
+      { name: 'II', itemStyle: { color: '#0DB2F5' } },
+      { name: 'III', itemStyle: { color: '#00B342' } },
+      { name: 'IV', itemStyle: { color: '#FDFE00' } },
+      { name: 'V', itemStyle: { color: '#FF0000' } },
+      { name: 'VI', itemStyle: { color: '#FF0093' } }
+    ]
+  },
+  {
+    name: '地下水状态',
+    children: [
+      { name: '无', itemStyle: { color: '#808080' } },
+      { name: '潮湿状出水', itemStyle: { color: '#3EEDE7' } },
+      { name: '点滴状出水', itemStyle: { color: '#0EB83A' } },
+      { name: '淋雨状出水', itemStyle: { color: '#EAFF56' } },
+      { name: '涌流状出水', itemStyle: { color: '#BDB76B' } },
+      { name: '潮湿~点滴状出水', itemStyle: { color: '#FFFACD' } },
+      { name: '潮湿~淋雨状出水', itemStyle: { color: '#FFD700' } },
+      { name: '点滴状~淋雨状出水', itemStyle: { color: '#DAA520' } },
+      { name: '淋雨状~涌流状出水', itemStyle: { color: '#FFA500' } }
+    ]
+  },
+  {
+    name: '岩性',
+    children: [
+      { name: '凝灰岩', itemStyle: { color: '#177CB0' } },
+      { name: '片岩', itemStyle: { color: '#00E09E' } },
+      { name: '凝灰质砂岩', itemStyle: { color: '#EAFFD0' } },
+      { name: '粉砂岩', itemStyle: { color: '#FFB61E' } },
+      { name: '泥岩', itemStyle: { color: '#F38181' } },
+      { name: '闪长岩', itemStyle: { color: '#8EA5FF' } },
+      { name: '花岗岩', itemStyle: { color: '#93DBFF' } }
+    ]
+  },
+  {
+    name: '围岩完整性',
+    children: [
+      { name: '较差', itemStyle: { color: '#44CEF6' } },
+      { name: '较差~一般', itemStyle: { color: '#FFABE5' } },
+      { name: '一般', itemStyle: { color: '#40DE5A' } },
+      { name: '一般~较好', itemStyle: { color: '#7C73E6' } },
+      { name: '较好', itemStyle: { color: '#FA8C35' } }
+    ]
+  }
+]
+const viewer = ref(null as any)
+const overlay = ref(null as any)
+const cadConfig = ref({
+  cadHeight: 0,
+  cadPath: '',
+  cadWidth: 0,
+  tunnelPath: '',
+  tunnelScale: 0,
+  tunnelWidth: 50,
+  totalRing: 0
+})
+const tunnelPath = ref()
+const marker = ref({
+  show: false,
+  data: { n: '', m: '', d: '' },
+  x: 0,
+  y: 0
+})
+
+//  格式化掌子面里程
+const mileageFormat = (num: any, type = '') => {
+  if (typeof num === 'number') {
+    const a = Math.floor((num as number) / 1000).toString()
+    const ab = parseFloat(((num as number) % 1000).toFixed(1))
+    const b = Math.floor((num as number) % 1000).toString()
+    const c = b.length === 1 ? `00${ab}` : b.length === 2 ? `0${ab}` : ab
+    return `${type || ''}${a}+${c}`
+  }
+
+  if (!type && (typeof num === 'string')) {
+    const list = num.split('+')
+    const a = Number(list[0].replace(/[^0-9]/ig, '')) * 1000
+    const b = Number(list[1]) || 0
+    return a + b
+  }
+
+  return num
+}
+
+// 获取隧道路径
+function getTunnelPath(SVGPATH: string) {
+  fetch(import.meta.env.VITE_PROXY_URL + SVGPATH).then((res) => res.text()).then((txt) => {
+    const objE = document.createElement('div')
+    objE.innerHTML = txt
+    let svg = objE.lastElementChild as Element
+    svg = document.importNode(svg, true)
+    const path = svg.getElementsByTagName('path')
+    // 隧道比例默认SVG宽度
+    const num = +svg.getAttribute('width')!.replace(/[^0-9]/gi, '')
+    if (num) cadConfig.value.tunnelScale = num
+    tunnelPath.value = path
+    initViewer()
+  })
+}
+// 获取cad配置
+async function getCadConfig() {
+  const data = {
+    cadHeight: 32768,
+    cadPath: '/public/file/cadConfig/c72e18448feb4a4889eb8e904dce0058',
+    cadProfileConfigId: 22,
+    cadWidth: 196608,
+    svgPath: '/public/file/svgConfig/20240927/34f14622a27d4ce898f832699e5a1839.svg',
+    svgScale: 24576,
+    svgWidth: 15,
+    workAreaId: '742abb04c89b4449a681c655cbd09636'
+  }
+  cadConfig.value.cadWidth = data.cadWidth
+  cadConfig.value.cadHeight = data.cadHeight
+  cadConfig.value.cadPath = data.cadPath
+  cadConfig.value.tunnelPath = data.svgPath
+  cadConfig.value.tunnelScale = data.svgScale
+  getTunnelPath(cadConfig.value.tunnelPath)
+}
+// 画环
+function drawRing(i: number, c: string, y: number, w = 1, txt = false) {
+  const length = tunnelPath.value[0].getTotalLength()
+  const Pnt = tunnelPath.value[0].getPointAtLength(length * (1 / cadConfig.value.totalRing) * i) // 每环位置
+  const ringWidth = (1 / cadConfig.value.totalRing) * length * w // 每环宽度
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+  rect.setAttributeNS(null, 'x', `${Pnt.x}`)
+  rect.setAttributeNS(null, 'y', `${y}`)
+  rect.setAttributeNS(null, 'height', `${cadConfig.value.tunnelWidth}`)
+  rect.setAttributeNS(null, 'width', `${ringWidth}`)
+  rect.setAttributeNS(null, 'data-user', `${123}`)
+  rect.setAttributeNS(null, 'transform', `translate(0 0) scale(${1 / cadConfig.value.tunnelScale})`)
+  if (txt) {
+    rect.setAttributeNS(null, 'fill', 'none')
+    rect.setAttributeNS(null, 'stroke', c || 'none')
+    rect.setAttributeNS(null, 'stroke-width', '10')
+  } else {
+    rect.setAttributeNS(null, 'fill', c || 'none')
+  }
+  return rect
+}
+// 画文字
+function drawTxt(t: string, y: number, x = 1950, s = 60, anchor = 'end') {
+  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+  text.innerHTML = t
+  text.setAttributeNS(null, 'x', `${x}`)
+  text.setAttributeNS(null, 'y', `${y}`)
+  text.setAttributeNS(null, 'fill', 'white')
+  text.setAttributeNS(null, 'font-size', `${s}`)
+  text.setAttributeNS(null, 'font-weight', '600')
+  text.setAttributeNS(null, 'text-anchor', anchor)
+  text.setAttribute('transform', `scale(${1 / cadConfig.value.tunnelScale}) `)
+  return text
+}
+// 初始化cad
+svgOverlay(OpenSeadragon)
+function initViewer() {
+  if (viewer.value) {
+    viewer.value.removeAllHandlers()
+    viewer.value.destroy()
+    viewer.value = null
+    overlay.value = null
+  }
+  // 获取CAD切图地址
+  viewer.value = OpenSeadragon({
+    id: 'openseadragon',
+    showNavigationControl: true,
+    showZoomControl: false,
+    showHomeControl: false,
+    showFullPageControl: false,
+    showFlipControl: false,
+    showRotationControl: false,
+    zoomPerClick: 1,
+    navigationControlAnchor: OpenSeadragon.ControlAnchor.TOP_LEFT,
+    showNavigator: false,
+    navigatorPosition: 'BOTTOM_RIGHT',
+    navigatorSizeRatio: 0.125,
+    minZoomLevel: 1,
+    maxZoomLevel: 64,
+    defaultZoomLevel: 1,
+    debugMode: false,
+    visibilityRatio: 1.0,
+    constrainDuringPan: false,
+    tileSources: {
+      height: cadConfig.value.cadHeight,
+      width: cadConfig.value.cadWidth,
+      tileSize: 512,
+      minLevel: 9,
+      maxLevel: 15,
+      getTileUrl(level: number, x: number, y: number) {
+        level -= 9
+        level = 2 ** level
+        return `${import.meta.env.VITE_PROXY_URL + cadConfig.value.cadPath}/${level}/${x}_${y}.jpg`
+      }
+    }
+  })
+  overlay.value = viewer.value.svgOverlay().node()
+  // 改反差
+  const canvas = document.querySelector('#openseadragon canvas') as any
+  canvas.style.filter = 'invert(100%)'
+  // 事件
+  viewer.value.addHandler('zoom', () => {
+    marker.value.show = false
+  })
+  // 获取岩性数据
+  getSurData()
+}
+// 获取地勘信息
+async function getSurData() {
+  const data = [
+    {
+      startStake: 105865.000,
+      endStake: 105805.000,
+      lithology: '凝灰岩',
+      rockComplete: '较差~一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '338',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 106020.000,
+      endStake: 105865.000,
+      lithology: '凝灰岩',
+      rockComplete: '较好',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '358',
+      grade: 'III'
+
+    },
+    {
+      startStake: 106515.000,
+      endStake: 106020.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '417',
+      grade: 'III'
+
+    },
+    {
+      startStake: 106890.000,
+      endStake: 106515.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '444',
+      grade: 'III'
+
+    },
+    {
+      startStake: 107045.000,
+      endStake: 106890.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '417',
+      grade: 'III'
+
+    },
+    {
+      startStake: 107105.000,
+      endStake: 107045.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '302',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 107265.000,
+      endStake: 107105.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '417',
+      grade: 'III'
+
+    },
+    {
+      startStake: 107450.000,
+      endStake: 107265.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '370',
+      grade: 'III'
+
+    },
+    {
+      startStake: 107580.000,
+      endStake: 107450.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '302',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 107765.000,
+      endStake: 107580.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '370',
+      grade: 'III'
+
+    },
+    {
+      startStake: 108200.000,
+      endStake: 107765.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般～较好',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '420',
+      grade: 'III'
+
+    },
+    {
+      startStake: 108385.000,
+      endStake: 108200.000,
+      lithology: '凝灰岩',
+      rockComplete: '较差～一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '370',
+      grade: 'III'
+
+    },
+    {
+      startStake: 108465.000,
+      endStake: 108385.000,
+      lithology: '凝灰岩',
+      rockComplete: '较差～ 一般',
+      groundwaterDevelopment: '点滴状~淋雨状出水',
+      bq: '302',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 108575.000,
+      endStake: 108465.000,
+      lithology: '凝灰岩',
+      rockComplete: '较好',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '370',
+      grade: 'III'
+
+    },
+    {
+      startStake: 108800.000,
+      endStake: 108575.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '400',
+      grade: 'III'
+
+    },
+    {
+      startStake: 108975.000,
+      endStake: 108800.000,
+      lithology: '凝灰岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '369',
+      grade: 'III'
+
+    },
+    {
+      startStake: 109090.000,
+      endStake: 108975.000,
+      lithology: '凝片岩',
+      rockComplete: '较差～ 一般',
+      groundwaterDevelopment: '点滴状~淋雨状出水',
+      bq: '266',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 109225.000,
+      endStake: 109090.000,
+      lithology: '凝片岩',
+      rockComplete: '较差～ 一般',
+      groundwaterDevelopment: '点滴状~淋雨状出水',
+      bq: '327',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 109645.000,
+      endStake: 109225.000,
+      lithology: '片岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '386',
+      grade: 'III'
+
+    },
+    {
+      startStake: 109715.000,
+      endStake: 109645.000,
+      lithology: '片岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '潮湿~点滴状出水',
+      bq: '364',
+      grade: 'III'
+
+    },
+    {
+      startStake: 109810.000,
+      endStake: 109715.000,
+      lithology: '片岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '点滴状~淋雨状出水',
+      bq: '266',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 109870.000,
+      endStake: 109810.000,
+      lithology: '片岩',
+      rockComplete: '一般',
+      groundwaterDevelopment: '点滴状~淋雨状出水',
+      bq: '307',
+      grade: 'IV'
+
+    },
+    {
+      startStake: 109900.000,
+      endStake: 109870.000,
+      lithology: '片岩',
+      rockComplete: '较差',
+      groundwaterDevelopment: '淋雨状出水',
+      bq: '<250',
+      grade: 'V'
+
+    }
+
+  ] as { w: number, length: number, endStake: number, startStake: number, bq: string, grade: string, groundwaterDevelopment: string, lithology: string, rockComplete: string }[]
+
+  // 环距
+  for (let z = 0; z < data.length; z++) {
+    const el = data[z]
+    // 颜色匹配
+    const gradeColor = lengs[0].children.find((es) => es.name === el.grade)?.itemStyle.color || ''
+    const groundwaterDevelopmentColor = lengs[1].children.find((es) => es.name === el.groundwaterDevelopment)?.itemStyle.color || ''
+    const lithologyColor = lengs[2].children.find((es) => es.name === el.lithology)?.itemStyle.color || ''
+    const rockCompleteColor = lengs[3].children.find((es) => es.name === el.rockComplete)?.itemStyle.color || ''
+    el.w = (el.endStake - el.startStake)
+    cadConfig.value.totalRing += (el.endStake - el.startStake)
+    el.length = cadConfig.value.totalRing
+    // 画颜色段
+    const rectGrade = drawRing((el.length - el.w), gradeColor, cadConfig.value.cadHeight / 14, el.w)
+    const rectWater = drawRing((el.length - el.w), groundwaterDevelopmentColor, cadConfig.value.cadHeight / 13.6, el.w)
+    const rectRock = drawRing((el.length - el.w), rockCompleteColor, cadConfig.value.cadHeight / 13.2, el.w)
+    const rectLit = drawRing((el.length - el.w), lithologyColor, cadConfig.value.cadHeight / 12.8, el.w)
+    const rectBq = drawRing((el.length - el.w), '#2D6293', cadConfig.value.cadHeight / 12.4, el.w, true)
+    const length = tunnelPath.value[0].getTotalLength()
+    const Pnt = tunnelPath.value[0].getPointAtLength(length * (1 / cadConfig.value.totalRing) * (el.length - el.w + (el.w / 2)))
+    const rectTxt = drawTxt(el.bq, cadConfig.value.cadHeight / 12.23, Pnt.x, 30, 'middle')
+    const meligeTxt = drawTxt(mileageFormat(el.startStake), cadConfig.value.cadHeight / 12, Pnt.x, 30, 'middle')
+    overlay.value.append(rectGrade, rectWater, rectRock, rectLit, rectBq, rectTxt, meligeTxt)
+    viewer.value.svgOverlay().onClick(rectGrade, (e: any) => {
+      marker.value = {
+        show: true,
+        data: {
+          n: '围岩级别：',
+          m: mileageFormat(el.startStake),
+          d: el.grade
+        },
+        x: e.originalEvent.pageX,
+        y: e.originalEvent.pageY - 94
+      }
+    })
+    viewer.value.svgOverlay().onClick(rectWater, (e: any) => {
+      marker.value = {
+        show: true,
+        data: {
+          n: '地下水出水状态：',
+          m: mileageFormat(el.startStake),
+          d: el.groundwaterDevelopment
+        },
+        x: e.originalEvent.pageX,
+        y: e.originalEvent.pageY - 94
+      }
+    })
+    viewer.value.svgOverlay().onClick(rectRock, (e: any) => {
+      marker.value = {
+        show: true,
+        data: {
+          n: '围岩完整性：',
+          m: mileageFormat(el.startStake),
+          d: el.rockComplete
+        },
+        x: e.originalEvent.pageX,
+        y: e.originalEvent.pageY - 94
+      }
+    })
+    viewer.value.svgOverlay().onClick(rectLit, (e: any) => {
+      marker.value = {
+        show: true,
+        data: {
+          n: '岩性：',
+          m: mileageFormat(el.startStake),
+          d: el.lithology
+        },
+        x: e.originalEvent.pageX,
+        y: e.originalEvent.pageY - 94
+      }
+    })
+  }
+
+  // 文字
+  const txtGrade = drawTxt('围岩级别', cadConfig.value.cadHeight / 14)
+  const txtWater = drawTxt('地下水出水状态', cadConfig.value.cadHeight / 13.6)
+  const txtRock = drawTxt('围岩完整性', cadConfig.value.cadHeight / 13.2)
+  const txtLit = drawTxt('岩性', cadConfig.value.cadHeight / 12.8)
+  const txtBq = drawTxt('[BQ]值', cadConfig.value.cadHeight / 12.4)
+  overlay.value.append(txtGrade, txtWater, txtRock, txtLit, txtBq)
+}
+onMounted(() => {
+  document.title = 'CAD瓦片反差图'
+  getCadConfig()
+})
+
+onUnmounted(() => {
+  if (viewer.value) {
+    viewer.value.removeAllHandlers()
+    viewer.value.destroy()
+    viewer.value = null
+    overlay.value = null
+  }
+})
+</script>
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.geo {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: black;
+  padding: 20px;
+
+  #openseadragon {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-leng {
+    position: absolute;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    width: 80%;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    font-size: 11px;
+    top: 20%;
+    left: 20px;
+    color: white;
+
+    &>div {
+      display: flex;
+      align-items: center;
+      width: 65%;
+
+      &:nth-child(odd) {
+        width: 35%;
+      }
+
+      &>div:first-child {
+        width: auto;
+        margin-right: 10px;
+      }
+
+      &>div:last-child {
+        display: flex;
+        flex: 1;
+
+        &>div {
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+
+          &>span {
+            &:first-child {
+              display: inline-block;
+              width: 6px;
+              height: 6px;
+              margin-right: 5px;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+  &-marker {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 244px;
+    height: 94px;
+    background: url(./img/28.png) no-repeat left top;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: none;
+    color: white;
+
+    &-txt {
+      width: 188px;
+      height: 63px;
+      box-sizing: border-box;
+      padding: 5px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+
+      &>div {
+
+        &>p:last-child>span,
+        &>p:first-child>span {
+          margin-left: 5px;
+        }
+
+        &>p:last-child>span {
+          color: #44CEF6;
+        }
+      }
+    }
+
+  }
+}
+</style>

src/pages/views/geo/route.ts

@@ -0,0 +1,9 @@
+import { RouteRecordRaw } from 'vue-router'
+import geo from './index.vue'
+export default {
+  path: '/geo',
+  meta: {
+    authorize: true
+  },
+  component: geo
+} as RouteRecordRaw

src/pages/views/planTool/index.vue

@@ -42,7 +42,7 @@
 <script setup>
 import { onMounted, ref, onUnmounted } from 'vue'
 import OpenSeadragon from 'openseadragon'
-import { svgOverlay } from './assets/js/openseadragon-svg-overlay'
+import { svgOverlay } from '@/assets/js/openseadragon-svg-overlay'
 
 // 数据
 const scale = ref(0)