vue中使用echarts 制作某市某区各个街道镇的地图

项目中需要显示杭州余杭区地图，并且需要区分街道乡镇的行政边界；

效果如下：

  

 

实现步骤：

1. 引入echarts （简单，不知道的自行百度）

　　相关options配置说明，mapOption 是主要配置，seriesData 方法是用来组装散点图数据的，代码如下：

 

export const mapOption = {
  title: {
    text: '余杭区',
    show: false
  },
  tooltip: {
    trigger: 'item',
    confine:true,
    position: 'top',
    formatter: (params) => {
      return `<div style="padding:5px;"><span style="color:#FFF;font-size: 14px;">${params.data.name}</span><br /><span style="font-size: 12px;color:#7FC8EF;line-height:16px">物业公司 : ${params.data.companyName}<br />联系信息 : ${params.data.connectMsg}</span></div>`;
    },
  },
  geo: {
    map: 'yuhang',
    aspectScale: 1,   // 地图宽高比
    width: '100%',
    left: '0',
    // roam: true,
    itemStyle: {
      areaColor: '#1B417D', // 地图颜色
      borderColor: '#326DDD', // 边框颜色
      borderWidth: 2, // 地图描边线宽
      shadowBlur: 10, // 设置阴影宽度
      shadowColor: 'rgba(255, 255, 255, .2)' // 设置阴影颜色
    },
    label: {
      show: true, // 高亮时不显示标题
      color: '#0074B3'
    },
    emphasis: {
      label: {
        show: false // 高亮时不显示标题
      },
      itemStyle: {
        areaColor: '#0074B3', // 高亮时颜色
        borderColor: '#0074B3' // 高亮时颜色
      }
    }
  },
  color: [/* 动态 */],
  legend: {
    right: 0,
    bottom: 30,
    show: false,
    data: [/* 动态 */],
    type: 'scroll',
    orient: 'vertical',
    textStyle: {
      color: '#fff'
    },
    formatter: function (name) {
      return name.split('&')[0].toString();
    }
  },
  series: [/* 动态 */]
};

export function seriesData() {
  return {
    type: 'effectScatter',
    name: '', /* 动态 */
    coordinateSystem: 'geo',
    legendHoverLink: true,
    data: [
      /* 动态 */
      { name: '1', value: [120.224326, 30.441409] }
    ],
    encode: {},
    // 点的大小
    symbolSize: function () {
      return 10;
    },
    // 何时显示动效
    showEffectOn: 'render',
    // 设置动效效果
    rippleEffect: {
      brushType: 'fill',
      scale: 4
    },

    // 高亮的标签和图形样式
    emphasis: {
      label: {

        show: false,
        formatter: (params) => {
          console.log(params);
          /*
          * "{a|这段文本采用样式a}{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}"
          * */
          return `{a|${params.data.name}\n}{b|物业公司 : ${params.data.companyName}\n}{b|联系信息 : ${params.data.connectMsg}\n}`;
        },
        rich: {
          a: {
            // backgroundColor: 'rgba(0,0,0,.5)',
            lineHeight: 24,
            color: '#FFF',
            fontSize: 14,
            padding: [10, 15],
          },
          b: {
            // backgroundColor: 'rgba(0,0,0,.5)',
            lineHeight: 20,
            // color: '#7FC8EF',
            color: '#FFF',
            padding: [10, 15],
          }
        }
      }
    },
    label: {
      formatter: '{b}',
      position: 'top',
      distance: 5, // 与图形元素的距离
      show: false
    },

    itemStyle: {
      color: 'red', /* 动态 */
      shadowColor: 'red', /* 动态 */
      shadowBlur: 8
    }
  };
}

 

2. vue 文件中初始化echarts并调用配置方法：

....
// mapoption 文件保存了第一步中的设置
import { mapOption, seriesData } from '../ecahrtsDataSet/mapOption';
.....

mounted() {
    // 这里把按需加载的echarts放到了Vue原型上，yuhangMapJson 是自定义的地图数据，registerMap方法的第一个参数'yuhang' 要和第一步option中geo.map 属性相对应
    this.$echarts.registerMap('yuhang', yuhangMapJson);
    this.chartInstance = this.$echarts.init(document.getElementById('conteiner')); // 初始化实例并保存，为数据请求完成后显示散点图
　　 this.setMapOption() // 调用第三步中methods中方法渲染地图
},

3.设置散点图数据，渲染地图：

// 设置地图及打点参数
    setMapOption() {
      mapOption.color = this.pointColor; // pointData 是散点图数据结构 [{name:'xxx',value:'xxx'}]
      mapOption.series = this.pointData.reduce((res, cur, index) => {
        const itemData = seriesData();
        itemData.name = cur.name;
        itemData.data = [cur];
        itemData.itemStyle.color = this.pointColor[index];
        itemData.itemStyle.shadowColor = this.pointColor[index];
        res.push(itemData);
        return res;
      }, []);
      this.echartsOption = mapOption;
　　　 this.chartInstance.setOption(mapOption);
    }, 

至此地图就出现在屏幕上了！！

在这个过程中最麻烦的就是获取自定义的地图 json 数据了，大致过程如下：

1.通过这个地址拿到杭州余杭区地图轮廓数据 http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 

2. 通过 bigMap 软件拿到下级街道及乡镇的地图轮廓数据，软件下载地址： http://www.bigemap.com/reader/download/detail201802016.html

3.在这个网站上拼接乡镇街道json数据数据 ： http://geojson.io/#map=10/30.3628/120.0127 

！！！ 也有简单的方法，淘宝上有卖的，三十块钱，我是出于一个不是很菜的前端的倔强没有买，毕竟是工作，自己出钱觉得亏，报销吧 30 不值得。

希望能帮助到个位小伙伴！

可私信交流，或者微信 wl1004516 ：