vue中使用echarts实现省市地图绘制，根据数据显示不同区域颜色，点击省市切换，根据经纬度打点_vue使用echart实现城市地图

作者：小小林熬夜学编程 | 2024-02-18 18:32:04

踩

vue使用echart实现城市地图

文章目录

一、实现效果

使用echarts实现省市地图绘制
根据数据不同显示不同区域颜色
实现省市地图下钻效果
实现地图上根据经纬度打点

二、实现方法

1、安装echarts插件

npm install echarts --save
1

2、获取省市json数据

https://datav.aliyun.com/portal/school/atlas/area_selector

通过阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。

3、地图经纬度数据

经度和纬度常合称为经纬度，把地球球面上的经纬度显示在平面地图上需要采用某种地图投影。
与之相关的地理坐标系一般是指由经度、纬度和相对高度组成的坐标系，能够标示地球上的任何一个位置。

http://jingweidu.757dy.com/

4、本例中data 数据

本文以吉林省地图为例，来实现吉林省及所有市的切换效果。

在这里插入图片描述

<template>
  <div class="center-body">
      <div class="map" id="map"></div>
      <div class="rest-button" v-if="showButton" @click="reChinaMap()">返回吉林省</div>
  </div>
</template>
1
2
3
4
5
6

导入插件

import * as echarts from "echarts";
1

准备数据

