HuaTaiSpecialGasMonitor.git

parent: 1289c408 | patch | commit | ignore whitespace

zhouwx

2025-12-19 9d389dee9dfb78bf4a57ff41ba11d61c65134442

地图修改

7 files modified

1 files added

	index.html	16 ●●●●● patch \| view \| raw \| blame \| history
	package.json	2 ●●●●● patch \| view \| raw \| blame \| history
	src/types/areaManage.d.ts	2 ●●●●● patch \| view \| raw \| blame \| history
	src/views/basicDataManage/areaManage/component/areaDialog.vue	2 ●●●●● patch \| view \| raw \| blame \| history
	src/views/basicDataManage/areaManage/index.vue	2 ●●●●● patch \| view \| raw \| blame \| history
	src/views/bigScreen/components/map.vue	6 ●●●●● patch \| view \| raw \| blame \| history
	src/views/bigScreen/components/mapNew.vue	331 ●●●●● patch \| view \| raw \| blame \| history
	src/views/bigScreen/components/screen.vue	6 ●●●●● patch \| view \| raw \| blame \| history

 index.html

@@ -17,15 +17,15 @@
    <body>
        <div id="app"></div>
        <script type="text/javascript">
            var _hmt = _hmt || [];
            (function () {
                var hm = document.createElement('script');
                hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(hm, s);
            })();
            // var _hmt = _hmt || [];
            // (function () {
            //     var hm = document.createElement('script');
            //     hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
            //     var s = document.getElementsByTagName('script')[0];
            //     s.parentNode.insertBefore(hm, s);
            // })();
        </script>
        <script type="module" src="/src/main.ts"></script>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>
<!--        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>-->
    </body>
</html>

 package.json

@@ -36,7 +36,7 @@
    "sortablejs": "^1.15.0",
    "splitpanes": "^3.1.1",
    "vue": "^3.2.36",
    "vue-baidu-map-3x": "^1.0.35",

    "vue-clipboard3": "^2.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.10",

 src/types/areaManage.d.ts

@@ -44,4 +44,4 @@
        lat: string;
    };
    lngFormRules:{},
}
}

 src/views/basicDataManage/areaManage/component/areaDialog.vue

@@ -198,4 +198,4 @@
    box-shadow: none;
    margin-left: -3px;
}
</style>
</style>

 src/views/basicDataManage/areaManage/index.vue

@@ -167,4 +167,4 @@
</script>
<style scoped lang="scss">

</style>
</style>

 src/views/bigScreen/components/map.vue

@@ -58,7 +58,7 @@
import screen from './components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';
import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'
// import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'

