在vue、react里边使用Echarts自定义省市县地图_echarts + react 根据省份名称 实现纯展示的省级地图

前言

自定义地图很麻烦，需要各种网上找资源，csdn这个坑爹货，把这些地图资源的积分抬得老高，动不动就是四五十个积分。不过幸好，我们还有个马爸爸。

阿里的开源做的相当棒，所以在此我们需要感谢阿里的开发者们，今天在公司大佬的指点下，我打开了 地图选择器，这是一个可以随心所以选择下载地图json数据的网站，地图的精确度也比网上那些贵的死的资源包要高。于是，我一时激动，写下了这片文章。

现在话不多说，开始教大家随心所欲的实现想要展示的地图；

------更新了一下地图代码

先给看效果

黔西南地图

第一步：下载地图资源

我们进入到 地图选择器 里边，会发现有个大地图可以点击以及缩放，选择我们想要的地图，然后左下角进行下载；经过我的测试这个地图是可以通过使用echarts.registerMap这个api进行加载的；文件命名什么的，就随便各位来做了；比如我现在随便下载一个贵州省黔西南州的地图，命名 “黔西南布依族苗族自治州.json”

第二步：对地图资源进行注册

我们需要准备一个地图导出文件，因为react下载的echarts包这边遵循的AMD规范，所以我们也需要准备一个关于echarts的AMD导出规范文件；

导出文件代码文件名 myMap.js

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['exports', 'echarts'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('echarts'));
  } else {
    // Browser globals
    factory({}, root.echarts);
  }
})(this, function(exports, echarts) {
  var log = function(msg) {
    if (typeof console !== 'undefined') {
      console && console.error && console.error(msg);
    }
  };
  if (!echarts) {
    log('ECharts is not Loaded');
    return;
  }
  if (!echarts.registerMap) {
    log('ECharts Map is not loaded');
    return;
  }

  // 获取黔西南州地图数据
  //   let json = require('../geometryCouties/522300.json');
  //   let json = require('../GeoJSON/522300_full.json');
  let json = require('./黔西南布依族苗族自治州.json');
  
  // 注册地图
  echarts.registerMap('黔西南州', json);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

第三步：react渲染地图

下载安装echarts包这些操作应该不需要我多说什么吧，下面直接上react代码
配置title
配置地图
配置城市坐标（城市坐标可以去上面地图json文件里去找）

import React from 'react';
import echarts from 'echarts/lib/echarts';
import './myMap.js';

const scatterData = [
  { name: '兴义市', value: [104.897982, 25.088599] },
  { name: '安龙县', value: [105.471498, 25.108959] },
  { name: '兴仁市', value: [105.192778, 25.431378] },
  { name: '普安县', value: [104.955347, 25.786404] },
  { name: '晴隆县', value: [105.218773, 25.832881] },
  { name: '贞丰县', value: [105.650133, 25.385752] },
  { name: '望谟县', value: [106.091563, 25.166667] },
  { name: '册亨县', value: [105.81241, 24.983338] },
];
const option = {
  title: {
    text: '黔西南州',
    subtext: '兴义市',
    left: 'center',
  },
  geo: {
    map: '黔西南州',
    roam: false,
    zoom: 1.2,
    itemStyle: {
      normal: {
        borderWidth: 2,
        borderColor: '#0090fe', //边框颜色
        areaColor: '#003399', //地图区域颜色
      },
      emphasis: {
        show: 'true',
        borderWidth: 4,
        borderColor: '#b2163c', //边框颜色
        areaColor: '#531f67', //鼠标移上去的颜色
      },
    },
    label: {
      normal: {
        color: '#fff',
        fontWeight: 'bold',
        show: true,
      },
      emphasis: {
        color: '#fff',
        fontWeight: 'bold',
        show: true,
      },
    },
  },
  series: [
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      data: scatterData,
      symbolSize: 16, //点的尺寸
      symbol: 'circle',
      color: '#00ff00',
    },
  ],
};

/**
 * 地图
 */
class Maps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    let myChart = echarts.init(document.getElementById('Box'));
    myChart.setOption(option);
  }

  render() {
    return (
      <div>
        <div id="Box" style={{ height: '500px' }} />
      </div>
    );
  }
}

export default Maps;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

vue渲染地图

<template>
    <div class="box absolute" ref="box">
        <!-- 图表 -->
        <div id="myMap"></div>
    </div>
</template>

<script>

import echarts from 'echarts/lib/echarts';
import './myMap.js';

const scatterData = [
  { name: '兴义市', value: [104.897982, 25.088599] },
  { name: '安龙县', value: [105.471498, 25.108959] },
  { name: '兴仁市', value: [105.192778, 25.431378] },
  { name: '普安县', value: [104.955347, 25.786404] },
  { name: '晴隆县', value: [105.218773, 25.832881] },
  { name: '贞丰县', value: [105.650133, 25.385752] },
  { name: '望谟县', value: [106.091563, 25.166667] },
  { name: '册亨县', value: [105.81241, 24.983338] },
];

export default {
    data(){

        return {
            myData: [],
        }

    },
    mounted(){
        // 绘制地图
        this.drawLine(this.myData);
    },
    methods:{
        // 绘制地图
        // @params data string 自定义构建数据
        drawLine(chartData){

            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myMap'))

            // 绘制图表
            myChart.setOption({
			  title: {
			    text: '黔西南州',
			    subtext: '兴义市',
			    left: 'center',
			  },
			  geo: {
			    map: '黔西南州',
			    roam: false,
			    zoom: 1.2,
			    itemStyle: {
			      normal: {
			        borderWidth: 2,
			        borderColor: '#0090fe', //边框颜色
			        areaColor: '#003399', //地图区域颜色
			      },
			      emphasis: {
			        show: 'true',
			        borderWidth: 4,
			        borderColor: '#b2163c', //边框颜色
			        areaColor: '#531f67', //鼠标移上去的颜色
			      },
			    },
			    label: {
			      normal: {
			        color: '#fff',
			        fontWeight: 'bold',
			        show: true,
			      },
			      emphasis: {
			        color: '#fff',
			        fontWeight: 'bold',
			        show: true,
			      },
			    },
			  },
			  series: [
			    {
			      type: 'scatter',
			      coordinateSystem: 'geo',
			      data: scatterData,
			      symbolSize: 16, //描点的尺寸
			      symbol: 'circle',
			      color: '#00ff00',
			    },
			  ],
            });
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94