🐵MapBasic-基础地图

1.demo代码

1. map-utils.js 文件 ```javascript /*
   • @description:
   • @author: 王浩
   • @Date: 2022-09-29 16:06:10
   • @Modified By:
   • @version: 1.0.0 */ // 省份对应的拼音 const nameToPinyin = { 安徽省: ‘安徽’, 澳门特别行政区: ‘澳门’, 北京市: ‘北京’, 福建省: ‘福建’, 甘肃省: ‘甘肃’, 广东省: ‘广东’, 广西壮族自治区: ‘广西’, 贵州省: ‘贵州’, 海南省: ‘海南’, 河北省: ‘河北’, 河南省: ‘河南’, 黑龙江省: ‘黑龙江’, 湖北省: ‘湖北’, 湖南省: ‘湖南’, 吉林省: ‘吉林’, 江苏省: ‘江苏’, 江西省: ‘江西’, 辽宁省: ‘辽宁’, 内蒙古自治区: ‘内蒙古’, 宁夏回族自治区: ‘宁夏’, 青海省: ‘青海’, 山东省: ‘山东’, 山西省: ‘山西’, 陕西省: ‘陕西’, 上海市: ‘上海’, 四川省: ‘四川’, 台湾省: ‘台湾’, 天津市: ‘天津’, 西藏自治区: ‘西藏’, 香港特别行政区: ‘香港’, 新疆维吾尔自治区: ‘新疆’, 云南省: ‘云南’, 浙江省: ‘浙江’, 重庆市: ‘重庆’ }

// 获取省份名称及地图矢量数据的地址 export function getProvinceMapInfo(arg){ // static/map/province 为各省份json数据 const path = ./province/${nameToPinyin[arg]}.json return{ key: nameToPinyin[arg], path: path } }

2. index中代码
```javascript
<!--
 * @description:map地图
 * @author: 王浩
 * @Date: 2022-03-30 14:56:42
 * @Modified By:
 * @version: 1.0.0
-->
<template>
  <div style="width: 100%;height: 100%">
    <p style="cursor: pointer;" @click="revertMap()" v-if="isShow">
      全网
      <span v-if="provinceData !== 'china'">
        {{ provinceData === "china" ? " " : "/ " + provinceData }}省
      </span>
    </p>
    <div class="ami-map-basic" ref="main"></div>
  </div>
