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;

注意

地图每次缩放或者移动后,应该将zoomcenter值保存在状态的option属性中,这样,进行其他操作而导致重新绘图时,能够记住最新的状态,不至于恢复初始样子。地图平滑切换的关键就在于保持缩放和中心位置这两个状态。

109 声望
3 粉丝
0 条评论
推荐阅读
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.3k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功12阅读 1.5k评论 1

封面图
前端性能优化到底该怎么做(上)— 开门见山
前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 高在性能,大在范围,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当...

熊的猫10阅读 2.1k

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L6阅读 1.6k

109 声望
3 粉丝
宣传栏