长沙大屏echarts——地图map

• 1、展示长沙市开福区街道地图，需要自己描街道数据
• 2、地图需要立体感觉，两层叠加
• 3、地图区域使用纹理图片填充，点击高亮
• 4、地图标点政府展示五角星图表，其他点使用点
• 5、地图标点的文字需要特殊样式设置

// map.vue 组件

<template>
  <div class="w100 h100" />
</template>

<script>
import resize from "./mixins/resize";
import axios from "axios";
// 地图的纹理背景图
import { bgImg } from "./js/index";  // base64格式数据
var mapBg = document.createElement("img");
mapBg.style.height = mapBg.height = mapBg.width = mapBg.style.width = "8px";
mapBg.src = bgImg;
// 标点政府的五角星
let star = "image://" + require("@/views/screen/components/img/star.png");
export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      // 散点数据
      scatterData: [
        {
          name: "开福区人民政府",
          value: [112.991735, 28.26299],
        },
      ],
      scatterData1: [
        {
          name: "马栏山文化创意产业园",
          value: [113.037663, 28.227175],
        },
        {
          name: "马栏山产业园",
          value: [112.991735, 28.30299],
        },
        {
          name: "马栏山产业园",
          value: [113.041735, 28.35299],
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async initChart() {
      this.chart = this.$echarts.init(this.$el);
      let { data } = await axios.get("/map.json");
      this.$echarts.registerMap("kaifuqu", data); // 1、注意名字保持一致
      this.chart.setOption({
        geo: [
          {
            map: "kaifuqu", // 2、注意名字保持一致
            roam: false, //是否允许缩放
            zoom: 1.15, //默认显示级别
            scaleLimit: {
              min: 1,
              max: 3,
            }, //缩放级别
            itemStyle: {
              normal: {
                areaColor: "#12235c",
                borderColor: "#57FFFD",
                borderWidth: this.fontSize(0.015),
                shadowColor: "rgb(58,115,192)", // 底层地图的阴影，为了立体效果
                shadowOffsetX: this.fontSize(0.1),
                shadowOffsetY: this.fontSize(0.11),
              },
              emphasis: {
                areaColor: "#2AB8FF",
                borderWidth: 0,
                color: "green",
              },
            },
          },
        ],
        series: [
          {
            type: "map", //该对象是第二层地图，为了实现立体效果，两层地图叠加
            roam: false,
            zoom: 1.15, //默认显示级别
            scaleLimit: {
              min: 1,
              max: 3,
            }, //缩放级别
            map: "kaifuqu", // 3、注意名字保持一致

            itemStyle: {
              normal: {
                // areaColor: "#00295d", //每块区域的颜色
                areaColor: {
                  image: mapBg, //每块区域使用图片做背景
                  repeat: "no-repeat",
                },
                borderColor: "#57FFFD",
                borderWidth: this.fontSize(0.03),
              },
              emphasis: {
                // 点击高亮显示设置
                areaColor: "#2ab8ff",
                shadowColor: "#4ba4f2",
                shadowBlur: this.fontSize(0.2),
                borderWidth: this.fontSize(0.02),
                borderColor: "#3B5077",
                borderWidth: this.fontSize(0.03),
              },
            },
            label: {
              // 地图上街道名字显示设置
              normal: {
                show: true,
                textStyle: {
                  color: "#57FFFD",
                  fontSize: this.fontSize(0.18),
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
          },
          {
            // 改对象是地图上的点（政府的点）
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.scatterData,
            symbol: star, // 改点使用五角星标注
            symbolSize: this.fontSize(0.4),
            label: {
              // 设置点标注字体的样式
              normal: {
                formatter: function (p) {
                  return "{a|" + p.data.name + "}"; //这里的a与下方rich里定义的名字对应
                },
                position: "bottom",
                color: "#fff",
                show: true,
                rich: {
                  a: {
                    borderRadius: 5,
                    color: "#4FF08E",
                    fontSize: this.fontSize(0.16),
                    backgroundColor: "rgba(0,0,0,0.6)",
                    shadowColor: "#4FF08E",
                    // shadowOffsetX: -6,
                    // shadowOffsetY: -10,
                    shadowBlur: this.fontSize(0.1),
                    textAlign: "center",
                    padding: [
                      this.fontSize(0.05),
                      this.fontSize(0.08),
                      this.fontSize(0.1),
                      this.fontSize(0.08),
                    ],
                  },
                },
              },

              emphasis: {
                show: true,
              },
            },
          },
          {
            // 改对象是地图上的点除了政府其他的点
            name: "",
            type: "effectScatter", //采用水波纹点
            coordinateSystem: "geo",
            data: this.scatterData1,
            color: "yellow",
            symbolSize: this.fontSize(0.1),
            rippleEffect: {
              number: 3, // 波纹的数量
              scale: 5, // 波纹的最大缩放比例
            },
            label: {
              normal: {
                formatter: function (p) {
                  return "{a|" + p.data.name + "}";
                },
                position: "bottom",
                color: "#fff",
                show: true,
                rich: {
                  a: {
                    borderRadius: 5,
                    color: "#57FFFD",
                    fontSize: this.fontSize(0.16),
                    backgroundColor: "rgba(0,0,0,0.6)",
                    shadowColor: "#02F5F2",
                    // shadowOffsetX: -6,
                    // shadowOffsetY: -10,
                    shadowBlur: this.fontSize(0.1),
                    textAlign: "center",
                    padding: [
                      this.fontSize(0.05),
                      this.fontSize(0.08),
                      this.fontSize(0.1),
                      this.fontSize(0.08),
                    ],
                  },
                },
              },

              emphasis: {
                show: true,
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";
</style>