<template>
	<div className="overview_mian_mapBox" id="mapChart" ref="mapChart"></div>
</template>
<script name="test">
import * as echarts from 'echarts'
import axios from 'axios'
import heilongjiang from '@/assets/heilongjiangJSON/heilongjiang.json'
import daqing from '@/assets/heilongjiangJSON/daqing.json'
import daxinganling from '@/assets/heilongjiangJSON/daxinganling.json'
import haerbin from '@/assets/heilongjiangJSON/haerbin.json'
import hegang from '@/assets/heilongjiangJSON/hegang.json'
import heihe from '@/assets/heilongjiangJSON/heihe.json'
import jiamusi from '@/assets/heilongjiangJSON/jiamusi.json'
import jixi from '@/assets/heilongjiangJSON/jixi.json'
import mudanjiang from '@/assets/heilongjiangJSON/mudanjiang.json'
import qiqihaer from '@/assets/heilongjiangJSON/qiqihaer.json'
import qitaihe from '@/assets/heilongjiangJSON/qitaihe.json'
import shuangyashan from '@/assets/heilongjiangJSON/shuangyashan.json'
import suihua from '@/assets/heilongjiangJSON/suihua.json'
import yichun from '@/assets/heilongjiangJSON/yichun.json'
import base64Img from '@/assets/images/mapPage/base64Img.js'
export default {
	name: 'heilongjiangCityToDistrict',
	data() {
		return {
			pointList: {
				heilongjiangCity: [
					{ name: '大庆', cp: [124.705742,46.357625] },
					{ name: '大兴安岭', cp: [124.201147,52.341079] },
					{ name: '哈尔滨', cp: [127.966759,45.648633] },
					{ name: '鹤岗', cp: [130.807059,47.644529] },
					{ name: '黑河', cp: [126.988643,49.282601] },
					{ name: '佳木斯', cp: [132.204856,47.248466] },
					{ name: '鸡西', cp: [132.297639,45.635227] },
					{ name: '牡丹江', cp: [129.895544,44.607512] },
					{ name: '齐齐哈尔', cp: [124.557904,47.710767] },
					{ name: '七台河', cp: [130.943937,45.881675] },
					{ name: '双鸭山', cp: [132.623042,46.721849] },
					{ name: '绥化', cp: [126.658429,46.904079] },
					{ name: '伊春', cp: [129.224747,47.830729] }
				],
				daqing: [
					{ name: '萨尔图区', cp: [125.061613,46.707789] },
					{ name: '龙凤区', cp: [125.126676,46.525707] },
					{ name: '让胡路区', cp: [124.778186,46.702338] },
					{ name: '红岗区', cp: [124.882963,46.350759] },
					{ name: '大同区', cp: [124.683351,46.07855] },
					{ name: '肇州县', cp: [125.300039,45.835306] },
					{ name: '肇源县', cp: [124.761625,45.642848] },
					{ name: '林甸县', cp: [124.898566,47.152984] },
					{ name: '杜尔伯特蒙古族自治县', cp: [124.237738,46.55838] }
				],
				daxinganling: [
					{ name: '漠河市', cp: [122.708322,52.939967] },
					{ name: '加格达奇区', cp: [124.138005,50.375673] },
					{ name: '呼玛县', cp: [124.905528,51.806434] },
					{ name: '塔河县', cp: [124.63412,52.711298] },
				],
				haerbin: [
					{ name: '道里区', cp: [126.373347,45.668664] },
					{ name: '南岗区', cp: [126.57275,45.650527] },
					{ name: '道外区', cp: [126.893475,45.847448] },
					{ name: '平房区', cp: [126.665235,45.58458] },
					{ name: '松北区', cp: [126.434402,45.913435] },
					{ name: '香坊区', cp: [126.781726,45.698799] },
					{ name: '呼兰区', cp: [126.809801,46.133447] },
					{ name: '阿城区', cp: [127.162108,45.479923] },
					{ name: '双城区', cp: [126.182557,45.403569] },
					{ name: '依兰县', cp: [129.715068,46.268547] },
					{ name: '方正县', cp: [128.943056,45.814215] },
					{ name: '宾县', cp: [127.65409,45.778069] },
					{ name: '巴彦县', cp: [127.31892,46.335125] },
					{ name: '木兰县', cp: [127.925557,46.240125] },
					{ name: '通河县', cp: [128.755965,46.24237] },
					{ name: '延寿县', cp: [128.457185,45.488029] },
					{ name: '尚志市', cp: [128.317371,45.077956] },
					{ name: '五常市', cp: [127.484789,44.766503] }
				],
				hegang: [
					{ name: '向阳区', cp: [130.296455,47.339377] },
					{ name: '工农区', cp: [130.266138,47.317975] },
					{ name: '南山区', cp: [130.287309,47.281452] },
					{ name: '兴安区', cp: [130.150352,47.246092] },
					{ name: '东山区', cp: [130.418188,47.251774] },
					{ name: '兴山区', cp: [130.32132,47.387203] },
					{ name: '萝北县', cp: [130.57235,47.784893] },
					{ name: '绥滨县', cp: [131.848743,47.477805] }
				],
				heihe: [
					{ name: '爱辉区', cp: [126.733255,50.225369] },
					{ name: '逊克县', cp: [128.612059,49.036567] },
					{ name: '孙吴县', cp: [127.326919,49.397597] },
					{ name: '北安市', cp: [127.106492,48.110797] },
					{ name: '五大连池市', cp: [127.185552,48.685818] },
					{ name: '嫩江市', cp: [125.76615,49.604607] }
				],
				jiamusi: [
					{ name: '向阳区', cp: [130.359814,46.818292] },
					{ name: '前进区', cp: [130.407338,46.775985] },
					{ name: '东风区', cp: [130.446855,46.799941] },
					{ name: '郊区', cp: [130.268488,46.772211] },
					{ name: '桦南县', cp: [130.709063,46.283451] },
					{ name: '桦川县', cp: [130.948398,46.981601] },
					{ name: '汤原县', cp: [129.911645, 46.735327] },
					{ name: '同江市', cp: [133.267156,47.828699] },
					{ name: '富锦市', cp: [132.531211,47.164848] },
					{ name: '抚远市', cp: [134.276606,47.966858] }
				],
				jixi: [
					{ name: '鸡冠区', cp: [130.950185,45.288532] },
					{ name: '恒山区', cp: [130.913982,45.158084] },
					{ name: '滴道区', cp: [130.740863,45.364378] },
					{ name: '梨树区', cp: [130.739041,45.084128] },
					{ name: '城子河区', cp: [131.019558,45.377254] },
					{ name: '麻山区', cp: [130.541203,45.204504] },
					{ name: '鸡东县', cp: [131.218803,45.265887] },
					{ name: '虎林市', cp: [133.113612,45.991345] },
					{ name: '密山市', cp: [132.169979,45.463473] }
				],
				mudanjiang: [
					{ name: '东安区', cp: [129.834861,44.385592] },
					{ name: '阳明区', cp: [129.874721,44.660181] },
					{ name: '爱民区', cp: [129.514243,44.708453] },
					{ name: '西安区', cp: [129.533997,44.490417] },
					{ name: '林口县', cp: [130.032332,45.44] },
					{ name: '绥芬河市', cp: [131.095149,44.401989] },
					{ name: '海林市', cp: [129.218049,44.908403] },
					{ name: '宁安市', cp: [129.210232,44.053833] },
					{ name: '穆棱市', cp: [130.421978,44.570685] },
					{ name: '东宁市', cp: [130.840358,44.021379] }
				],
				qiqihaer: [
					{ name: '龙沙区', cp: [123.922001,47.269065] },
					{ name: '建华区', cp: [124.016527,47.401273] },
					{ name: '铁锋区', cp: [124.240846,47.287161] },
					{ name: '昂昂溪区', cp: [123.959687,47.136353] },
					{ name: '富拉尔基区', cp: [123.590228,47.222379] },
					{ name: '碾子山区', cp: [122.925333,47.578383] },
					{ name: '梅里斯达斡尔族区', cp: [123.859514,47.563791] },
					{ name: '龙江县', cp: [123.080975,47.24642] },
					{ name: '依安县', cp: [125.288013,47.700556] },
					{ name: '泰来县', cp: [123.551063,46.598159] },
					{ name: '甘南县', cp: [123.836525,48.004787] },
					{ name: '富裕县', cp: [124.566231,47.662945] },
					{ name: '克山县', cp: [125.699713,48.161786] },
					{ name: '克东县', cp: [126.34414,48.004388] },
					{ name: '拜泉县', cp: [126.01491,47.585918] },
					{ name: '讷河市', cp: [125.069101,48.475872] }
				],
				qitaihe: [
					{ name: '新兴区', cp: [131.162257,45.958252] },
					{ name: '桃山区', cp: [130.992785,45.758662] },
					{ name: '茄子河区', cp: [131.464111,45.887993] },
					{ name: '勃利县', cp: [130.489212,45.829924] }
				],
				shuangyashan: [
					{ name: '尖山区', cp: [131.171984,46.645541] },
					{ name: '岭东区', cp: [131.193643,46.487647] },
					{ name: '四方台区', cp: [131.2822,46.673572] },
					{ name: '宝山区', cp: [131.516921,46.525767] },
					{ name: '集贤县', cp: [131.145553,46.815619] },
					{ name: '友谊县', cp: [131.849444,46.783439] },
					{ name: '宝清县', cp: [132.396406,46.404143] },
					{ name: '饶河县', cp: [133.79731,47.130859] }
				],
				suihua: [
					{ name: '北林区', cp: [126.950889,46.741733] },
					{ name: '望奎县', cp: [126.58614,46.863437] },
					{ name: '兰西县', cp: [126.207342,46.35243] },
					{ name: '青冈县', cp: [125.949701,46.840916] },
					{ name: '庆安县', cp: [127.510024,46.879203] },
					{ name: '明水县', cp: [125.834688,47.195074] },
					{ name: '绥棱县', cp: [127.716712,47.579065] },
					{ name: '安达市', cp: [125.378423,46.529838] },
					{ name: '肇东市', cp: [125.842965,46.004307] },
					{ name: '海伦市', cp: [126.885178,47.438796] }
				],
				yichun: [
					{ name: '伊美区', cp: [129.271167,47.757325] },
					{ name: '乌翠区', cp: [128.571433,47.632725] },
					{ name: '友好区', cp: [128.66894,48.077392] },
					{ name: '嘉荫县', cp: [130.001867,48.764532] },
					{ name: '汤旺县', cp: [129.461378,48.605304] },
					{ name: '丰林县', cp: [129.376317,48.23738] },
					{ name: '大箐山县', cp: [128.925056,46.868408] },
					{ name: '南岔县', cp: [129.381017,47.07615] },
					{ name: '金林区', cp: [129.543594,47.499335] },
					{ name: '铁力市', cp: [128.289584,46.919713] },
					
				]
			},
			mapOption: {
				tooltip: {
					triggerOn: "mousemove",
					trigger: 'item',
					backgroundColor: 'rgba(6, 54, 125, 0.6)',
					borderColor: 'rgba(0, 244, 251, 0.3)',
					borderWidth: 1,
					padding: 0,
					textStyle: {
						textAlign: 'center'
					},
					formatter: function (params) {
						//在需要的地方调用 request()
						const request = async (api) => {
							return await axios.get(api)
						}
						console.log(params.name)
						//当鼠标悬停在地市区域上时，显示的是项目数，当你悬停到小气球上时，显示的是项目数：经度，维度，项目数。我们需要调整toolTip，让其根据不同的数据源，进行判断，从而实现数据显示的统一性
						var toolTiphtml = ''
						toolTiphtml = `<div style="padding: 15px;box-shadow: 1px 1px 15px rgba(0, 244, 251, 0.51) inset; width: 240px;text-align: center;">
							<h3 style="font-size: 22px; font-family: PangMenZhengDao;color: #fefefe;height: 36px;line-height: 36px;background: linear-gradient( 90deg, rgba(100, 224, 255, 0) 0%, rgba(92, 242, 255, 0.36) 34%, rgba(92, 242, 255, 0.36) 70%, rgba(97, 246, 255, 0) 100% );">${params.value[2]}</h3>
							<div width: 100%; font-size: 14px; font-family: PingFang; font-weight: 500; color: #ffffff; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; flex-direction: column; align-content: flex-start;>
								<p v-for="(item, index) in subData" style="margin: 0px; padding: 4px; background: linear-gradient( 90deg, rgba(100, 224, 255, 0.1) 0%, rgba(92, 242, 255, 0.2) 34%, rgba(92, 242, 255, 0.2) 70%, rgba(97, 246, 255, 0.1) 100% )">
									{{ item.name }}：<span>{{ item.value }}</span>
								</p>
							</div>
						</div>`
						request('https://wx.js-whzl.com:3443/api/biz/depotMapPage/mapZoneCount?name=' + params.name).then((res) => {
							if (res.data.code === 200) {
								that.subData = res.data.data
							}
						})
						return toolTiphtml
					}
				},
				geo3D: {
					show: true,
					map: 'city',
					left: '0%',
					roam: true,
					regionHeight: 5,
					itemStyle: {
						// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
						color: '#0a599f', // 地图板块的颜色
						opacity: 1, // 图形的不透明度 [ default: 1 ]
						borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
						borderColor: '#377CC5', // 图形描边的颜色。[ default: #333 ]
						areaColor: '#2D5F9F'
					},
					emphasis: {
						label: {
							show: false,
							color: '#fff000'
						}
					},
					regions: []
				},
				geo: {
					show: true,
					map: 'city',
					aspectScale: 0.75,
					zoom: 1.2, //当前视角的缩放比例
					zlevel: -1,
					label: {
						normal: {
							//默认状态
							show: false //地图是否显示地区名字
						},
						emphasis: {
							//鼠标滑过状态
							show: false
						}
					},
					roam: true, //是否可以缩放拖动
					itemStyle: {
						normal: {
							areaColor: {
								image: base64Img.echartsBgImg, //配置图片
								repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
							},
							// areaColor: '#020916',
							borderColor: '#3B5077',
							borderWidth: 1.5, //给边界border加宽，并添加阴影
							shadowColor: '#2FC1FF', //给边界border加宽，并添加阴影
							shadowBlur: 15 //给边界border加宽，并添加阴影
						},
						emphasis: {
							areaColor: 'yellow'
						}
					}
				},
				series: [
					{
						name: 'city',
						type: 'map',
						map: 'city', // 自定义扩展图表类型
						aspectScale: 0.75,
						zoom: 1.2, //当前视角的缩放比例
						zlevel: -1,
						roam: true,
						showLegendSymbol: true,
						label: {
							normal: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '120%'
								}
							},
							emphasis: {
								// show: false,
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(255,255,255,.5)',
								borderWidth: 2,
								areaColor: {
									image: base64Img.echartsBgImg, //配置图片
									repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
								}
							},
							emphasis: {
								show: false,
								color: '#fff',
								areaColor: 'rgba(250,147,27,0.6)'
							}
						},
						// layoutCenter: ["50%", "50%"],
						// layoutSize: "180%",
						markPoint: {
							symbol: 'none'
						},
						data: [], //mapData,
						animationDurationUpdate: 0
					},
					// 柱状体的顶部
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						label: {
							normal: {
								show: true,
								formatter: function (params) {
									var name = params.name
									var value = params.value[2]
									var text = `{tline|${name}}`
									return text
								},
								color: '#fff',
								rich: {
									fline: {
										padding: [0, 25],
										color: '#fff',
										fontSize: 14,
										fontWeight: 400
									},
									tline: {
										padding: [0, 27],
										color: '#ABF8FF',
										fontSize: 12
									}
								}
							},
							emphasis: {
								show: true
							}
						},
						itemStyle: {
							color: '#00FFF6'
						},
						symbol: base64Img.topImg,
						symbolSize: [81, 41],
						symbolOffset: [0, -60],
						z: 99,
						data: [],
						animationDurationUpdate: 0
					},
					// 中间柱子
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						itemStyle: {
							color: '#00FFF6'
						},
						symbol: base64Img.centerImg,
						symbolSize: [32, 41],
						symbolOffset: [0, -20],
						z: 99,
						data: [],
						animationDurationUpdate: 0
					},
					{
						//底部
						tooltip: {
							show: true
						},
						type: 'effectScatter',
						coordinateSystem: 'geo',
						rippleEffect: {
							scale: 5, //光晕的大小
							brushType: 'stroke'
						},
						showEffectOn: 'render',
						itemStyle: {
							normal: {
								color: '#00FFFF'
							}
						},
						label: {
							normal: {
								color: '#fff'
							}
						},
						symbol: 'circle',
						symbolSize: [10, 5],
						data: [],
						zlevel: 20,
						//roma:true,
						animationDurationUpdate: 0
					}
				]
			},
			mapCityCode: 'heilongjiang' //表示加载哪个地图 地图code码
		}
	},
	mounted() {
		console.log(base64Img)
	},
	methods: {
		drawMapChart() {
			let that = this
			//在需要的地方调用 request()
			const request = async (api) => {
				return await axios.get(api)
			}
			switch (this.mapCityCode) {
				case 'heilongjiang':
					echarts.registerMap('city', heilongjiang)
					break
				case 'daqing':
					echarts.registerMap('city', daqing)
					break
				case 'daxinganling':
					echarts.registerMap('city', daxinganling)
					break
				case 'haerbin':
					echarts.registerMap('city', haerbin)
					break
				case 'hegang':
					echarts.registerMap('city', hegang)
					break
				case 'heihe':
					echarts.registerMap('city', heihe)
					break
				case 'jiamusi':
					echarts.registerMap('city', jiamusi)
					break
				case 'jixi':
					echarts.registerMap('city', jixi)
					break
				case 'mudanjiang':
					echarts.registerMap('city', mudanjiang)
					break
				case 'qiqihaer':
					echarts.registerMap('city', qiqihaer)
					break
				case 'qitaihe':
					echarts.registerMap('city', qitaihe)
					break
				case 'shuangyashan':
					echarts.registerMap('city', shuangyashan)
					break
				case 'suihua':
					echarts.registerMap('city', suihua)
					break
				case 'yichun':
					echarts.registerMap('city', yichun)
					break
			}
			// 初始化
			var mapChart = echarts.init(document.getElementById('mapChart'))
			//地图数据（用于鼠标悬停显示的数据源）
			//var data = []
			//创建一个散点数组，用于保存经纬度坐标以及项目数量，从而在地图上显示地市项目数量
			var cityProjData = []
			request('https://wx.js-whzl.com:3443/api/biz/depotMapPage/mapZoneCount?name=黑龙江省').then((res) => {
				if (res.data.code === 200) {
					let data = res.data.data
					//将城市数据整理到地图数据中
					data.forEach(function (v) {
						
						// data.push({
						// 	name: name,
						// 	value: Math.round(Math.random() * 10 + 10)
						// })
						//标注点数据
						cityProjData.push({
							name: v.name,// 地区名称
							value: v.value //将坐标数组和项目数量组合到一个数组中
						})
					})
					this.mapOption.series[0].data = cityProjData //保存散点图点
					this.mapOption.series[1].data = cityProjData //保存散点图底部
					this.mapOption.series[2].data = cityProjData //保存散点图中间柱子
					this.mapOption.series[3].data = cityProjData //保存散点图顶部背景
					//结束
					mapChart.setOption(this.mapOption, true)

					var provinces = [ 'daqing', 'daxinganling', 'haerbin', 'hegang', 'heihe', 'jiamusi', 'jixi', 'mudanjiang', 'qiqihaer', 'qitaihe', 'shuangyashan', 'suihua', 'yichun']
					var provincesText = [ '大庆市', '大兴安岭地区', '哈尔滨市', '鹤岗市', '黑河市', '佳木斯市', '鸡西市', '牡丹江市', '齐齐哈尔市', '七台河市', '双鸭山市', '绥化市', '伊春市' ]
					
					mapChart.on('click', function (param) {
						that.mapCityCode = provinces[provincesText.indexOf(param.name)] || 'heilongjiang'  //通过汉字找到索引在匹配拼音找对应地图JSON
						that.getCityMapOpt()
					})
				}
				
			})
			
		},
		//显示各市地图
		getCityMapOpt() {
			switch (this.mapCityCode) {
				case 'heilongjiang':
					echarts.registerMap('city', heilongjiang)
					break
				case 'daqing':
					echarts.registerMap('city', daqing)
					break
				case 'daxinganling':
					echarts.registerMap('city', daxinganling)
					break
				case 'haerbin':
					echarts.registerMap('city', haerbin)
					break
				case 'hegang':
					echarts.registerMap('city', hegang)
					break
				case 'heihe':
					echarts.registerMap('city', heihe)
					break
				case 'jiamusi':
					echarts.registerMap('city', jiamusi)
					break
				case 'jixi':
					echarts.registerMap('city', jixi)
					break
				case 'mudanjiang':
					echarts.registerMap('city', mudanjiang)
					break
				case 'qiqihaer':
					echarts.registerMap('city', qiqihaer)
					break
				case 'qitaihe':
					echarts.registerMap('city', qitaihe)
					break
				case 'shuangyashan':
					echarts.registerMap('city', shuangyashan)
					break
				case 'suihua':
					echarts.registerMap('city', suihua)
					break
				case 'yichun':
					echarts.registerMap('city', yichun)
					break
			}
			var mapChart = echarts.init(document.getElementById('mapChart'))
			this.mapOption.geo.map = 'city'

			//地图数据（用于鼠标悬停显示的数据源）
			//var data = []
			//创建一个散点数组，用于保存经纬度坐标以及项目数量，从而在地图上显示地市项目数量
			var cityProjData = []

			//将城市数据整理到地图数据中
			this.pointList[this.mapCityCode].forEach(function (v) {
				// 地区名称
				var name = v.name
				// data.push({
				// 	name: name,
				// 	value: Math.round(Math.random() * 10 + 10)
				// })
				//标注点数据
				cityProjData.push({
					name: name,
					value: v.cp.concat(Math.round(Math.random() * 10 + 10)) //将坐标数组和项目数量组合到一个数组中
				})
			})
			this.mapOption.series[0].data = cityProjData //保存散点图点
			this.mapOption.series[1].data = cityProjData //保存散点图底部
			this.mapOption.series[2].data = cityProjData //保存散点图中间柱子
			this.mapOption.series[3].data = cityProjData //保存散点图顶部背景
			//结束

			//this.mapOption.series[0].data = this.pointList
			mapChart.setOption(this.mapOption, true)
		}
	},
	mounted() {
		this.drawMapChart()
	}
}
</script>

<style lang="less" scoped>
#mapChart {
	height: 100vh;
}
</style>