VUE 下钻到街道的echarts地图——geoJson

下钻到街道的echarts地图

	在echarts中有自带的geojson文件但是只有到县级，县级以下的街道是没有的

此时我们需要利用其他工具自己来写一个geojson

1. 下载一个地图软件（这里以水经微图为例）
   在左侧选择你需要的街道（或者乡镇）然后点击下载
   
   选择你需要的地图大小
   
   下载完成后会弹出文件目录，其中的.kml文件是我们需要的
   

2. 利用转换工具将.kml文件转为geojson
   这里转换工具为http://geojson.io/
   打开网站后直接将刚刚下载的.kml拖入 或者通过 Open -> File 上传下载好的 .kml文件，拖入后我们可以看到地图和边上的代码
   

3. echarts使用geojson
   将地图右侧的代码复制，自己新建一个.json文件将右侧代码复制，下面是具体的使用代码

<template>
	<div class="map" style="width: 100%;height: 100%;">
		<ECharts :id="map" :option="option"></ECharts>
	</div>
</template>


<script>
	import echarts from 'echarts';
	import cixi from '../../../../../assets/styles/cixi.json'
	export default {
		data() {
			return {
				option: {},
				mapDate: [],
				map: 'map'
			}
		},
		methods: {
			initChart() {
				this.echartObj = echarts.init(document.getElementById(this.map));
				echarts.registerMap("慈溪市", cixi)
				this.mapDate = [{
						name: '宗汉街道',
						value: [121.2197971343994, 30.228963070192805]
					},
					{
						name: '逍林镇',
						value: [121.33137702941895, 30.202558756342],
					},
					{
						name: '周巷镇',
						value: [121.13800048828125, 30.204190689021736],
					},
					{
						name: '观海卫镇',
						value: [121.42433166503905, 30.158189498907962],
					},
					{
						name: '庵东镇',
						value: [121.2022018432617, 30.36724717325868],
					},
					{
						name: '白沙路街道',
						value: [121.29678726196288, 30.197959527771424]
					},
					{
						name: '长河镇',
						value: [121.18520736694336, 30.258474107402265]
					},
					{
						name: '崇寿镇',
						value: [121.2743854522705, 30.27582067991502]
					}, {
						name: '慈东工业区',
						value: [121.5808868408203, 30.136665442339027]
					},
					{
						name: '附海镇',
						value: [121.42639160156249, 30.239641453517258]
					},
					{
						name: '古塘街道',
						value: [121.26339912414552, 30.203745619156013]
					},
					{
						name: '横河镇',
						value: [121.24443054199219, 30.131766208006642]
					},
					{
						name: '浒山街道',
						value: [121.2399673461914, 30.172808334126877]
					},
					{
						name: '坎墩街道',
						value: [121.26846313476561, 30.24727875221182]
					},
					{
						name: '匡堰镇',
						value: [121.31841659545897, 30.135626231134587]
					},
					{
						name: '慈溪市林场',
						value: [121.35262012481688, 30.093306199954938]
					},
					{
						name: '龙山镇',
						value: [121.52166366577147, 30.11127586646626]
					},
					{
						name: '慈溪市农垦场',
						value: [121.11791610717772, 30.277599642253957]
					},
					{
						name: '桥头镇',
						value: [121.36390686035155, 30.181044387831786]
					},
					{
						name: '胜山镇',
						value: [121.31747245788574, 30.24890994296491]
					},
					{
						name: '新浦镇',
						value: [121.41952514648438, 30.30027858504304]
					},
					{
						name: '掌起镇',
						value: [121.48029327392577, 30.13978301029758]
					}

				];
				this.option = {
					backgroundColor: '#02093300',
					title: {
						top: 20,
						subtext: '',
						x: 'center',
						textStyle: {
							color: '#ccc'
						}
					},
					geo: {
						map: '慈溪市',
						aspectScale: 0.7, //长宽比
						zoom: 1.3,
						roam: false,
						itemStyle: {
							normal: {
								areaColor: '#013C6200',
								shadowColor: '#182f6800',
								shadowOffsetX: 0,
								shadowOffsetY: 25
							},
							emphasis: {
								areaColor: '#2AB8FF00',
								borderWidth: 0,
								color: 'green',
								label: {
									show: false
								}
							}
						}
					},
					series: [{
							type: 'map',
							roam: true,
							label: {
								normal: {
									show: true,
									textStyle: {
										color: '#fff'
									}
								},
								emphasis: {
									textStyle: {
										color: '#fff'
									}
								}
							},

							itemStyle: {
								normal: {
									borderColor: '#2ab8ff',
									borderWidth: 1.5,
									areaColor: '#12235c'
								},
								emphasis: {
									areaColor: '#2AB8FF',
									borderWidth: 0,
									color: 'green'
								}
							},
							zoom: 1.3,
							roam: false,
							map: '慈溪市' //使用
							// data: this.difficultData //热力图数据   不同区域 不同的底色
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							showEffectOn: 'render',
							rippleEffect: {
								period: 15,
								scale: 4,
								brushType: 'fill'
							},
							hoverAnimation: true,
							itemStyle: {
								normal: {
									color: '#ffff',
									shadowBlur: 10,
									shadowColor: '#333'
								}
							},
							data: this.mapDate
						}

					]
				};

			}

		},
		mounted() {
			this.initChart();
		},
	}
</script>


<style>
</style>

在地图右侧的代码中features是地图边界线经纬度，如果有多个乡镇，只需重复上述步骤（第一个乡镇地图右侧代码全部复制，后面的只需要features里的数据），格式如下图所示