HuaTaiSpecialGasMonitor.git

<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>