<template>
  <div class="map-center-warp">
    <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
    <div class="map-pos">
      <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted } from 'vue';
var aspectScale = 0.8807505292367753;
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;

import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
let geoData = geoJsonData;
let mapName = ref('ZJ');
const chartsData = reactive({
  option: {
    title: {
      text: '',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesType === 'effectScatter') {
          return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
        }
        return params.name;
      },
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        // dataView: { readOnly: false },
        // restore: {},
        // saveAsImage: {},
      },
    },
    geo3D: {
      map: mapName.value,
      roam: true,
      zoom: 1.2,
      show: true,
      zlevel: -1, // 必须设置，
      viewControl: {
        distance: 110,
        alpha: 60,
        beta: 0,
        minBeta: -360,
        maxBeta: 720,
        // 限制视角，使不能旋转缩放平移
        // rotateSensitivity: 0,
        // zoomSensitivity: 0,
        // panSensitivity: 0,
      },
      itemStyle: {
        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
        opacity: 1, // 图形的不透明度 [ default: 1 ]
        borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
        borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
      },
      label: {
        show: true,
        distance: 0,
        color: '#000',
        padding: [6, 4, 2, 4],
        borderRadius: 4,
        backgroundColor: 'rgba(255,255,255,0.2)',
        textStyle: {
          fontSize: 12,
          color: '#E87813', // 地图初始化区域字体颜色
          borderWidth: 0,
          borderColor: '#000',
        },
      },
      emphasis: {
        //高亮状态的效果
        label: {
          show: true,
          color: '#fff',
        },
        itemStyle: {
          color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
        },
      },
    },
    series: [
      // 闪烁散点图系列
      {
        name: '闪烁散点',
        type: 'effectScatter', // 使用 effectScatter 类型
        coordinateSystem: 'geo',
        data: [
          // 示例数据点，实际应用中应替换为真实的数据
          {
            name: '孟定镇',
            value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
            itemStyle: {
              color: '#FF0000', // 孟定镇的颜色
            },
          },
          {
            name: '勐永镇',
            value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
            itemStyle: {
              color: '#00FF00', // 勐永镇的颜色
            },
          },
        ],
        symbolSize: function (val) {
          return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        rippleEffect: {
          period: 4, // 波纹动画周期
          scale: 3, // 波纹缩放比例
          brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
        },
        hoverAnimation: false,
      },
    ],
  },
  valData: [
    {
      map: mapName.value,
      roam: true,
      zoom: 0.9,
      show: true,
      itemStyle: {
        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
        opacity: 1, // 图形的不透明度 [ default: 1 ]
        borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
        borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
      },
      label: {
        show: true,
        distance: 0,
        color: '#000',
        padding: [6, 4, 2, 4],
        borderRadius: 4,
        backgroundColor: 'rgba(255,255,255,.66)',
        textStyle: {
          fontSize: 12,
          color: '#E87813', // 地图初始化区域字体颜色
          borderWidth: 0,
          borderColor: '#000',
        },
      },
      // emphasis: {
      //   //高亮状态的效果
      //   label: {
      //     show: true,
      //     color: '#fff',
      //   },
      //   itemStyle: {
      //     // show: false,
      //     areaColor: {
      //       type: 'linear',
      //       x: 0,
      //       y: 0,
      //       x2: 1,
      //       y2: 0,
      //       colorStops: [
      //         { offset: 0, color: '#4bffb4' },
      //         { offset: 1, color: '#4bffb4' },
      //       ],
      //     },
      //   },
      // },
    },
    // 闪烁散点图系列
    {
      name: '闪烁散点',
      type: 'effectScatter', // 使用 effectScatter 类型
      coordinateSystem: 'geo',
      data: [
        // 示例数据点，实际应用中应替换为真实的数据
        {
          name: '孟定镇',
          value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
          itemStyle: {
            color: '#FF0000', // 孟定镇的颜色
          },
        },
        {
          name: '贺派乡',
          value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
          itemStyle: {
            color: '#00FF00', // 贺派乡的颜色
          },
        },
      ],
      symbolSize: function (val) {
        return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: false,
      },
      rippleEffect: {
        period: 4, // 波纹动画周期
        scale: 3, // 波纹缩放比例
        brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
      },
      hoverAnimation: false,
    },
  ],
});

onMounted(() => {
  console.info('iconUrl', iconUrl);
});
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.map-center-warp {
  width: 100%;
  text-align: center;
  position: relative;
  height: 90%;
  .map-img {
    width: 80%;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    object-fit: contain;
    transform: translateX(-50%);
    max-width: 1000px;
    max-height: 1000px;
  }
  .map-pos {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