// 定义接口来定义对象的类型
interface TableDataState {
@@ -87,7 +87,7 @@
}
export default defineComponent({
  name: 'map',
  components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
  // components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
  setup() {
    const state = reactive<TableDataState>({
      polygonPath1: [],
@@ -216,4 +216,4 @@
  text-align: center;
  padding: 10px;
}
</style>
</style>

 src/views/bigScreen/components/mapNew.vue

New file
@@ -0,0 +1,331 @@
<template>
<!--  <div className="lnglat-info" style="padding: 10px; font-size: 16px;">-->
<!--    点击地图获取的经纬度：-->
<!--    <span style="color: #1890ff; font-weight: bold;">-->
<!--      {{ clickLngLat.lng ? `${clickLngLat.lng.toFixed(6)}, ${clickLngLat.lat.toFixed(6)}` : '未点击' }}-->
<!--    </span>-->
<!--  </div>-->

  <div id="amap-container" className="amap-container"></div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

// 1. 定义地图实例、点击经纬度、覆盖物存储数组（用于卸载销毁）
const mapInstance = ref(null)
let markerInstance = ref(null)
const clickLngLat = ref({lng: null, lat: null})
const clickHandler = ref(null)
const mapOverlays = ref([])
const IMAGE_URL = '/directions.png'
const IMAGE_SIZE = [200, 200]


const areaData = [
  {
    number: "1",
    name: "1#电石库",

    // 区块的经纬度范围（多边形顶点，需自行校准）
    path: [
      [87.672802, 43.938253],
      [87.673339, 43.938416],
      [87.673737, 43.937692],
      [87.673177, 43.937565]

    ],
    color: "#ffff00",
    boxTextPos: [87.673139, 43.938233],
    textPos: [87.673021, 43.937968],
    // 箭头的路径（起点→终点）
    arrowPath: [
      [87.673784, 43.937654],
      [87.675316, 43.938126]
    ],
    arrowPathTop: [
      [87.673847, 43.937731],
      [87.673784, 43.937654],
      [87.673784, 43.937654],
      [87.673896, 43.937634],
    ]
  },
  {
    number: "2",
    name: "渣浆清液池",
    path: [
      [87.672249, 43.937010],
      [87.673610, 43.937440],
      [87.674062, 43.936716],
      [87.672639, 43.936326],
    ],
    color: "#061959", // 蓝色
    boxTextPos: [87.672914, 43.937041],
    textPos: [87.672770, 43.936821],
    arrowPath: [
      [87.673741, 43.937557],
      [87.674395, 43.936358]
    ],
    arrowPathTop: [
      [87.673689, 43.937484],
      [87.673741, 43.937557],
      [87.673741, 43.937557],
      [87.673834, 43.937520],
    ],
  },
  {
    number: "3",
    name: "中间罐区",
    path: [
      [87.673840, 43.937568],
      [87.675365, 43.938071],
      [87.675960, 43.936955],
      [87.674426, 43.936479]
    ],
    color: "#048599",
    boxTextPos: [87.674859, 43.937563],
    textPos: [87.674609, 43.937334]
  },
  {
    number: "4",
    name: "3#冷冻",
    path: [
      [87.676018, 43.937887],
      [87.676807, 43.938102],
      [87.677192, 43.937500],
      [87.676358, 43.937237]
    ],
    color: "green",
    boxTextPos: [87.676434, 43.937979],
    textPos: [87.676379, 43.937728]
  },
  {
    number: "5",
    name: "新增浓缩池",
    path: [
      [87.676222, 43.937022],
      [87.677306, 43.937391],
      [87.677502, 43.936910],
      [87.676401, 43.936585]
    ],
    color: "3eec34",
    boxTextPos: [87.676916, 43.937187],
    textPos: [87.676646, 43.936978]
  },
  {
    number: "6",
    name: "3#精馏",
    path: [
      [87.675792, 43.938354],
      [87.676530, 43.938581],
      [87.676715, 43.938200],
      [87.676004, 43.937952]
    ],
    color: "ff52e7",
    boxTextPos: [87.676110, 43.938477],
    textPos: [87.675993, 43.938254]
  },
  {
    number: "7",
    name: "3#压缩",
    path: [
      [87.674907, 43.938814],
      [87.676179, 43.939139],
      [87.676420, 43.938709],
      [87.675199, 43.9382997]
    ],
    color: "0055eb",
    boxTextPos: [87.675650, 43.938949],
    textPos: [87.675500, 43.938733]
  },
  {
    number: "8",
    name: "2#精馏",
    path: [
      [87.674439, 43.938395],
      [87.674910, 43.938539],
      [87.675100, 43.938179],
      [87.674625, 43.938054]
    ],
    color: "11feee",
    boxTextPos: [87.674695, 43.938508],
    textPos: [87.674566, 43.938284]
  },
  {
    number: "9",
    name: "1#精馏",
    path: [
      [87.673888, 43.938249],
      [87.674334, 43.938358],
      [87.674523, 43.938037],
      [87.674037, 43.937911],
    ],
    color: "b330d2",
    boxTextPos: [87.674116, 43.938315],
    textPos: [87.674040, 43.938138]
  },
]


// 3. 初始化高德地图 + 绘制覆盖物
const initAMap = async () => {
  try {
    window._AMapSecurityConfig = {
      securityJsCode: '75ffdb279adfda7feb06d74b3a0352d6',
    }
    const AMap = await AMapLoader.load({
      key: '65cb3e4cbf9f62fd3500cc0f61146cf4',
      version: '2.0',
      plugins: ['AMap.MapType']
    })

    // 初始化地图
    mapInstance.value = new AMap.Map('amap-container', {
      viewMode: "3D",
      zoom: 17.3,
      center: [87.675600, 43.9376800],
      resizeEnable: true,
    })
    mapInstance.value.addControl(new AMap.MapType({defaultType: 1}))
    const customIcon = new AMap.Icon({
      size: new AMap.Size(...IMAGE_SIZE),
      image: IMAGE_URL, // 图片地址
      imageSize: new AMap.Size(...IMAGE_SIZE)
    })
    markerInstance.value = new AMap.Marker({
      position:  [87.672260, 43.938300], // 图片放置的经纬度
      icon: customIcon, // 使用自定义图片图标
      anchor: 'bottom-center' // 图标锚点（图片底部中心对准经纬度点，定位更准确）
    })
    mapInstance.value.add(markerInstance.value)

    areaData.forEach(area => {
      const polygon = new AMap.Polygon({
        path: area.path,
        fillColor: area.color,
        fillOpacity: 0.5,
        strokeColor: area.color,
        strokeWeight: 2
      })
      mapInstance.value.add(polygon)
      mapOverlays.value.push(polygon)

      const boxText = new AMap.Text({
        position: area.boxTextPos,
        text: `
    <div style="text-align: center; line-height: 1.2;width: 9px;">
      <span style="font-size: 16px; font-weight: bold; color: #000000;">${area.number}</span>
    </div>
  `,

        style: {
          padding:'0',
          background: '#ffffff',
          border: '1px solid #ff0000',
          color: '#000000'
        }
      })
      mapInstance.value.add(boxText)
      mapOverlays.value.push(boxText)

      const text = new AMap.Text({
        position: area.textPos,
        text: `${area.name}\n${area.distance || ''}`,
        style: {
          background: 'transparent',
          border: '1px solid white',
          fontSize: '12px',
          color: '#ffffff',
          fontWeight: 'bold',
        }
      })
      mapInstance.value.add(text)
      mapOverlays.value.push(text)
      if (area.arrowPath) {
        // 箭头折线
        const arrowLine = new AMap.Polyline({
          path: area.arrowPath,
          strokeColor: '#ff0000',
          strokeWeight: 3,
          lineCap: 'round',
          strokeStyle: 'solid',
          strokeOpacity: 1,
        })
        mapInstance.value.add(arrowLine)
        mapOverlays.value.push(arrowLine)
        const arrowLineTop = new AMap.Polyline({
          path: area.arrowPathTop,
          strokeColor: '#ff0000',
          strokeWeight: 4,
          lineCap: 'round',
          strokeStyle: 'solid',
          strokeOpacity: 1,
        })
        mapInstance.value.add(arrowLineTop)
        mapOverlays.value.push(arrowLineTop)

        const arrowText = new AMap.Marker({
          position:[87.673389, 43.937851],
          content: '<div style="width:100px;background: transparent; border: none;font-weight: 600; color: #ff0000; font-size: 13px;">155m 方位1</div>',
        })
        mapInstance.value.add(arrowText)
        mapOverlays.value.push(arrowText)

        const arrowTextTwo = new AMap.Marker({
          position:[87.674435, 43.936500],
          content: '<div style="width:100px;background: transparent; border: none;font-weight: 600; color: #ff0000; font-size: 13px;">145m 方位2</div>',
        })
        mapInstance.value.add(arrowTextTwo)
        mapOverlays.value.push(arrowTextTwo)


      }
    })

    // clickHandler.value = (e) => {
    //   const {lng, lat} = e.lnglat
    //   clickLngLat.value = {lng, lat}
    //   console.log('点击位置经纬度：', `经度：${lng.toFixed(6)}，纬度：${lat.toFixed(6)}`)
    // }
    // mapInstance.value.on('click', clickHandler.value)

  } catch (error) {
    console.error('高德地图加载失败：', error)
  }
}


// 4. 组件生命周期
onMounted(() => {
  initAMap()
})

onUnmounted(() => {
  // 销毁地图实例 + 移除点击事件 + 销毁所有覆盖物
  if (mapInstance.value) {
    // 移除点击事件
    if (clickHandler.value) {
      mapInstance.value.off('click', clickHandler.value)
    }
    // 销毁所有覆盖物
    mapOverlays.value.forEach(overlay => {
      mapInstance.value.remove(overlay)
    })
    // 销毁地图
    mapInstance.value.destroy()
    mapInstance.value = null
  }
})
</script>

<style scoped>
.amap-container {
  width: 100%;
  height: 600px;
}

::v-deep(.amap-ctrl-list-layer) {
  display: none !important;
}
</style>

 src/views/bigScreen/components/screen.vue

@@ -284,8 +284,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
import Map from './map.vue'
import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import Map from './mapNew.vue'
// import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";

@@ -356,7 +356,7 @@

export default defineComponent({
    name: 'bigScreen',
    components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
    components: {Map },
    props:{
      isFull: Boolean
    },

			@@ -17,15 +17,15 @@
			<body>
			<div id="app"></div>
			<script type="text/javascript">
			var _hmt = _hmt \|\| [];
			(function () {
			var hm = document.createElement('script');
			hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(hm, s);
			})();
			// var _hmt = _hmt \|\| [];
			// (function () {
			// var hm = document.createElement('script');
			// hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
			// var s = document.getElementsByTagName('script')[0];
			// s.parentNode.insertBefore(hm, s);
			// })();
			</script>
			<script type="module" src="/src/main.ts"></script>
			<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>
			<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>-->
			</body>
			</html>

			@@ -36,7 +36,7 @@
			"sortablejs": "^1.15.0",
			"splitpanes": "^3.1.1",
			"vue": "^3.2.36",
			"vue-baidu-map-3x": "^1.0.35",

			"vue-clipboard3": "^2.0.0",
			"vue-grid-layout": "^3.0.0-beta1",
			"vue-i18n": "^9.1.10",

			@@ -198,4 +198,4 @@
			box-shadow: none;
			margin-left: -3px;
			}
			</style>
			</style>

			@@ -167,4 +167,4 @@
			</script>
			<style scoped lang="scss">

			</style>
			</style>

			@@ -58,7 +58,7 @@
			import screen from './components/screen.vue'
			import screenfull from 'screenfull'
			import { ElMessage, ElMessageBox } from 'element-plus';
			import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'
			// import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'

			// 定义接口来定义对象的类型
			interface TableDataState {
			@@ -87,7 +87,7 @@
			}
			export default defineComponent({
			name: 'map',
			components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
			// components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
			setup() {
			const state = reactive<TableDataState>({
			polygonPath1: [],
			@@ -216,4 +216,4 @@
			text-align: center;
			padding: 10px;
			}
			</style>
			</style>

New file
			@@ -0,0 +1,331 @@
			<template>
			<!-- <div className="lnglat-info" style="padding: 10px; font-size: 16px;">-->
			<!-- 点击地图获取的经纬度：-->
			<!-- <span style="color: #1890ff; font-weight: bold;">-->
			<!-- {{ clickLngLat.lng ? `${clickLngLat.lng.toFixed(6)}, ${clickLngLat.lat.toFixed(6)}` : '未点击' }}-->
			<!-- </span>-->
			<!-- </div>-->

			<div id="amap-container" className="amap-container"></div>
			</template>

			<script setup>
			import {ref, onMounted, onUnmounted} from 'vue'
			import AMapLoader from '@amap/amap-jsapi-loader'

			// 1. 定义地图实例、点击经纬度、覆盖物存储数组（用于卸载销毁）
			const mapInstance = ref(null)
			let markerInstance = ref(null)
			const clickLngLat = ref({lng: null, lat: null})
			const clickHandler = ref(null)
			const mapOverlays = ref([])
			const IMAGE_URL = '/directions.png'
			const IMAGE_SIZE = [200, 200]


			const areaData = [
			{
			number: "1",
			name: "1#电石库",

			// 区块的经纬度范围（多边形顶点，需自行校准）
			path: [
			[87.672802, 43.938253],
			[87.673339, 43.938416],
			[87.673737, 43.937692],
			[87.673177, 43.937565]

			],
			color: "#ffff00",
			boxTextPos: [87.673139, 43.938233],
			textPos: [87.673021, 43.937968],
			// 箭头的路径（起点→终点）
			arrowPath: [
			[87.673784, 43.937654],
			[87.675316, 43.938126]
			],
			arrowPathTop: [
			[87.673847, 43.937731],
			[87.673784, 43.937654],
			[87.673784, 43.937654],
			[87.673896, 43.937634],
			]
			},
			{
			number: "2",
			name: "渣浆清液池",
			path: [
			[87.672249, 43.937010],
			[87.673610, 43.937440],
			[87.674062, 43.936716],
			[87.672639, 43.936326],
			],
			color: "#061959", // 蓝色
			boxTextPos: [87.672914, 43.937041],
			textPos: [87.672770, 43.936821],
			arrowPath: [
			[87.673741, 43.937557],
			[87.674395, 43.936358]
			],
			arrowPathTop: [
			[87.673689, 43.937484],
			[87.673741, 43.937557],
			[87.673741, 43.937557],
			[87.673834, 43.937520],
			],
			},
			{
			number: "3",
			name: "中间罐区",
			path: [
			[87.673840, 43.937568],
			[87.675365, 43.938071],
			[87.675960, 43.936955],
			[87.674426, 43.936479]
			],
			color: "#048599",
			boxTextPos: [87.674859, 43.937563],
			textPos: [87.674609, 43.937334]
			},
			{
			number: "4",
			name: "3#冷冻",
			path: [
			[87.676018, 43.937887],
			[87.676807, 43.938102],
			[87.677192, 43.937500],
			[87.676358, 43.937237]
			],
			color: "green",
			boxTextPos: [87.676434, 43.937979],
			textPos: [87.676379, 43.937728]
			},
			{
			number: "5",
			name: "新增浓缩池",
			path: [
			[87.676222, 43.937022],
			[87.677306, 43.937391],
			[87.677502, 43.936910],
			[87.676401, 43.936585]
			],
			color: "3eec34",
			boxTextPos: [87.676916, 43.937187],
			textPos: [87.676646, 43.936978]
			},
			{
			number: "6",
			name: "3#精馏",
			path: [
			[87.675792, 43.938354],
			[87.676530, 43.938581],
			[87.676715, 43.938200],
			[87.676004, 43.937952]
			],
			color: "ff52e7",
			boxTextPos: [87.676110, 43.938477],
			textPos: [87.675993, 43.938254]
			},
			{
			number: "7",
			name: "3#压缩",
			path: [
			[87.674907, 43.938814],
			[87.676179, 43.939139],
			[87.676420, 43.938709],
			[87.675199, 43.9382997]
			],
			color: "0055eb",
			boxTextPos: [87.675650, 43.938949],
			textPos: [87.675500, 43.938733]
			},
			{
			number: "8",
			name: "2#精馏",
			path: [
			[87.674439, 43.938395],
			[87.674910, 43.938539],
			[87.675100, 43.938179],
			[87.674625, 43.938054]
			],
			color: "11feee",
			boxTextPos: [87.674695, 43.938508],
			textPos: [87.674566, 43.938284]
			},
			{
			number: "9",
			name: "1#精馏",
			path: [
			[87.673888, 43.938249],
			[87.674334, 43.938358],
			[87.674523, 43.938037],
			[87.674037, 43.937911],
			],
			color: "b330d2",
			boxTextPos: [87.674116, 43.938315],
			textPos: [87.674040, 43.938138]
			},
			]


			// 3. 初始化高德地图 + 绘制覆盖物
			const initAMap = async () => {
			try {
			window._AMapSecurityConfig = {
			securityJsCode: '75ffdb279adfda7feb06d74b3a0352d6',
			}
			const AMap = await AMapLoader.load({
			key: '65cb3e4cbf9f62fd3500cc0f61146cf4',
			version: '2.0',
			plugins: ['AMap.MapType']
			})

			// 初始化地图
			mapInstance.value = new AMap.Map('amap-container', {
			viewMode: "3D",
			zoom: 17.3,
			center: [87.675600, 43.9376800],
			resizeEnable: true,
			})
			mapInstance.value.addControl(new AMap.MapType({defaultType: 1}))
			const customIcon = new AMap.Icon({
			size: new AMap.Size(...IMAGE_SIZE),
			image: IMAGE_URL, // 图片地址
			imageSize: new AMap.Size(...IMAGE_SIZE)
			})
			markerInstance.value = new AMap.Marker({
			position: [87.672260, 43.938300], // 图片放置的经纬度
			icon: customIcon, // 使用自定义图片图标
			anchor: 'bottom-center' // 图标锚点（图片底部中心对准经纬度点，定位更准确）
			})
			mapInstance.value.add(markerInstance.value)

			areaData.forEach(area => {
			const polygon = new AMap.Polygon({
			path: area.path,
			fillColor: area.color,
			fillOpacity: 0.5,
			strokeColor: area.color,
			strokeWeight: 2
			})
			mapInstance.value.add(polygon)
			mapOverlays.value.push(polygon)

			const boxText = new AMap.Text({
			position: area.boxTextPos,
			text: `
			<div style="text-align: center; line-height: 1.2;width: 9px;">
			<span style="font-size: 16px; font-weight: bold; color: #000000;">${area.number}</span>
			</div>
			`,

			style: {
			padding:'0',
			background: '#ffffff',
			border: '1px solid #ff0000',
			color: '#000000'
			}
			})
			mapInstance.value.add(boxText)
			mapOverlays.value.push(boxText)

			const text = new AMap.Text({
			position: area.textPos,
			text: `${area.name}\n${area.distance \|\| ''}`,
			style: {
			background: 'transparent',
			border: '1px solid white',
			fontSize: '12px',
			color: '#ffffff',
			fontWeight: 'bold',
			}
			})
			mapInstance.value.add(text)
			mapOverlays.value.push(text)
			if (area.arrowPath) {
			// 箭头折线
			const arrowLine = new AMap.Polyline({
			path: area.arrowPath,
			strokeColor: '#ff0000',
			strokeWeight: 3,
			lineCap: 'round',
			strokeStyle: 'solid',
			strokeOpacity: 1,
			})
			mapInstance.value.add(arrowLine)
			mapOverlays.value.push(arrowLine)
			const arrowLineTop = new AMap.Polyline({
			path: area.arrowPathTop,
			strokeColor: '#ff0000',
			strokeWeight: 4,
			lineCap: 'round',
			strokeStyle: 'solid',
			strokeOpacity: 1,
			})
			mapInstance.value.add(arrowLineTop)
			mapOverlays.value.push(arrowLineTop)

			const arrowText = new AMap.Marker({
			position:[87.673389, 43.937851],
			content: '<div style="width:100px;background: transparent; border: none;font-weight: 600; color: #ff0000; font-size: 13px;">155m 方位1</div>',
			})
			mapInstance.value.add(arrowText)
			mapOverlays.value.push(arrowText)

			const arrowTextTwo = new AMap.Marker({
			position:[87.674435, 43.936500],
			content: '<div style="width:100px;background: transparent; border: none;font-weight: 600; color: #ff0000; font-size: 13px;">145m 方位2</div>',
			})
			mapInstance.value.add(arrowTextTwo)
			mapOverlays.value.push(arrowTextTwo)


			}
			})

			// clickHandler.value = (e) => {
			// const {lng, lat} = e.lnglat
			// clickLngLat.value = {lng, lat}
			// console.log('点击位置经纬度：', `经度：${lng.toFixed(6)}，纬度：${lat.toFixed(6)}`)
			// }
			// mapInstance.value.on('click', clickHandler.value)

			} catch (error) {
			console.error('高德地图加载失败：', error)
			}
			}


			// 4. 组件生命周期
			onMounted(() => {
			initAMap()
			})

			onUnmounted(() => {
			// 销毁地图实例 + 移除点击事件 + 销毁所有覆盖物
			if (mapInstance.value) {
			// 移除点击事件
			if (clickHandler.value) {
			mapInstance.value.off('click', clickHandler.value)
			}
			// 销毁所有覆盖物
			mapOverlays.value.forEach(overlay => {
			mapInstance.value.remove(overlay)
			})
			// 销毁地图
			mapInstance.value.destroy()
			mapInstance.value = null
			}
			})
			</script>

			<style scoped>
			.amap-container {
			width: 100%;
			height: 600px;
			}

			::v-deep(.amap-ctrl-list-layer) {
			display: none !important;
			}
			</style>

			@@ -284,8 +284,8 @@
			import AMapLoader from '@amap/amap-jsapi-loader'
			import { shallowRef } from '@vue/reactivity'
			import { storeToRefs } from 'pinia';
			import Map from './map.vue'
			import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
			import Map from './mapNew.vue'
			// import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
			import { useUserInfo } from '/@/stores/userInfo';
			import {bigScreenApi} from "/@/api/bigScreen";

			@@ -356,7 +356,7 @@

			export default defineComponent({
			name: 'bigScreen',
			components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
			components: {Map },
			props:{
			isFull: Boolean
			},