plantScreen/src/components/farmerMap.vue

<template>
  <div>
    <div style="width: 45vw;height: 50vh;" id="farmerchart"></div>
  </div>
</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;
}

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

<script setup>
import { ref, onMounted,defineEmits } from "vue"
import * as echarts from 'echarts';
import "echarts-gl"
import geoJson from "/static/jsonData/luxian_geo.js"
import { useRoute } from "vue-router"
import { areaObj } from "@/store/index.js"
import { landListApi } from "@/api.js"
const emit = defineEmits(['changeLand'])

const areaStore = areaObj()
const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  let copy = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }

  return copy;
}
const route = useRoute()
const townJson = deepCopy(geoJson)
townJson.features = townJson.features.filter((item) => {
  return item.properties.name == route.query.town
})
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 pointerFn2 = (lists) => {
  let list = []
  lists.forEach((item, index) => {
    list.push({
      coord: item.value,
      value: item.name,
      animation: true,
      data: lists,
      itemStyle: {
        normal: {
          borderColor: 'red',
          borderWidth: 1,            // 标注边线线宽，单位px，默认为1
          label: {
            show: false
          }
        },
        emphasis: {
          borderColor: 'red',
          borderWidth: 5,
          label: {
            show: false
          }
        }
      },


    },)
  })
  return list
}
onMounted(async () => {
  let center = []
  let pointerList = []
  let res = await landListApi({
    ...areaStore.userInfo
  })

  res.data.list.forEach(item => {
    center.push([item.longitude, item.latitude])
    pointerList.push({
      value: [item.longitude, item.latitude],
      name: item.title,
      id: item.id
    })

  })

  let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
  let pointerList2 = []
  center2.forEach((item, index) => {
    pointerList2.push({
      value: item,
      name: "土地" + index,
      id: 17
    })
  })

  var mapName = 'lz';
  const myChart = document.getElementById("farmerchart")
  /*获取地图数据*/
  let option = {
    geo: [
      {
        type: "map",
        map: mapName,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "51%"],
        layoutSize: "80%",
        roam: false,
        label: {
          emphasis: {
            show: false
          }
        },
        show: true,
        map: mapName,
        zoom: 1,
        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,
        layoutCenter: ["50%", "51%"],
        layoutSize: "81%",
        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,
        layoutCenter: ["50%", "52%"],
        layoutSize: "82%",
        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,
        layoutCenter: ["50%", "53%"],
        layoutSize: "83%",
        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,
        layoutCenter: ["50%", "54%"],
        layoutSize: "84%",
        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: pointerFn2(pointerList2)
        },

        data: (() => {

          let data = {
            资产数: center2

          }
          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
        })(),
      },
    ],
  };
  document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
  echarts.registerMap(mapName, townJson)
  const bg = echarts.init(myChart)
  bg.setOption(option);
  bg.on('click', function (params) {
    let longInfo = params.data.coord
    params.data.data.forEach(item => {
      if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {

        emit('changeLand',item.id)

      }

    })
  });

})






</script>