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 geoJson from "/static/jsonData/xuantan.js"




onMounted(() => {
  const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'


  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510500_full.json')


  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
    .then(function (response) {
      let geoJson = response.data
      const dot = document.getElementById('img')
      var mapName = 'lz';
      let data = [
      ]
      const myChart = document.getElementById("chart2")
      /*获取地图数据*/


      let option = {



        geo: [
          {
            layoutSize: '100%',//大小
            show: true,
            map: mapName,

            roam: false,
            zoom: 1.2,
            layoutCenter: ["50%", "50%"],
            aspectScale: 1,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              },
             
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#D2F2FC",
              borderWidth: 2,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            },

          },

          {
            type: "map",
            map: mapName,
            zlevel: -1,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "51%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              }
            ],
            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: "100%",
            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%", "52%"],
            layoutSize: "100%",
            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: -3,
          //   aspectScale: 1,
          //   zoom: 1.2,
          //   layoutCenter: ["50%", "53%"],
          //   layoutSize: "101%",
          //   roam: false,
          //   silent: true,
          //   regions: [
          //     {
          //       name: "南海诸岛",
          //       itemStyle: {
          //         // 隐藏地图
          //         normal: {
          //           opacity: 0, // 为 0 时不绘制该图形
          //         }
          //       },
          //       label: {
          //         show: false // 隐藏文字
          //       }
          //     }
          //   ],
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "rgba(58,149,253,0.4)",
          //       shadowColor: "rgba(58,149,253,1)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "transpercent",
          //     },
          //   },
          // },
          {
            type: "map",
            map: mapName,
            zlevel: -4,
            aspectScale: 1,
            zoom: 1.2,
            layoutCenter: ["50%", "53%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              }
            ],
            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: [
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 1, //长宽比

            showLegendSymbol: true,
            roam: true,
            label: {
                            show: true,
                            position: "top",
                            distance: -10,
                            formatter(params) {
                                return "2";
                            },

                            textStyle: {
                                // color: "transparent",
                                padding: [15, 20],
                                backgroundColor: {
                                    image: '/static/index/aa.png',
                                },
                                // backgroundColor:""
                            },
                        },



            animation: true,
            markPoint: {
              symbol: "none"
            },
            data: data,
          },


        ],
      };



      echarts.registerMap(mapName, geoJson)
      const bg = echarts.init(myChart)
      bg.setOption(option);








    })



})






</script>