maps.vue

<template>
  <div class="map-box">
    <span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
      >返回</span
    >
    <div id="mapDiv"></div>
  </div>
</template>

<script>
// import "echarts/map/js/china";
import axios from "axios";
import echarts from "echarts";
export default {
  name: "maps",
  data() {
    return {
      dataList: [],
      show: "province",
      parentInfo: [
        {
          cityName: "全国",
          code: 100000,
        },
      ],
    };
  },
  mounted() {
    // this.getList();
    this.initData(100000);
  },
  methods: {
    getList(type, areaCode) {
      let _this = this;
      return new Promise((resolve, reject) => {
        let httpUrl = "";
        let dataList = [];
        if (type === "china") {
          httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
        }
        if (type === "map") {
          httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
        }
        _this
          .$https({
            method: "post",
            url: httpUrl,
          })
          .then((res) => {
            if (res.status == 200) {
              if (res.data.resultCode == 200) {
                dataList = res.data.data;
              } else {
                dataList = [];
              }
            } else {
              dataList = [];
            }
            resolve(dataList);
          })
          .catch((err) => {
            this.$message.error(err.message);
            resolve([]);
          });
      });
    },
    initData(adcode) {
      Promise.all([
        this.getGeoJson(adcode),
        this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
      ]).then((res) => {
        let features = res[0].features;
        let json = res[1];
        let flen = features.length;
        let jlen = json.length;
        for (let i = 0; i < flen; i++) {
          for (let j = 0; j < jlen; j++) {
            let jName = json[j].name.substring(0, 2);
            if (features[i].properties.name.indexOf(jName) != -1) {
              features[i].properties.value = json[j].value;
              break;
            }
          }
        }
        this.getMapData({ features: features });
      });
    },
    init(mapData) {
      let _this = this;
      let option = {
        tooltip: {
          // triggerOn: "click",
          formatter: function (e, t, n) {
            return 0.5 == e.value
              ? e.name + "：播放量"
              : e.seriesName + "<br />" + e.name + "：" + e.value;
          },
        },
        visualMap: [
          {
            dimension: 0,
            left: "8%",
            bottom: 20,
            itemWidth: 16,
            orient: "horizontal",
            text: ["播放量", "由低到高"],
            backgroundColor: "rgba(0,19,45,0.4)",
            padding: 16,
            textStyle: {
              color: "gba(255,255,255,1)",
            },
            inRange: {
              color: [
                "rgba(161,255,255,1)",
                "rgba(91,214,255,1)",
                "rgba(38,157,255,1)",
                "rgba(0,72,149,1)",
              ],
            },
          },
        ],
        geo: {
          map: _this.parentInfo.length === 1 ? "china" : "map",
          roam: true, //是否开启平游或缩放
          // scaleLimit: {
          //   //滚轮缩放的极限控制
          //   min: 1,
          //   // max: 2,
          // },
          zoom: 1.1,
          top: 51,
          label: {
            normal: {
              show: !0,
              fontSize: "12",
              color:'#968f8f',
              formatter: (p) => {
                switch (p.name) {
                  case "内蒙古自治区":
                    p.name = "内蒙古";
                    break;
                  case "西藏自治区":
                    p.name = "西藏";
                    break;
                  case "新疆维吾尔自治区":
                    p.name = "新疆";
                    break;
                  case "宁夏回族自治区":
                    p.name = "宁夏";
                    break;
                  case "广西壮族自治区":
                    p.name = "广西";
                    break;
                  case "香港特别行政区":
                    p.name = "香港";
                    break;
                  case "澳门特别行政区":
                    p.name = "澳门";
                    break;
                }
                return p.name;
              },
            },
            emphasis: {
              // color: "#ffffff",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              // areaColor: "#f2d5ad",
              areaColor: "#8dd7fc",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        series: [
          {
            name: "播放量",
            type: "map",
            geoIndex: 0,
            data: mapData,
          },
        ],
      };
      let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
      echartsDiv.setOption(option,true);
      echartsDiv.on("click", _this.echartsMapClick);
    },
    handleBack() {
      if (this.parentInfo.length === 1) {
        return;
      }
      this.parentInfo.pop();
      this.initData(this.parentInfo[this.parentInfo.length - 1].code);
    },
    echartsMapClick(params) {
      if (!params.data) {
        return;
      }
      debugger
      if(params.data.level ===  "district"){
        return false
      }
      let cityCode = params.data.cityCode;
      this.parentInfo.push({
        cityName: params.data.name,
        code: params.data.cityCode,
      });
      this.initData(cityCode);
    },
    //这里我封装了下，直接可以拿过来用
    // getGeoJson(adcode, childAdcode = "") {
    //   return new Promise((resolve, reject) => {
    //     function insideFun(adcode, childAdcode) {
    //       AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
    //         var districtExplorer = new DistrictExplorer();
    //         districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
    //           if (error) {
    //             console.error(error);
    //             reject(error);
    //             return;
    //           }
    //           let Json = areaNode.getSubFeatures();
    //           if (Json.length === 0) {
    //             let parent = areaNode._data.geoData.parent.properties.acroutes;
    //             insideFun(parent[parent.length - 1], adcode);
    //             return;
    //           }

    //           if (childAdcode) {
    //             Json = Json.filter((item) => {
    //               return item.properties.adcode == childAdcode;
    //             });
    //           }
    //           let mapJson = {
    //             features: Json,
    //           };
    //           resolve(mapJson);
    //         });
    //       });
    //     }
    //     insideFun(adcode, childAdcode);
    //   });
    // },
    getGeoJson(adcode) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url: `feature/${adcode}_full.json`,
        }).then((res) => {
          let mapJson = {
            features: res.data.features,
          };
          resolve(mapJson);
        });
      });
    },
    getMapData(geoJson) {
      // 获取后台接口数据
      let Json = geoJson.features;
      let mapData = Json.map((item) => {
        return {
          name: item.properties.name,
          value: item.properties.value,
          level: item.properties.level,
          cityCode: item.properties.adcode,
        };
      });
      let mapJson = {};
      //geoJson必须这种格式
      mapJson.features = Json;
      //去渲染echarts
      this.initEcharts(mapData, mapJson);
    },
    initEcharts(mapData, mapJson) {
      echarts.registerMap(
        this.parentInfo.length === 1 ? "china" : "map",
        mapJson
      );
      this.init(mapData);
    },
  },
};
</script>

<style lang="scss">
.map-box {
  width: 100%;
  height: 100%;
  #back {
    position: absolute;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    left: 60px;
    cursor: pointer;
    z-index: 99;
    &:hover {
      color: #4efffd;
    }
  }
  #mapDiv {
    width: 100%;
    height: 100%;
  }
}
</style>