0
点赞
收藏
分享

微信扫一扫

如何调用GeoJson呈现地图

沪钢木子 2022-04-08 阅读 50
json

 

<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>


 

举报

相关推荐

0 条评论