需求

展现西安市各区县的舆图，点击各区县下钻到各乡镇/街道，只能内网环境运用，不可用经由过程百度/高德舆图来完成。

处理

应用舆图数据天生区域的geojson

收集上大部分舆图数据只是到省市，最多到区县，再往下的数据就比较难找了；经由搜刮，找到了一个能够买舆图数据的处所，数据能够准确到乡镇/街道，价钱还比较划算；

舆图数据花样为shp（shape花样），假如须要其他的花样，得加点钱猎取比方svg、dbf、shx等额外花样的文件；
echarts支撑的花样有geojson，此时我们须要一个东西把shp花样的文件转换为geojson花样，有两种东西，引荐第2种：

• 【转换东西1】在线转换东西MyGeodata Converter

这个东西是收费，每个月最多能够转换3次文件，上传时网站会提醒：

Don’t forgot to upload all relevant files to your .SHP file – you need at least also .DXF and .SHX files uploaded together with your .SHP file!

不仅要上传shp花样，还要上传dbf和shx等花样的文件，来取得更完全的地舆数据，假如把一切花样的数据都上传了，那末天生的geojson能够会有题目（亲测），所以只上传3种花样是比较稳妥的要领；

上传后会跳转到一个设置的界面，先不要点击最先转换按钮，起首检查一下转换的编码花样，默以为UTF-8，假如是中文的舆图数据，最好把转换花样切换为GB18030-Chinese花样；然后点击最先转换就能够了。

转换凌驾3个会提醒下图，这时候能够清一下浏览器缓存尝尝：

转换后能够下载到.geojson花样的数据文件，放到项目中时，把.geojson花样手动修改成.json花样，就能够被echarts运用了，直接import geojson花样的文件会报错；

