?
<template>
? ? <div id="china_map_box">
? ? ? ? <!-- v-if="deepTree.length > 1"-->
? ? ? ? <el-button type="primary" size="mini" class="back" @click="back" >最大化</el-button>
? ? ? ? <div class="echarts" id="echarts">
? ? ? ? ? ? <div class="map" id="map"></div>
? ? ? ? </div>
? ? </div>
</template>
<script>
import { disConnect } from 'echarts';
? ? import {getChinaJson, getProvinceJSON, getCityJSON} from "../api/get-json";
? ? import {cityProvincesMap} from '../config/cityChangYuanMap'
? ? import {mapOption} from '../config/mapOption'
? ? //import indexmap from '../views/indexMap';
? ? export default {
? ? ? ? name: "changYuanMap",
? ? ? ? components: {},
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? chart: null, // 实例化echarts
? ? ? ? ? ? ? ? provincesMap: cityProvincesMap.provincesMap, // 地区拼音，用于查找对应json
? ? ? ? ? ? ? ? provincesCode: cityProvincesMap.provincesCode, // 地区行政区划，用于查找对应json
? ? ? ? ? ? ? ? areaMap: cityProvincesMap.areaMap, // 地区行政区划，用于数据的查找，按行政区划查数据
? ? ? ? ? ? ? ? mapData: [], // 当前地图上的地区
? ? ? ? ? ? ? ? option: {...mapOption.basicOption}, // map的相关配置
? ? ? ? ? ? ? ? deepTree: [],// 点击地图时push，点返回时pop
? ? ? ? ? ? ? ? areaName: '长垣市', // 当前地名
? ? ? ? ? ? ? ? areaCode: '410783', // 当前行政区划
? ? ? ? ? ? ? ? //areaLevel: 'country', // 当前级别
? ? ? ? ? ? ? ? areaLevel: 'town',// 当前级别
? ? ? ? ? ? ? ? scale:1,//鼠标事件
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? this.initEcharts();
? ? ? ? ? ? ? ? this.chart.on('click', this.echartsMapClick);
? ? ? ? ? ? });
? ? ? ? ? ? document.getElementById("echarts").onmousewheel=(event)=>{
? ? ? ? ? ? var dir=event.deltaY>0?"Up":"Down";
? ? ? ? ? ? if(dir=="Up"){
? ? ? ? ? ? ? ? console.log();
? ? ? ? ? ? ? ? this.zoommin();
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? console.log();
? ? ? ? ? ? ? ? this.zoomout();
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 初次加载绘制地图
? ? ? ? ? ? initEcharts() {
? ? ? ? ? ? ? ? //地图容器
? ? ? ? ? ? ? ? this.chart = this.$echarts.init(document.getElementById('map'));
? ? ? ? ? ? ? ? if (this.areaCode === '410783') {
? ? ? ? ? ? ? ? ? ? this.requestGetChinaJson();
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.requestGetProvinceJSON({areaName: this.areaName, areaCode: this.areaCode})
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 地图点击
? ? ? ? ? ? echartsMapClick(params) {
? ? ? ? ? ? ? ? // console.log(params);
? ? ? ? ? ? ? ? this.areaName = params.areaName;
? ? ? ? ? ? ? ? if (params.name in this.provincesMap) {
? ? ? ? ? ? ? ? ? ? this.areaCode = params.data.areaCode;
? ? ? ? ? ? ? ? ? ? this.areaLevel = params.data.areaLevel;
? ? ? ? ? ? ? ? ? ? //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
? ? ? ? ? ? ? ? ? ? this.requestGetProvinceJSON(params.data);
? ? ? ? ? ? ? ? } else if (params.seriesName in this.provincesMap) {
? ? ? ? ? ? ? ? ? ? //如果是【直辖市/特别行政区】只有二级下钻
? ? ? ? ? ? ? ? ? ? if (this.special.indexOf(params.seriesName) >= 0) {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? this.areaCode = this.areaMap[params.name];
? ? ? ? ? ? ? ? ? ? ? ? this.areaLevel = params.data.areaLevel;
? ? ? ? ? ? ? ? ? ? ? ? //显示县级地图
? ? ? ? ? ? ? ? ? ? ? ? this.requestGetCityJSON(params.data)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$emit('map-change', params.data);
? ? ? ? ? ? },
? ? ? ? ? ? //绘制全国地图
? ? ? ? ? ? requestGetChinaJson() {
? ? ? ? ? ? ? ? getChinaJson().then(res => {
? ? ? ? ? ? ? ? ? ? let arr = [];
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < res.features.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? let obj = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: res.features[i].properties.name,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaName: res.features[i].properties.name,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaCode: res.features[i].id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaLevel: 'province',
? ? ? ? ? ? ? ? ? ? ? ? ? ? value: Math.round(Math.random()),
? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? ? ? arr.push(obj)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.mapData = arr;
? ? ? ? ? ? ? ? ? ? this.deepTree.push({
? ? ? ? ? ? ? ? ? ? ? ? mapData: arr,
? ? ? ? ? ? ? ? ? ? ? ? //params: {name: 'china', areaName: 'china', areaLevel: 'country', areaCode: '000000'}
? ? ? ? ? ? ? ? ? ? ? ? params: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: 'changyuanshi',
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaName: 'changyuanshi',
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaLevel: 'town',
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaCode: '410783'}
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? //注册地图
? ? ? ? ? ? ? ? ? ? //this.$echarts.registerMap('china', res);
? ? ? ? ? ? ? ? ? ? this.$echarts.registerMap('changyuanshi', res);
? ? ? ? ? ? ? ? ? ? //绘制地图
? ? ? ? ? ? ? ? ? ? //this.renderMap('china', arr);
? ? ? ? ? ? ? ? ? ? this.renderMap('changyuanshi', arr);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? // 加载省级地图
? ? ? ? ? ? requestGetProvinceJSON(params) {
? ? ? ? ? ? ? ? getProvinceJSON(params.areaCode).then(res => {
? ? ? ? ? ? ? ? ? ? this.$echarts.registerMap(params.areaName, res);
? ? ? ? ? ? ? ? ? ? let arr = [];
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < res.features.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? let obj = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: res.features[i].properties.name,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaName: res.features[i].properties.name,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaCode: res.features[i].id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? //areaLevel: 'city',
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaLevel:'town',
? ? ? ? ? ? ? ? ? ? ? ? ? ? value: Math.round(Math.random()),
? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? ? ? arr.push(obj)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.mapData = arr;
? ? ? ? ? ? ? ? ? ? this.deepTree.push({
? ? ? ? ? ? ? ? ? ? ? ? mapData: arr,
? ? ? ? ? ? ? ? ? ? ? ? params: params,
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? this.renderMap(params.areaName, arr);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? // 加载市级地图
? ? ? ? ? ? requestGetCityJSON(params) {
? ? ? ? ? ? ? ? this.areaLevel = params.areaLevel;
? ? ? ? ? ? ? ? getCityJSON(params.areaCode).then(res => {
? ? ? ? ? ? ? ? ? ? this.$echarts.registerMap(params.areaName, res);
? ? ? ? ? ? ? ? ? ? let arr = [];
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < res.features.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? let obj = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: res.features[i].properties.name,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaName: res.features[i].properties.areaName,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaCode: res.features[i].id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? areaLevel: 'districts',
? ? ? ? ? ? ? ? ? ? ? ? ? ? value: Math.round(Math.random()),
? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? ? ? arr.push(obj)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.mapData = arr;
? ? ? ? ? ? ? ? ? ? this.deepTree.push({mapData: arr, params: params});
? ? ? ? ? ? ? ? ? ? this.renderMap(params.areaName, arr);
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? renderMap(map, data) {
? ? ? ? ? ? ? ? this.option.series = [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? name: map,
? ? ? ? ? ? ? ? ? ? ? ? mapType: map,
? ? ? ? ? ? ? ? ? ? ? ? ...mapOption.seriesOption,
? ? ? ? ? ? ? ? ? ? ? ? data: data
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ];
? ? ? ? ? ? ? ? //渲染地图
? ? ? ? ? ? ? ? this.chart.setOption(this.option);
? ? ? ? ? ? },
? ? ? ? ? ? // 返回
? ? ? ? ? ? // back() {
? ? ? ? ? ? // ? ? // console.log(this.deepTree);
? ? ? ? ? ? // ? ? if (this.deepTree.length > 1) {
? ? ? ? ? ? // ? ? ? ? this.deepTree.pop();
? ? ? ? ? ? // ? ? ? ? let areaName = this.deepTree[this.deepTree.length - 1].params.areaName;
? ? ? ? ? ? // ? ? ? ? let mapData = this.deepTree[this.deepTree.length - 1].mapData;
? ? ? ? ? ? // ? ? ? ? this.$emit('back-change', this.deepTree[this.deepTree.length - 1].params);
? ? ? ? ? ? // ? ? ? ? this.renderMap(areaName, mapData);
? ? ? ? ? ? // ? ? }
? ? ? ? ? ? //},
? ? ? ? ? ? //跳转页面
? ? ? ? ? ? back(){
? ? ? ? ? ? ? ? window.location.href ='../views/indexMap';
? ? ? ? ? ? },
? ? ? ? ? ? //鼠标滑动事件
? ? ? ? ? ? zoomout(){
? ? ? ? ? ? ? console.log("out");
? ? ? ? ? ? ? document.getElementById("map").style.transform="scale("+this.scale+")";
? ? ? ? ? ? ? this.scale+=0.5;
? ? ? ? ? ? },
? ? ? ? ? ?zoommin(){
? ? ? ? ? ? ? ?console.log("min");
? ? ? ? ? ? ? ?document.getElementById("map").style.transform="scale("+this.scale+")";
? ? ? ? ? ? ? ?this.scale-=0.5;
? ? ? ? ? ? ? ?if(this.scale<0.5){
? ? ? ? ? ? ? ? this.scale=0.5;
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? }
? ? }
</script>
<style lang="scss" scoped>
? ? #china_map_box {
? ? ? ? display: flex;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? position: relative;
? ? ?
? ? ? ? .echarts {
? ? ? ? ? ? width: 0;
? ? ? ? ? ? flex: 1;
? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? #map {
? ? ? ? ? ? ? ? height: 100%;
? ? ? ? ? ? ? ? margin-top: 20px;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? .back {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: .8rem;
? ? ? ? ? ? right: .5rem;
? ? ? ? ? ? z-index: 999;
? ? ? ? ? ? padding-left: .12rem;
? ? ? ? ? ? padding-right: .12rem;
? ? ? ? }
? ? }
</style>
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
