<!--
  Description: 综合大屏 -- 废弃
  Author: 李亚光
  Date: 2024-06-27
 -->
<script lang="ts" setup>
import { mapData } from './components/mapData'
import AMap from '@/components/map/index.vue'

// 地图实例
const mapRef = ref()
// 地图挂载完毕执行
const drawBj = () => {
  const style = {
    fillColor: '#A1D2FF',
    strokeOpacity: 1,
    fillOpacity: 0.3,
    strokeColor: '#2b8cbe',
    strokeWeight: 1,
    strokeStyle: 'dashed',
    strokeDasharray: [5, 5],
    activeFillColor: '#3CA4D2',
    dbclickSetCenter: true,
  }

  mapData.forEach((item: any) => {
    // 绘制北京各个区边界
    mapRef.value.addPolygon(item.data, {
      ...style,
      name: item.name,
      dbclickCenter: item.center,
    })
    // 添加各个区的名称
    mapRef.value.addText({ text: item.name, position: item.center }, {
      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
      'color': 'white',
      'background-color': 'transparent',
      'border-color': 'transparent',
    })
  })
}
// const remove = () => {
//   mapRef.value.removePolygon()
//   mapRef.value.removeText()
// }
</script>

<template>
  <div class="full-container">
    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
    <!-- 地图 -->
    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
  </div>
</template>

<style>
.full-container {
  width: 100%;
  height: 100vh;
}
</style>