系统定制开发使用Echarts根据经纬度给地图画点画线

1、相关介绍

在使用Echar系统定制开发进行绘制地图对象，系统定制开发首先我们需要地图的json文件，Echarts系统定制开发依赖默认会引入这个相关的json文件，系统定制开发所以后续使用这个地图系统定制开发可以之间引用这里的json系统定制开发文件进行绘制Echarts地图。

系统定制开发但是在后续重新构建项目的时候发现了一个问题，Echarts的依赖包下没有这个map文件了，我心想这不人麻了，这json文件我要去哪找。后面再对比版本之后发现，在5.0版本之前Echarts会默认将这些Map的json文件进行打包,但是在5.0之后就不会对这个进行打包加入到依赖之中了,可以看一下官网升级指南。

那说来说去还是这个json文件要去哪找,在这里我们可以在5.0版本之前的Echarts当中复制过来,或者我们可以从这里 进行下载json文件进行使用

2、地图绘制

先给一个用于绘制地图的canvas的div

<div id="china-map" style="width: 100%;height: 100%;"></div>
1

之后我们在当前vue导入echarts和前面下载的地市的json文件，并且这里使用的是5的版本，对于4的版本还可以采用以下方式引入，这里绘制地图以安徽为例。

  // 5.0以前  import echarts from 'echarts';  // 5.0以后  import * as echarts from 'echarts';  import JSON from '../mapJson/anhui.json';
1
2
3
4
5

往下就是构建地图所需要使用的Echarts对象了，这里先定义一个mapOption对象，之后我们直接在方法当中对这个mapOption进行赋值

this.mapOption= {          color: ['#5470c6'],          tooltip: {            trigger: 'item',            renderMode: 'html',            // 触发方式            triggerOn: 'click',            enterable: true,            backgroundColor: '#fff',            padding: 0,            textStyle: {              color: '#000',              fontSize: '12'            },            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'          },          dispatchAction: {            type: 'downplay'          },          roam: false,          roamController: {            show: true,            x: 'right',            mapTypeControl: {              china: true            }          },          series: [],          geo: {            show: true,            map: 'anhui',            type: 'map',            mapType: 'anhui',            roam: false,            label: {              normal: {                // 显示省份标签                show: false,                textStyle: {                  color: '#fff',                  fontSize: 10                }              },              emphasis: {                // 对应的鼠标悬浮效果                show: true,                // 选中后的字体样式                textStyle: {                  color: '#000',                  fontSize: 14                }              }            },            itemStyle: {              color: '#ddb926',              normal: {                areaColor: '#8abcd1',                borderColor: '#fff',                borderWidth: 1              },              emphasis: {                borderWidth: 0.5,                borderColor: '#8abcd1',                areaColor: '#fff'              }            },            emphasis: {              label: {                show: false              }            }          }        }
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

最后直接获取，以及前面定义的div对象，将这里初始化了的mapOption进行传入即可：

		echarts.registerMap('anhui', JSON, {});        const myChart = echarts.init(          document.getElementById('china-map'),        );        myChart.setOption(this.mapOption);        window.addEventListener('resize', () => {          myChart.resize();        });
1
2
3
4
5
6
7
8

之后可以查看效果：这样的话对于一个绘制地图也就基本上完成了。
同样的举一反三，对于绘制其他地市的地图，我们只需要导入其他地市的json即可，

import JSON from '../mapJson/zhejiang.json';
1

并且将mapOption下的geo的map和mapType进行响应的调整即可，其余代码都可进行复用，不必修改：查看效果：

3、根据经纬度进行标点画线

这里还是先继续用安徽的地图来进行说明，这里的Echarts来进行绘制点和线主要就是通过叠加，也就是在地图上分别使用Echarts进行画点画线。而对于绘制点和线直接在series当中进行添加相关配置即可。

		{              name: '',              type: 'scatter',              coordinateSystem: 'geo',              color: ['#000'],              tooltip: {                position: "right",                color: "#000",                formatter(d) {                  console.log(d)                  return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;                },              },              data: dataGeo,            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里点的数据 dataGeo 要进行构建：其结构如下：分别是城市名称与其经纬度。

        mapPointData.push({          name: '六安',          value: [116.50, 31.75]        })        mapPointData.push({          name: '马鞍山',          value: [118.51, 31.68]        })        mapPointData.push({          name: '宿州',          value: [116.98, 33.63]        })
1
2
3
4
5
6
7
8
9
10
11
12

这样添加完成之后可以进行浏览页面查看效果：到这里根据经纬度进行绘制点也就完成了。
同样的绘制线也和点一样，同样在series当中再添加一个绘制线的对象.

            {              name: "",              type: "lines",              zlevel: 6,              lineStyle: {                type: 'solid',                width: 1,                opacity: 1,                curveness: 0,                orient: 'horizontal',                color: "#000",              },              show: true,              data: lineData,              tooltip: {                position: "right",                color: "#000",                formatter(d) {                  console.log(d)                  return `<div style="padding: 5px 10px;"> 【${d.data.point[0]}】< ---- >【${d.data.point[1]}】</div>`;                },              },            },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

同样的我们需要对线的数据lineData进行构建：数据格式如下：分别表示起始地市的名称与其对应地市的经纬度

        lineData.push({          point: ['六安', '马鞍山'],          coords: [            [116.50, 31.75],            [118.51, 31.68]          ],        })        lineData.push({          point: ['宿州', '马鞍山'],          coords: [            [116.98, 33.63],            [118.51, 31.68]          ],        })        lineData.push({          point: ['宿州', '六安'],          coords: [            [116.98, 33.63],            [116.50, 31.75]          ],        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

最后还是查看效果：
gitee 源码地址，采用vue-cli搭建的项目，拉取项目后先 npm install 再 npm run dev 运行

git地址：https://gitee.com/lizuoqun/web-lzq-echarts.git