</template>
<script>
import chinaMapJson from "./Map/china.json";
import geoChinaJson from "./Map/geo-china.json";
import { getProvinceMapInfo } from "./Map/map-utils.js";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "AmiMapBasic",
  props: {
    // 地图数据
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 控制地图类型
    geoChina: {
      type: Boolean,
      default: false
    },
    // 开启地图下钻
    drillDown: {
      type: Boolean,
      default: true
    },
    // 开启缩略图
    roamShow: {
      type: Boolean,
      default: false
    },
    // 控制全网/省份显示隐藏
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      line: null,
      provinceData: "china",
      options: {
        title: this.option.title, //标题
        grid: this.option.grid,
        legend: this.option.legend,
        visualMap: this.option.visualMap,
        tooltip: this.option.tooltip, // 提示框
        series: this.option.series, //数据
        geo: {
          select: this.option.geoSelect,
          itemStyle: this.option.geoitemStyle,
          label: this.option.geoLabel || {
            show: true
          },
          roam: this.roamShow,
          type: "map", // 类型
          map: "china"
        }
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.line = echarts.init(this.$refs.main);
      // 注册地图类型
      if (this.geoChina) {
        echarts.registerMap("china", geoChinaJson);
        this.line.setOption(this.options, true);
        this.drillDown_type(this.drillDown);
      } else if (!this.geoChina) {
        echarts.registerMap("china", chinaMapJson);
        this.line.setOption(this.options, true);
        this.drillDown_type(this.drillDown);
      }
      // 适配屏幕
      window.addEventListener("resize", () => this.line.resize());
      elementResizeDetectorMaker({ strategy: "scroll" }).listenTo(
        this.line,
        () => {
          this.line.resize();
        }
      );
    },
    // 地图下钻
    drillDown_type(type) {
      if (type) {
        this.line.on("click", (params) => {
          // 基础地图下转
          if (!this.geoChina) {
            const provinceInfo = getProvinceMapInfo(params.name);
            if (provinceInfo.key !== undefined) {
              this.provinceData = provinceInfo.key; // 省份
              const mapJson = require(`./Map/province/${
                provinceInfo.key
              }.json`);
              // 注册地图
              echarts.registerMap(provinceInfo.key, mapJson);
              const changeOption = { geo: { map: provinceInfo.key } };
              this.line.setOption(changeOption);
            }
            // geoChina地图下转
          } else {
            // 判断是否是直辖市
            if (params.name == "南网" || params.name == "蒙东") {
              console.log("直辖市");
              this.$emit("changeCity", params);
              return;
            }
            this.provinceData = params.name; // 省份
            const changeOption = { geo: { map: params.name } };
            const mapJson = require(`./Map/province/${params.name}.json`);
            echarts.registerMap(params.name, mapJson);
            this.line.setOption(changeOption);
          }
          // 促发事件
          this.$emit("changeCity", params);
        });
      } else {
        this.line.off("click");
      }
    },
    // 回退
    revertMap() {
      if (this.geoChina) {
        echarts.registerMap("china", geoChinaJson);
        this.line.setOption(this.options, true);
      } else if (!this.geoChina) {
        echarts.registerMap("china", chinaMapJson);
        this.line.setOption(this.options, true);
      }
      this.provinceData = "china";
    }
  },
  watch: {
    option: {
      deep: true,
      handler() {
        this.initChart();
      }
    }
  }
};
</script>

1. Json文件

https://share.weiyun.com/BoMioz3U

使用

<template>
  <ami-button @click="revertMap">回退</ami-button>
  <ami-map-basic
    style="width: 100%;height: 100vh"
    ref="map"
    :geoChina="false"
    :option="option"
    ></ami-map-basic>
</template>
<script>
  export default {
    data() {
      return {
        option: {
          legend: {
            left: "5%",
            bottom: "5%",
            orient: "vertical", // 竖着排列
            data: ["一线城市", "二线城市", "三线城市"],
          },
          // 地图区域的样式
          geoitemStyle: {
            areaColor: "#2E72BF", // 地图整体区域的颜色
            borderColor: "#333", //地图边界线的颜色
          },
          geoLabel: {
            show: true,
          },
          visualMap: {
            type: "continuous",
            text: ["", ""],
            showLabel: true,
            left: "50",
            min: 0,
            max: 100,
            inRange: {
              color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            },
            splitNumber: 0,
          },
          tooltip: {
            //提示框
            show: true, //默认展示
            trigger: "item", //触发展示每一项
            formatter(parmas) {
              return `名称：${parmas.name} <br/>确诊人数：${parmas.value}`;
            },
            //弹窗样式
            padding: 3, //内边距
            borderColor: "#333",
            backgroundColor: "rgba(50,50,50,0.7)", //
            textStyle: {
              //文本样式
              color: "#fff",
            },
          },
          series: [
            {
              name: "", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
              type: "map",
              geoIndex: 0,
              label: {
                show: true,
              },
              // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
              data: [
                {
                  name: "北京市",
                  value: 100,
                },
                {
                  name: "河南省",
                  value: 60,
                },
              ],
            },
          ],
          geoSelect: {
            //选中设置
            itemStyle: {
              areaColor: "#0f2c66", //选中颜色设置
            },
          },
        },
      };
    },
    methods: {
      revertMap() {
        this.$refs.map.revertMap();
      },
    },
  };
</script>

¶Attributes

¶Input Events