export default {
  data() {
      return {
          showButton: true,//是否显示返回按钮
          currentCity: "",//当前城市
          // 市json数据名称
          province: {
              "长春市": "changchunshi",
              "吉林市": "jilinshi",
              "通化市": "tonghuashi",
              "四平市": "sipingshi",
              "白山市": "baishanshi",
              "辽源市": "liaoyuanshi",
              "白城市": "baichengshi",
              "延边朝鲜族自治州": "yanbianchaoxianzuzizhiqu",
              "松原市": "songyuanshi"
          },
      };
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5、视觉映射组件

visualMap: { // 视觉映射组件
  type: 'piecewise',
  show: true,
  bottom: '2%',
  left: '2%',
  textStyle: {
      fontsize: 12
  },
  pieces: [{
      gt: 600,
      lte: 1000,
      label: '600-1000个'
  },
  {
      gt: 400,
      lte: 600,
      label: '400-600个'
  },
  {
      gt: 200,
      lte: 400,
      label: '200-400个'
  },
  {
      gt: 0,
      lte: 200,
      label: '0-200个'
  },
  ],
  color: ['#F56C6C', '#E6A23C', '#67C23A', '#409EFF'], //自定义范围的颜色
},
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

6、标记的图形

markPoint: {
  /**
   * 标记的图形，标记类型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
   * 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
   */
  symbol: 'circle',
  //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
  symbolSize: 6, 
  //文字标签
  label: {
      show: false, //是否显示标签
      position: 'top',//标签的位置
      color: '#ffffff', //文字的颜色
      fontSize: 12 //文字的字体大小
  },
  //标注的样式
  itemStyle: {
      opacity: 0.8,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
      color: '#ffffff' //图形的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充。
  },
  silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
  /**
   * 标注的数据数组。每个数组项是一个对象：{ name: '舒兰市', coord: [126.97170, 44.41223], value: '78', symbolSize: 10, },
   * name 标注名称
   * coord 数据在相应坐标系上的坐标位置 经纬度值
   * value 标注值，可以不设。
   * symbolSize 标记的大小，可以单独设置每个标记的大小
   */
  data: markData
},
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

7、地图渲染

series: [{
  type: 'map',
  map: name,
  zoom: 1.2,
  top: '10%',
  x: 'center',
  label: {
      show: true,
      color: '#770928'
  },
  itemStyle: {
      normal: { // 静态的时候显示的默认样式
          borderWidth: 1, // 边框宽度
          areaColor: '#C0C4CC', // 地图颜色
          borderColor: '#ffffff' // 边框颜色
      },
      emphasis: { // 鼠标移入动态的时候显示的默认样式
          borderWidth: 2, // 边框宽度
          areaColor: '#909399' // 地图颜色
      }
  },
}],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

8、点击切换市地图

myChart.on('click', e => {
  this.darwProvniceMap(e)
})

// 切换市
darwProvniceMap(val) {
  this.currentCity = val.name
  if (this.province[val.name]) {
      let json = require(`@/json/${this.province[val.name]}.json`)
      this.drawMap(this.province[val.name], json)
      this.showButton = true
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13

三、实例代码已上传，去顶部可下载

附全部代码

<template>
  <div class="center-body">
      <div class="map" id="map"></div>
      <div class="rest-button" v-if="showButton" @click="reChinaMap()">返回吉林省</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
      return {
          showButton: true,//是否显示返回按钮
          currentCity: "",//当前城市
          // 市json数据名称
          province: {
              "长春市": "changchunshi",
              "吉林市": "jilinshi",
              "通化市": "tonghuashi",
              "四平市": "sipingshi",
              "白山市": "baishanshi",
              "辽源市": "liaoyuanshi",
              "白城市": "baichengshi",
              "延边朝鲜族自治州": "yanbianchaoxianzuzizhiqu",
              "松原市": "songyuanshi"
          },
          //地图展示数据
          mapData: [
              {
                  name: '长春市',
                  value: '92',
                  mapArea: [
                      { name: '南关区', value: '50' },
                      { name: '宽城区', value: '100'},
                      { name: '朝阳区', value: '150' },
                      { name: '二道区', value: '200'},
                      { name: '绿园区', value: '300' },
                      { name: '双阳区', value: '400'},
                      { name: '九台区', value: '500' },
                      { name: '农安县', value: '600'},
                      { name: '榆树市', value: '700'},
                      { name: '德惠市', value: '800'},
                      { name: '公主岭市', value: '900'},
                  ],
                  markPoints: [
                      { name: '宽城区', coord: [125.33329, 44.10415]},
                      { name: '二道区', coord: [125.62065, 43.87264]},
                      { name: '双阳区', coord: [125.67145, 43.53109]},
                      { name: '九台区', coord: [125.86288, 44.21006]},
                      { name: '农安县', coord: [125.03372, 44.43899]},
                      { name: '榆树市', coord: [126.59487, 44.93444]},
                      { name: '德惠市', coord: [125.83678, 44.60390]},
                      { name: '公主岭市', coord: [124.66729, 43.84164]},
                  ]
              },
              {
                  name: '吉林市',
                  value: '963',
                  mapArea: [
                      { name: '舒兰市', value: '100' },
                      { name: '永吉县', value: '200' },
                      { name: '龙潭区', value: '300' },
                      { name: '丰满区', value: '400' },
                      { name: '船营区', value: '500' },
                      { name: '昌邑区', value: '600' },
                      { name: '磐石市', value: '700' },
                      { name: '蛟河市', value: '800' },
                      { name: '桦甸市', value: '900' },
                  ],
                  markPoints: [
                      { name: '舒兰市', coord: [127.14763, 44.34747]},
                      { name: '永吉县', coord: [126.24366, 43.58495]},
                      { name: '龙潭区', coord: [126.63733, 44.02580]},
                      { name: '丰满区', coord: [126.70059, 43.67911]},
                      { name: '船营区', coord: [126.30294, 43.83106]},
                      { name: '昌邑区', coord: [126.25877, 44.02708]},
                      { name: '磐石市', coord: [126.15245, 43.10234]},
                      { name: '蛟河市', coord: [127.35148, 43.73000]},
                      { name: '桦甸市', coord: [126.93714, 43.09717]},
                  ]
              },
              {
                  name: '通化市',
                  value: '125'
              },
              {
                  name: '四平市',
                  value: '536'
              },
              {
                  name: '白山市',
                  value: '86'
              },
              {
                  name: '辽源市',
                  value: '60'
              },
              {
                  name: '白城市',
                  value: '31'
              },
              {
                  name: '延边朝鲜族自治州',
                  value: '196'
              },
              {
                  name: '松原市',
                  value: '380'
              }
          ]
      };
  },
  created() {
      
  },
  mounted() {
      this.reChinaMap()
  },
  methods: {
      drawMap(name, json) {
          // 判断地图是否渲染
          let myChart = echarts.getInstanceByDom(document.getElementById("map"))
          // 如果渲染则清空地图 
          if (myChart != null) {
              myChart.dispose()
          }
          // 初始化地图
          myChart = echarts.init(document.getElementById("map"));
          if (!json) {
              json = require("@/json/jilin.json");
              this.showButton = false
          }

          echarts.registerMap(name, json)

          let currentCity = this.currentCity
          let seriesData = []
          let markData = []
          if (currentCity) {
              let tempData = this.mapData.filter(x => x.name == currentCity)
              seriesData = tempData[0]?.mapArea
          } else {
              seriesData = this.mapData
              this.mapData.forEach(x => {
                  if (x.markPoints) {
                      markData.push(...x.markPoints)
                  }
              })
          }
          var option = {
              visualMap: { // 视觉映射组件
                  type: 'piecewise',
                  show: true,
                  bottom: '2%',
                  left: '2%',
                  textStyle: {
                      fontsize: 12
                  },
                  pieces: [{
                      gt: 600,
                      lte: 1000,
                      label: '600-1000个'
                  },
                  {
                      gt: 400,
                      lte: 600,
                      label: '400-600个'
                  },
                  {
                      gt: 200,
                      lte: 400,
                      label: '200-400个'
                  },
                  {
                      gt: 0,
                      lte: 200,
                      label: '0-200个'
                  },
                  ],
                  color: ['#F56C6C', '#E6A23C', '#67C23A', '#409EFF'], //自定义范围的颜色
              },
              tooltip: { // 悬浮框
                  trigger: 'item', // 触发条件
                  backgroundColor: 'RGBA(136, 123, 135, 0.8)',
                  formatter: '{b}<br/>占用数：{c}个', // 自定义显示数据
                  textStyle: {
                      color: '#ffffff'
                  }
              },
              series: [{
                  type: 'map',
                  map: name,
                  zoom: 1.2,
                  top: '10%',
                  x: 'center',
                  label: {
                      show: true,
                      color: '#770928'
                  },
                  itemStyle: {
                      normal: { // 静态的时候显示的默认样式
                          borderWidth: 1, // 边框宽度
                          areaColor: '#C0C4CC', // 地图颜色
                          borderColor: '#ffffff' // 边框颜色
                      },
                      emphasis: { // 鼠标移入动态的时候显示的默认样式
                          borderWidth: 2, // 边框宽度
                          areaColor: '#909399' // 地图颜色
                      }
                  },
                  markPoint: {
                      /**
                       * 标记的图形，标记类型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                       * 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
                       */
                      symbol: 'circle',
                      //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                      symbolSize: 6, 
                      //文字标签
                      label: {
                          show: false, //是否显示标签
                          position: 'top',//标签的位置
                          color: '#ffffff', //文字的颜色
                          fontSize: 12 //文字的字体大小
                      },
                      //标注的样式
                      itemStyle: {
                          opacity: 0.8,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                          color: '#ffffff' //图形的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充。
                      },
                      silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                      /**
                       * 标注的数据数组。每个数组项是一个对象：{ name: '舒兰市', coord: [126.97170, 44.41223], value: '78', symbolSize: 10, },
                       * name 标注名称
                       * coord 数据在相应坐标系上的坐标位置 经纬度值
                       * value 标注值，可以不设。
                       * symbolSize 标记的大小，可以单独设置每个标记的大小
                       */
                      data: markData
                  },
                  // 数据
                  data: seriesData
              }],
          }
          myChart.setOption(option)

          myChart.on('click', e => {
              this.darwProvniceMap(e)
          })
          window.addEventListener("resize", () => {
              myChart.resize()
          })
      },
      // 切换市
      darwProvniceMap(val) {
          this.currentCity = val.name
          if (this.province[val.name]) {
              let json = require(`@/json/${this.province[val.name]}.json`)
              this.drawMap(this.province[val.name], json)
              this.showButton = true
          }
      },
      // 返回吉林省
      reChinaMap() {
          this.currentCity = ""
          this.drawMap('jilin')
      }
  },
}
</script>

<style scoped>
.rest-button {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  border-radius: 6px;
  font-size: 14px;
  border: 1px #770928 solid;
  color: #770928;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.map,
.center-body {
  width: 800px;
  height: 600px;
  position: relative;
}
</style>
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296

四、效果展示

在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】