基于Vue的高德离线地图开发--省市县

离线地图优势

高德地图接口，个人每天免费调用次数为500次，渲染速度受网络波动影响，又或许项目部署在局域网，无法访问外网。所以需要使用离线地图。

环境需要

npm install echarts --save

下载地图离线资源包

https://hxkj.vip/demo/echartsMap/
将离线包导入到Vue项目中，资源包格式geoJson，Vue可能出现不识别情况，可将后缀名改成.Json格式。

本项目功能

本项目使用河南地图，省市下钻到县级

具体代码

<template>
    <div id="mapContainer" style="height:100%;width:100%;"></div>
</template>

<script>
    import echarts from "echarts";
    import Vue from 'vue'
    import henan from './map/410000.Json'
    import zhengzhou from './map/410000/410100.Json'
    import kaifeng from './map/410000/410200.Json'
    import luoyang from './map/410000/410300.Json'
    import pingdingshan from './map/410000/410400.Json'
    import anyang from './map/410000/410500.Json'
    import hebi from './map/410000/410600.Json'
    import xinxiang from './map/410000/410700.Json'
    import jiaozuo from './map/410000/410800.Json'
    import puyang from './map/410000/410900.Json'
    import xuchang from './map/410000/411000.Json'
    import luohe from './map/410000/411100.Json'
    import sanmenxia from './map/410000/411200.Json'
    import nanyang from './map/410000/411300.Json'
    import shanqiu from './map/410000/411400.Json'
    import xinyang from './map/410000/411500.Json'
    import zhoukou from './map/410000/411600.Json'
    import zhumadian from './map/410000/411700.Json'
    import jiyuan from './map/410000/419001.Json'
    import {getCityCode} from "../../api/LoadingRate";

    export default {
        name: "echart-map",
        data() {
            return {
                itemMap : '',
                jsonMap : {
                    '410000': henan,
                    '410100': zhengzhou,
                    '410200': kaifeng,
                    '410300': luoyang,
                    '410400': pingdingshan,
                    '410500': anyang,
                    '410600': hebi,
                    '410700': xinxiang,
                    '410800': jiaozuo,
                    '410900': puyang,
                    '411000': xuchang,
                    '411100': luohe,
                    '411200': sanmenxia,
                    '411300': nanyang,
                    '411400': shanqiu,
                    '411500': xinyang,
                    '411600': zhoukou,
                    '411700': zhumadian,
                    '419001': jiyuan
                },
                cityInfo: new Map()
            }
        },
        mounted() {
            this.initMapSelect()
        },
        methods: {
        	//初始化地图选择
            async initMapSelect() {
                this.itemMap = '410000'
                this.initMapData()
            },
            initMapData(){
                //初始化 cityCode和cityName的映射关系
                this.jsonMap[this.itemMap].features.forEach(obj =>{
                    Vue.set(this.cityInfo, obj.properties.name,obj.properties.adcode)
                })
                this.chinaConfigure()
            },
            chinaConfigure() {
                let myChart = echarts.init(document.getElementById("mapContainer")); //这里是为了获得容器所在位置
                // window.onresize = myChart.resize;
                echarts.registerMap(this.itemMap,this.jsonMap[this.itemMap])
                let option = {
                    tooltip: {}, // 鼠标移到图里面的浮动提示框
                    dataRange: {
                        show: false,
                        min: 0,
                        max: 1000,
                        text: ['High', 'Low'],
                        realtime: true,
                        calculable: true,
                    },
                    geo: { // 这个是重点配置区
                        map:  this.itemMap, // 根据名字显示中国地图，省或市地图，
                        roam: false,
                        label: {
                            normal: {
                                show: true, // 是否显示对应地名
                                textStyle: {
                                    color: '#eee'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "rgb(36, 88, 76)",
                                borderColor: '#eee'
                            },
                            emphasis: {
                                areaColor: '#8dd7fc',
                            }
                        },
                    }
                }
                myChart.setOption(option,true)
                window.onresize = myChart.resize;
                myChart.on('click', this.echartsMapClick);
            },
            //点击下钻
            echartsMapClick(params) {
                //县市层级不可下钻  济源市特殊判断
                if (this.cityInfo[params.name]+'' !== '419001' && this.cityInfo[params.name]+'' !== '济源市'){
                    if((!(this.cityInfo[params.name]+'').endsWith("00")) || (params.name+'').endsWith("县") || (params.name+'').endsWith("区")){
                        return ;
                    }
                }
                if(this.cityInfo[params.name]  == '济源市' || this.itemMap == '419001'){
                    return;
                }
                let routeUrl = this.$router.resolve({
                    path: "你的跳转路径" + this.cityInfo[params.name]
                });
                window.open(routeUrl.href, '_blank');
            }
        }
    };
</script>