react-echarts實現地圖放大顯示細節

效果預覽

思路

需求：根據需求，放大地圖至某個閾值，切換詳細地圖（簡要地圖和詳細地圖之間的切換）。

需求-->技術：

1. 開啓放大/縮小地圖：roam:true;
2. 切換地圖：
   （1）地圖縮放事件：on('georoam',handler)；
   （2）獲取當前地圖的zoom值：chartInstance.getOption().geo[0]；
   （3）與閾值比較後切換json從新註冊地圖：echarts.registerMap('XC', another_json);

代碼實現

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
/*geojson文件很大，生產環境中，應該放在public文件夾中，並異步加載*/
import { geoJson } from './regionJsonXc';
import { sqJson } from './regionJsonXc';

let defaultBlue = '#25ade6';
let darkBlue = '#186396'; //詳細地圖，線條顏色暗一些

// 配置option，必定要查看echarts官方配置文檔
let option = {
    // 地圖配置
    geo: { 
        show: true,
        map: 'XC',
        label: {
            normal: {
                show: true,
                color: '#ccc',
                fontSize: 14,
            },
            emphasis: {
                show: true,
                color: '#fff'
            }
        },
        roam: true, // 滾輪滾動--放大或縮小
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 14,
                },
                areaColor: 'rgba(24,99,150,0.05)',
                borderColor: #186396,
                shadowColor: #186396,
                shadowBlur: 10,
            },
            emphasis: {
                label: {
                    show: false,
                    color: '#fff',
                    shadowColor: '#25ade6',
                    shadowBlur: 10,
                },
                areaColor: 'rgba(24,99,150,0.5)',
            },
        },
        zoom: 1
    },
    series: []
};

let myChart = null;

class XcMap extends Component {

    state = {
        option: option,
        detail: false, // 是否使用詳細地圖
        curMap:geoJson,
    }

    componentDidMount() {
        this.draw(geoJson);
    }
    
    drawMap = (json) => {
        const { option } = this.state;
        let echartElement = document.getElementById('xc-map');
        myChart = echarts.init(echartElement);

        echarts.registerMap('XC', json);
        myChart.setOption(option, true);

        myChart.on('georoam', this.onDatazoom); // 縮放監聽事件
    }

    
    /*
        獲取zoom和center
        zoom:地圖縮放值，
        center:中心位置，地圖拖動以後會改變
    */
    getZoom = () => {
        if(myChart){
            let { zoom, center } = myChart.getOption().geo[0];
            return { zoom, center }
        }
        return;
    }
    
    /*
        保存縮放值和中心位置，
    */
    saveZoom = () => {
        let { zoom, center } = this.getZoom();
        const { option } = this.state;
        option.geo.zoom = zoom;
        option.geo.center = center;
       this.setState({option});
    }
    
    /**
     * 地圖縮小/放大
     */
    onDatazoom = () => {

        const { detail, option } = this.state;
        const { zoom } = this.getZoom();
        const threshold = 1.7;
        
        this.saveZoom(); // 地圖縮放後，將縮放值和center保存在狀態中

        if (zoom >= threshold && !detail) {
            // 切換詳細地圖
            option.geo.itemStyle.normal.borderColor = darkBlue;
            option.geo.itemStyle.normal.shadowColor = darkBlue;
            this.setState({
                detail:true,
                option,
                curMap:sqJson
            });
            this.drawMap(sqJson);
        } else if (detail && zoom < threshold) {
            // 切換默認地圖
            option.geo.itemStyle.normal.borderColor = defaultBlue;
            option.geo.itemStyle.normal.shadowColor = defaultBlue;
            this.setState({
                detail:false,
                option,
                curMap:geoJson
            });
            this.drawMap(geoJson);
        }
    }

    render() {
        const {  position } = this.state;
        return (<div>
            <div id="xc-map" className={styles.map}></div>
        </div>);
    }
}

export default XcMap;

注意

地圖每次縮放或者移動後，應該將zoom和center值保存在狀態的option屬性中，這樣，進行其餘操做而致使從新繪圖時，可以記住最新的狀態，不至於恢復初始樣子。地圖平滑切換的關鍵就在於保持縮放和中心位置這兩個狀態。