plantScreen/src/components/areaMap.vue

<template>
  <div>

    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
    <!-- <img src="/static/index/lx.png" class="img4" alt=""> -->
  </div>
  <!-- <div style="width: 45vw;height: 50vh;" id="myChart"></div> -->

  <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
</template>



<style lang="scss" scoped>
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.img4 {
  top: 19.5vh;
  left: 33.3vw;
  height: 44vh;
  width: 33.6vw;
  position: absolute;
  //   transform: rotateX(45deg);
  // animation: spin 2s linear infinite;

}

#chart2 {
  position: absolute;
  z-index: 9;
}
</style>

<script setup>
import { ref, onMounted } from "vue"
import axios from "axios";
import * as echarts from 'echarts';
import "echarts-gl"
import iconbg from '/static/index/mapicon.png'
import geoJson from "/static/jsonData/xuantan.js"
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
  const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
  const lx="https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"

const pointerFn = () => {

  // console.log()
  let list = []
  geoJson.center.forEach((item, index) => {


    
    list.push({
      coord: item,
      symbol:  index==geoJson.center.length-1?('image://'+lx): ('image://' + icon),// 自定义图片路径
      symbolSize: [100, 30], // 图片大小
      symbolOffset: ['50%', '-50%'],
      value: geoJson.features[index]?.properties.name||'泸县',
      animation: true,
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
    },)
  })
  return list
}
// pointerFn()
onMounted(() => {
      var mapName = 'lz';
      const myChart = document.getElementById("chart2")
      /*获取地图数据*/
      let option = {
        geo: [

        
          {
            type: "map",
            map: mapName,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "51%"],
            layoutSize: "110%",
            roam: false,
            label:{
              emphasis:{
                show:false
              }
            },
            show: true,
            map: mapName,
            zoom: 1.2,
            aspectScale: 1,
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'transparent',

              },
              emphasis: {

                areaColor: {
                  type: 'radial', // linear 线性渐变  radial径向渐变
                  x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
                  y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
                  r: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#A46759' // 0% 处的颜色
                    },
                    {
                      offset: 0.1, color: '#A46759' // 0% 处的颜色
                    },


                    {
                      offset: 1, color: '#FFB821' // 100% 处的颜色
                    }],

                }


                // borderWidth: 0
              }

            },
            

          },

          {
            type: "map",
            map: mapName,
            zlevel: -1,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "51%"],
            layoutSize: "110%",
            roam: false,
            silent: true,
           
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(17, 149, 216,0.6)",
                borderColor: "#5AD0E0",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          },


          {
            type: "map",
            map: mapName,
            zlevel: -1,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "52%"],
            layoutSize: "110%",
            roam: false,
            silent: true,

            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(17, 149, 216,0.6)",
                borderColor: "#5AD0E0",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          },


          {
            type: "map",
            map: mapName,
            zlevel: -2,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "53%"],
            layoutSize: "110%",
            roam: false,
            silent: true,

            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(17, 149, 216,0.4)",
                borderColor: "#5AD0E0",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          },

          {
            type: "map",
            map: mapName,
            zlevel: -4,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "54%"],
            layoutSize: "110%",
            roam: false,
            silent: true,

            itemStyle: {
              normal: {
                borderWidth: 5,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(5,9,57,0.8)",
                shadowColor: "rgba(29, 111, 165,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          },



        ],
        series: [
          {
            name: '资产数',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              period: 4, //动画时间，值越小速度越快
              brushType: 'fill', //波纹绘制方式 stroke, fill
              scale: 12, //波纹圆环最大限制，值越大波纹越大
              number: 2,
            },

            // 发散点的大小
            symbolSize: function (val) {
              return 4
              // return val[2] / 10;
            },
            markPoint: {
              data:pointerFn()
            },

            data: (() => {
              let data = {
                资产数: geoJson.center

              }
              let finalData = []
              Object.keys(data).map((i, index) => {
                let child = data[i].map((row,index) => ({
                  value: row,
                  itemStyle: {
                    color:index==geoJson.center.length-1?'#FEB821':'#F0733A',
                  },
                }))

                finalData = [...finalData, ...child]
              })
              return finalData
            })(),
          },
        ],
      };
      echarts.registerMap(mapName, geoJson)
      const bg = echarts.init(myChart)
      bg.setOption(option);

    })








</script>