地图下钻 uniapp + echart

<template>
  <view class="contentMain" style="background-color: #0d1222">
    <view class="returns">
      <view class="returns-content">
        <view
          @click="onReturns"
          style="display: flex; align-items: center; width: 82px"
        >
          <image
            src="/static/images/left_icon.png"
            mode="scaleToFill"
            style="width: 20px; height: 20px"
          />
          <view>返回上一级</view>
        </view>
        <view style="font-size: 14px">{{ regionName }}</view>
        <view
          @click="shenqingjilu"
          style="width: 82px; display: flex; justify-content: end"
          >申请记录</view
        >
      </view>
    </view>
    <view id="map"></view>
    <view class="input-card" v-html="htmlContent" v-show="htmlContent"> </view>
    <view class="tool">
      <view class="tool_btn_jia" @click="fangda">+</view>
      <view class="tool_btn_jian" @click="suoxiao">-</view>
    </view>
    <!-- <view class="colorBox">
      <view class="df">
        <view class="green"></view>
        <view>可申请</view>
      </view>
      <view class="df">
        <view class="blue"></view>
        <view>已有代理</view>
      </view>
    </view> -->
    <view class="shenqingBtn" v-if="isShowBtn">
      <view class="greenbtn" @click="shenqing">申请代理</view>
      <view class="bluebtn" @click="xiazuan" v-if="grade != 'area'"
        >下级行政</view
      >
    </view>
  </view>
</template>