• 【转换东西2】mapshaper(http://mapshaper.org/)

同时上传.dbf .shp .shx .prj花样的文件，然后点击右上角的export，就会看到以下界面，挑选geoJSON，就完成了。

应用geojson展现自定义的echart舆图

关于详细怎样导入json花样数据到echarts的要领，能够参考官方示例。
以下是我本身的代码：

<template>
    <div class="map-chart-wrapper"  ref="myEchart"
        :style="{height:height,width:width, left: mapPosition.left, top: mapPosition.top}">
    </div>
    <!-- '新城区': '&#9312;',
    '碑林区': '&#9313;',
    '莲湖区': '&#9314;', -->
</template>
<script>
import echarts from 'echarts';
import axios from 'axios';
import 'echarts/theme/macarons.js';
import xianshi from '../common/json/xiaan.json'
import zhouzhixian from '../common/json/zhouzhi-cn.json'

const cityMap = {
    '西安市': xianshi,
    '周至县': zhouzhixian,
}
const cityStyleMap = {
    '西安市': {
        position: {
            left: '-112px',
            top: '0px',
        },
        series: {
            left: 0,
            right: 0,
            top: '56px',
            bottom: '55px',
        }
    },
    '周至县':  {
        position: {
            left: '-113px',
            top: '17px',
        },
        series: {
            left: 0,
            right: 0,
            top: '30px',
            bottom: '0px',
        }
    },
}
export default {
    props: {
        width: {
            type: String,
            default: '890px'
        },
        height: {
            type: String,
            default: '517px'
        },
        chartConfig:{
            type: Object,
            default: ()=>({
                title: null,
                backgroundColor: '#6a7985',
                seriesData: [],
                legendData: null,
                xAxisData: null,
                yAxisData: null,
                grid: {}
            }),
        },
        mapData:{
            type: Object,
            default: ()=>({}),
        },

    },
    data() {
        return {
            propsNew: '周至县',
            chart: null,
            mapName: '',
            mapPosition: {
                left: '-117px',
                top: '36px'
            },
            areaGeoMap: {},
            districtList: [
                { label: '周至县', value: '周至县', class: 'zhouzhixian', code: "610124000000"},
                { label: '鄠邑区', value: '鄠邑区', class: 'huxian', code: "610118000000"},
                { label: '长安区', value: '长安区', class: 'changan', code: "610116000000"},
                { label: '雁塔区', value: '雁塔区', class: 'yanta', code: "610113000000"},
                { label: '未央区', value: '未央区', class: 'weiyang', code: "610112000000"},
                { label: '\u2460', value: '新城区', class: 'xincheng', code: "610102000000"},
                { label: '\u2461', value: '碑林区', class: 'beilin', code: "610103000000"},
                { label: '\u2462', value: '莲湖区', class: 'lianhu', code: "610104000000"},
                { label: '灞桥区', value: '灞桥区', class: 'baqiao', code: "610111000000"},
                { label: '高陵区', value: '高陵区', class: 'gaoling', code: "610117000000"},
                { label: '临潼区', value: '临潼区', class: 'lintong', code: "610115000000"},
                { label: '阎良区', value: '阎良区', class: 'yanliang', code: "610114000000"},
                { label: '蓝田县', value: '蓝田县', class: 'lantian', code: "610122000000"},
            ],
        };
    },
    mounted() {
        this.createChart();
        this.registerMap('西安市')
    },
    beforeDestroy() {
        this.destroyChart();
    },
    watch: {
        chartConfig() {
            this.destroyChart();
            this.initChart();
        },
    },
    methods: {
        registerMap(name) { // 注册舆图
            axios.get(cityMap[name]).then((response) => {
                const geoJson = response.data
                console.log(geoJson)
                this.areaGeoMap = geoJson.features.reduce((acc, item) => {
                    acc[item.properties.name] = item.properties.cp
                    return acc
                }, {})
                echarts.registerMap(name, geoJson);
                this.mapName = name;
                this.initChart()
            }).catch((error) => {
                alert('舆图数据未找到'+ error)
            })
        },
        createChart() {
            this.chart = echarts.init(this.$refs.myEchart, 'macarons');
            window.addEventListener("resize", this.chart.resize);
        },
        initChart() {
            // 清空当前实例，从而清空事宜
            this.chart.clear()
            // this.chart.off('click', this.areaClick)
            let titleSubtext = '';
            let mapDown = true;
            if (this.mapName === '西安市') {
                mapDown = false
                titleSubtext = '\u2460' + ' 新城区\n' +
                                '\u2461' +' 碑林区\n' + 
                                '\u2462'+ ' 莲湖区\n';
            }
            let styleData = cityStyleMap[this.mapName]
            this.mapPosition = styleData.position
            let seriesPos = styleData.series
            this.$emit('mapChange', {
                    mapDown,
                    name: this.mapName
                })
            var levelColorMap = {
                '1': 'rgba(241, 109, 115, .8)',
                '2': 'rgba(255, 235, 59, .7)',
                '3': 'rgba(147, 235, 248, 1)'
            };
            var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];
            
            // 闪烁点的数据
            // const blinkDot = this.areaGeoMap[this.propsNew].concat(100)
            // console.log(blinkDot)
            // 把设置和数据放这里
            const transparentMap = 0
            this.chart.setOption({
                title: {
                    text: '',
                    subtext: titleSubtext,
                    subtextStyle: {
                        color: '#d7d7d7',
                        fontSize: 14,
                        lineHeight: 80,
                        fontFamily: "Microsoft YaHei Light"
                    },
                    left: '320px',
                    top: '65px',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: (data) => {
                        let key = data.name
                        if (key === '\u2460') {
                            key = '新城区'
                        }else if (key === '\u2461') {
                            key = '碑林区'
                        }else if (key === '\u2462') {
                            key = '莲湖区'
                        }
                        return this.mapData[key] || key
                    } 
                },
                series: [
                    {
                        name: '',
                        type: 'map',
                        map: this.mapName,
                        left: seriesPos.left,
                        right: seriesPos.right,
                        top: seriesPos.top,
                        bottom: seriesPos.bottom,
                        selectedMode : 'single',
                        label: {
                            normal: {
                                fontSize: 14,
                                color: '#d7d7d7',
                                show: true,
                                fontFamily: "Microsoft YaHei Light"
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params){
                                    return levelColorMap[params.value[3]];
                                },
                                // shadowOffsetX:5,
                                // shadowOffsetY:5,
                                // shadowBlur: 5,
                                // shadowColor: 'rgba(255,255,255,0.5)',
                                areaColor: 'rgba(255,255,255,0)',
                                borderColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                                                offset: 0,
                                                color: 'rgba(13,1,255,0)'
                                            }, {
                                                offset: 1,
                                                color: 'rgba(0,246,255,0)'
                                            }])
                            },
                            emphasis: {
                                areaColor: 'rgba(0,246,255,0.2)',
                                borderWidth: 0,
                                label: {
                                    color: "#fff",
                                }
                            }
                        },
                        data:[
                        
                        ],
                        nameMap: { // unicode 泉源： http://xahlee.info/comp/unicode_circled_numbers.html
                            '新城区': '\u2460',
                            '碑林区': '\u2461',
                            '莲湖区': '\u2462',
                        }
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        // symbol: 'diamond',
                        // showEffectOn: 'render',
                        rippleEffect: {
                            period: 15,
                            scale: 6,
                            brushType: 'fill'
                        },
                        geoIndex: 0,
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                color: 'rgba(56,196,217,1)',
                                shadowBlur: 10,
                                shadowColor: '#fff'
                            }
                        },
                        data: []
                    }
                ]  
            });
            this.chart.on('click', this.areaClick)
        },
        destroyChart() {
            if (this.chart) {
                window.removeEventListener("resize", this.chart.resize);
                this.chart.dispose();
                this.chart = null;
            }
        },
        refreshData(areacode = false) {
            const params = {
                handleBack: (data) => {
                }
            }
            if (areacode) {
                params.area_code = areacode;
            }
            this.$store.dispatch('summaryData', params);
            this.$store.dispatch('rateCredit', params);
        },
        // 舆图的某块区域点击， @name参数为区域称号
        areaClick(params) {
            console.log(params)
            const name = params.name
            const selected = params.data.selected
            if (selected) {
                if (name === '周至县') {
                    this.registerMap(name)
                }
                const areaObject = this.districtList.find((area) => {
                    return area.value === name
                })
                if (areaObject) {
                    this.refreshData(areaObject.code)
                }
            }
            else {
                this.refreshData()
            }
        }
    }
}
</script>
<style scoped>
.map-chart-wrapper{
    z-index: 9;
    position: absolute;
}
</style>

结果

设计图的舆图结果是3D的，为了到达结果，将舆图的色彩设为通明，运用设计图作为背景图，此时须要调解echart舆图的比例（top/bottom/right/left），调解好以后，舆图挑选高亮和点击事宜，和区域名字照样继承用echart完成。终究结果：

参考文章

• https://blog.csdn.net/gisboyg…
• https://www.cnblogs.com/sd-ax…