vue+echarts渲染地图

最新推荐文章于 2024-07-25 22:12:25 发布

Qiu_SS

最新推荐文章于 2024-07-25 22:12:25 发布

阅读量726

点赞数

分类专栏： echarts 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/qiu_ss/article/details/129202494

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文章介绍了如何从DataV.GeoAtlas获取地图JSON数据，并利用Echarts库在网页中渲染地图。通过fetchAPI处理跨域问题，动态展示和高亮地图区域，以及实现提示框的循环显示。文章还提供了具体的JavaScript代码示例来说明地图的交互功能，如点击高亮和显示数据。

摘要由CSDN通过智能技术生成

一、下载地图json数据

进入以下网站，获取你所需地区的地图json数据
DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6以广州为例，左边点击选择地图，右边就会生成相应的json链接

下载json文件到你的项目之中，就可以开始渲染地图了

二、使用echarts渲染地图

  CenterMap(temp) {
                var myCenterMap = echarts.init(document.getElementById("center-echart-map"));
            //防止跨域，使用fetch引入地图数据

                fetch('/json/baiyun-map.json', {
                    method: 'GET',
                    header: new Headers({
                        'Accept': 'application/json'
                    })
                }).then((res) => {
                    return res.json()
                }).then((res) => {
                    echarts.registerMap('白云区', res)
                    
                //此处的temp为自己想要在tooltip上显示的数据，格式如defaultP
                    var BaiyunMap = temp
                //将每块区域的坐标使用名字与数据对应起来
                    var convertData = function (data) {
                        var res = []
                        for (var i = 0; i < data.length; i++) {
                            var geoCoord = geoCoordMap[data[i].name]
                            if (geoCoord) {
                                res.push({
                                    name: data[i].name,
                                    value: geoCoord.concat(data[i].value)
                                })
                                // console.log(res)
                            }
                        }
                        return res
                    }
                    var defaultP = [
                        [{
                            name: 'xx街',
                            value: 81,
                            selected: true
                        }]
                    ]
                    let index = -1;
                    var alwaysShowContent = false
                    //写一个定时任务，使tooltip循环出现，对应区域高亮
                    var timer = setInterval(function () {
                    //隐藏上一个tooltip
                        myCenterMap.dispatchAction({
                            type: 'hideTip',
                            seriesIndex: 0,
                            dataIndex: index
                        });
                     //取消上一个高亮
                        myCenterMap.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: index
                        });
                    //显示当前tooltip
                        myCenterMap.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: index + 1
                        });
                    //高亮当前区域

                        myCenterMap.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: index + 1
                        });

                        index++;

                        if (index >= optioncenter.series[0].data.length) {
                            index = -1
                            myCenterMap.dispatchAction({
                                type: 'hideTip',
                                seriesIndex: 0,
                                dataIndex: index
                            });
                        }
                    }, 1000)
                    if (myCenterMap._$handlers.click) {
                        myCenterMap._$handlers.click.length = 0;
                    }
                    //点击对应区域的方法
                    myCenterMap.on('click', params => {
                    //确定点击的为地图
                        if (params.seriesType === 'map') {
                            clearInterval(timer);
                            const selectData = convertData([
                                {
                                    name: params.name,
                                    value: params.data.value[2]
                                }
                            ])
                            optioncenter.geo.regions = [{
                                name: params.name,
                                selected: true,
                            }]

                            optioncenter.series[1].data = selectData
                            alwaysShowContent = true

                            myCenterMap.dispatchAction({
                                type: 'downplay',
                                seriesIndex: 0
                            });
                            myCenterMap.dispatchAction({
                                type: 'highlight',
                                seriesIndex: 0,
                                dataIndex: params.dataIndex
                            });
                            myCenterMap.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,
                                dataIndex: params.dataIndex
                            });

                            timer = setInterval(function () {
                                // 隐藏提示框
                                myCenterMap.dispatchAction({
                                    type: 'hideTip',
                                    seriesIndex: 0,
                                    dataIndex: index
                                });
                                // 显示提示框
                                myCenterMap.dispatchAction({
                                    type: 'showTip',
                                    seriesIndex: 0,
                                    dataIndex: index + 1
                                });
                                // 取消高亮指定的数据图形
                                myCenterMap.dispatchAction({
                                    type: 'downplay',
                                    seriesIndex: 0,
                                    dataIndex: index
                                });
                                // 高亮指定的数据图形
                                myCenterMap.dispatchAction({
                                    type: 'highlight',
                                    seriesIndex: 0,
                                    dataIndex: index + 1
                                });
                                index++;
                                if (index >= optioncenter.series[0].data.length) {
                                    index = -1;

                                }
                            }, 2000);

                        }
                        myCenterMap.setOption(optioncenter)
                    })
                    //开始渲染地图
                    var optioncenter = {
                        tooltip: {
                            show: true,
                            trigger: 'item',
                            triggerOn: 'click',
                            alwaysShowContent: alwaysShowContent,
                            formatter: function (params) {
                                var name = params.name
                                var str = params.data.value[2]

                                return name + ':' + '<br/>' + str
                            }
                        },
                        geo: {
                            type: 'map',
                            map: '白云区',
                            silent: true,
                            tooltip: {
                                show: false
                            },
                            label: {
                                show: true,
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        show: 0,
                                        color: '#fff'
                                    }
                                }
                            },
                            zoom: 1.16,
                            // regions: convertData(BaiyunMap),
                            aspectScale: 1.0, //长宽比
                            z: 13,
                            itemStyle: {
                                show: true,
                                normal: {
                                    opacity: 0.4,
                                    areaColor: 'rgba(122,193,254,0.2)',
                                    borderColor: '#03c5ff',
                                    borderWidth: 2,
                                },
                                emphasis: { // 鼠标移动上去变色
                                    areaColor: '#19CE7B',
                                    borderColor: '#ffffff',
                                    textStyle: {
                                        show: 0
                                    }
                                }
                            }
                        },
                        series: [
                            {
                                type: 'map',
                                map: '白云区',
                                data: convertData(BaiyunMap),

                                zoom: 1.26, //大小
                                aspectScale: 1.2, //长宽比
                                // silent: true, //不显示hover等事件
                                z: 12,
                                label: {
                                    show: false
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        areaColor: '#064f96',
                                    },

                                    emphasis: {
                                        areaColor: '#19CE7B',
                                        borderColor: '#ffffff',
                                        label: {
                                            show: false
                                        }
                                    }
                                },

                            },
                            {
                                z: 13,
                                name: '上报数',
                                type: 'scatter', //散点图
                                coordinateSystem: 'geo',
                                data: convertData(defaultP),
                                symbolSize: 30,
                                symbol: 'image://img/choose.png',

                                label: {
                                    show: false,
                                    formatter: '{@[2]}',
                                    position: 'top',
                                    color: '#fff'
                                }
                            }

                        ]
                    }

                    myCenterMap.setOption(optioncenter)
                })

            },

效果图如下：