<script>
import * as echarts from "@/static/js/echarts.js";
import { getMarkers } from "@/api/index";
let _this = this;
export default {
  data() {
    return {
      option: {},
      myChart: "",
      mapData: [],
      levelVal: "",
      htmlContent: "",
      dataList: [],
      features: [],
      dataLists: [],
      clickedIds: [], //id数组用于返回上一级
      visualMap: {}, //渲染的颜色
      isShowBtn: false,
      flagShow: undefined,
      params: null, //接受点击的数据
      grade: undefined,
      regionName: "全国",
      nameList: [],
    };
  },
  onLoad() {
    _this = this;
  },
  mounted() {
    getMarkers().then((res) => {
      this.dataLists = res.data.regional_data;
      res.data.regional_data.forEach((item) => {
        const featuresdata = {
          geometry: item.geometry,
          properties: item.features[0].properties,
          type: item.features[0].type,
        };

        this.features.push(featuresdata);
      });
      this.dataList = {
        features: this.features,
        type: "FeatureCollection",
      };
      echarts.registerMap("", this.dataList);

      this.datafor();
      this.myChart = echarts.init(document.getElementById("map"));
      this.option = {
        visualMap: {
          min: 0,
          max: 1500,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#092d68"], //取值范围的颜色
          },
          show: false, //图注
        },
        geo: {
          selectedMode: "single",
          zoom: 2,
          roam: true,
          top: "9%",
          left: "11%",
          z: 5,
          label: {
            show: true,
            position: "center", // 修改为center使文字居中
            fontSize: 12,
            color: "#FFF",
            formatter: function (params) {
              return `${params.name}`;
            },
          },
          itemStyle: {
            areaColor: "#fff",
            borderColor: "#1291b9",
            borderWidth: 2,
            shadowColor: "#0f4c74",
            shadowOffsetX: 0,
            shadowOffsetY: 4,
            shadowBlur: 10,
            emphasis: {
              areaColor: "#fc6109",
              textStyle: {
                color: "#fff", // 点击后文字变成白色
              },
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "#1188d4",
            },
          },
        },
        series: [
          {
            map: "china",
            name: "参数",
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
              position: "center", // 修改为center使文字居中
              fontSize: 12,
              color: "#000",
            },
            data: this.mapData,
          },
        ],
      };
      this.init();
    });
  },
  methods: {
    shenqingjilu() {
      uni.navigateTo({
        // #ifdef MP-WEIXIN
        url: `/regional_map/pages/home/application_list`,
        // #endif
        // #ifndef MP-WEIXIN
        url: `/pages/home/application_list`,
        // #endif
      });
    },
    fangda() {
      this.option.geo.zoom += 2;
      this.myChart.setOption(this.option);
    },
    suoxiao() {
      this.option.geo.zoom -= 2;
      this.myChart.setOption(this.option);
    },
    onReturns() {
      console.log(this.nameList, "这是啥");

      this.isShowBtn = false;
      let leve = this.levelVal;
      if (!leve) {
        uni.showToast({
          title: "已经是最顶部了",
          icon: "none",
        });
      } else if (leve == "province") {
        this.levelVal = "";
        this.regionName = "全国";
        this.nameList = [];
        this.onUpdate();
      } else if ((leve = "city")) {
        this.levelVal = "province";
        this.regionName = this.nameList[0];
        this.onUpdate(this.levelValCode);
      }
      this.htmlContent = "";
      if (this.option.series.length > 1) this.option.series.pop();
    },
    init() {
      this.myChart.setOption(this.option);
      this.myChart.on("click", this.echartsMapClick);
      this.myChart.on("click", this.echartsLabelClick);
    },
    //申请
    shenqing() {
      const e = this.params.data;
      if (!e.is_can_apply) {
        uni.showToast({
          title: "区域招商已开启，只能申请省级代理",
          icon: "none",
        });
        return;
      }
      if (e.status_name != "可申请") {
        uni.showToast({
          title: `此区域${e.status_name}`,
          icon: "none",
          mask: true,
        });
      } else {
        uni.navigateTo({
          // #ifdef MP-WEIXIN
          url: `/regional_map/pages/home/put_in?areacode=${e.areacode}&areaname=${e.name}`,
          // #endif
          // #ifndef MP-WEIXIN
          url: `/pages/home/put_in?areacode=${e.areacode}&areaname=${e.name}`,
          // #endif
        });
      }
    },
    //下钻
    xiazuan() {
      const params = this.params;
      console.log(params, "区域");
      this.regionName = params.data.name;
      this.nameList.push(params.data.name);
      console.log(this.nameList, "nameList");

      if (!params.data.is_can_lower) {
        uni.showToast({
          title: "暂无下级区域",
          icon: "none",
          mask: true,
        });
        return;
      }
      this.isShowBtn = false;

      if (params.data.grade == "area") {
        uni.showToast({
          title: "已是最低层",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (params.data.level == "district") {
        return;
      } else if (params.data.level == "province") {
        this.levelValCode = params.data.id;
      } else if (params.data.level == "city") {
        if (params.data.cityCode == 510100) {
          this.option.series.push({
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            symbolSize: 20,
            rippleEffect: {
              brushType: "stroke",
            },
            itemStyle: {
              show: false,
              color: "red",
              formatter: function (params) {},
            },
            data: this.convertData(datas),
          });
        }
      }
      this.levelVal = params.data.level;
      this.onUpdate(params.data.id);
    },
    echartsMapClick(params) {
      this.params = params;
      this.grade = params.data.grade;
      this.isShowBtn = true;
    },
    echartsLabelClick(params) {
      // 在这里处理标签点击事件
      // 例如：显示详细信息、跳转到详情页等
    },
    onUpdate(code) {
      function getData(json, data = "") {
        echarts.registerMap("", json);
        _this.datafor(data);
        _this.option.series[0].data = _this.mapData;
        _this.myChart.setOption(_this.option, true);
        _this.myChart.on("click", _this.echartsMapClick);
        _this.myChart.on("labelclick", _this.echartsLabelClick);
      }
      if (!code) {
        getData(_this.dataList);
        return;
      }
      getMarkers({ parent_id: code })
        .then((res) => {
          this.dataLists = [];
          this.dataLists = res.data.regional_data;
          const features = res.data.regional_data.map((item) => ({
            geometry: item.geometry,
            properties: item.features[0].properties,
            type: item.features[0].type,
          }));

          const dataListSt = {
            features,
            type: "FeatureCollection",
          };

          getData(dataListSt, features);
        })
        .catch((error) => {
          console.error("获取标记数据失败:", error);
        });
    },
    datafor(datas, s) {
      let data = datas || this.dataList.features;
      let mapData = [];
      data.forEach((e) => {
        let item = e.properties;
        mapData.push({
          name: item.name,
          value: item.is_show,
          cityCode: item.adcode,
          level: item.level,
          id: item.id,
          area_status: item.area_status,
          order_num: item.order_num,
          status_name: item.status_name,
          areacode: item.areacode,
          grade: item.grade,
          is_can_apply: item.is_can_apply,
          is_can_lower: item.is_can_lower,
        });
      });
      this.mapData = mapData;
    },
    randomValue() {
      return Math.round(Math.random() * 1000) + "";
    },
    convertData(data) {
      var geoCoordMap = {
        双流区1: [103.957986, 30.567215],
        双流区2: [103.955686, 30.427808],
        双流区3: [103.983282, 30.545322],
        双流区4: [103.916592, 30.537359],
        双流区5: [103.941888, 30.487579],
      };
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            visualMap: false,
            conet: _this.randomValue(),
          });
        }
      }
      return res;
    },
  },
};
</script>
<style>
.shenqingBtn {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  font-size: 14px;
  width: 100%;
}
.greenbtn {
  display: flex;
  justify-content: center;
  width: 80%;
  background-color: #0c67d6;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
}
.bluebtn {
  display: flex;
  justify-content: center;
  width: 79%;
  background-color: #09192a;
  border: 1px solid #0b5dc1;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
}
.colorBox {
  position: fixed;
  top: 0;
  right: 15px;
  padding: 5px;
  border-radius: 10px;
  font-size: 12px;
  background-color: #e0ffff;
}
.df {
  display: flex;
  align-items: center;
  margin-top: 3px;
}
.green {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: #07c160;
  margin-right: 6px;
}
.blue {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: #ccc;
  margin-right: 6px;
}
.tool {
  z-index: 9999;
  position: fixed;
  bottom: 140px;
  left: 23px;
}
.tool_btn_jia {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0c67d6;
  color: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin-bottom: 10px;
}
.tool_btn_jian {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #09192a;
  border: 1px solid #0b5dc1;
  color: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
#map {
  height: 100vh;
  width: 100%;

  /* background: #323c48; */
}

.contentMain {
  overflow: hidden;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.returns {
  z-index: 9999;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  /* height: 10%; */
  width: 100%;
  background-color: #080c16;
}
.returns-content {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 12px;
}

.input-card {
  z-index: 9999;
  background: #fff;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 400rpx;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  /* transform: translateX(-50%); */
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-card .btn {
  width: 7rem;
  margin-right: 0.7rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>