echarts 地图3d+地图下钻

最新推荐文章于 2025-01-13 11:20:33 发布

MAYA_G

最新推荐文章于 2025-01-13 11:20:33 发布

阅读量3.3k

点赞数 2

分类专栏： js 文章标签： js 数据可视化

本文链接：https://blog.csdn.net/MAYA_G/article/details/117461952

版权

js 专栏收录该内容

12 篇文章

订阅专栏

效果图

内蒙古地图
锡林郭勒盟地图

原理

使用geo下移叠加地图的阴影效果，通过点击地图获取当前点击的城市编码动态切换地json

// 地图数据 （用来标记地图名称的散点图及弹窗数据）
        let dataset = [
            {
                name: '阿拉善盟',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 152900,
                coordinate: [102.42556, 40.532392]
            },
            {
                name: '巴彦淖尔市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150800,
                coordinate: [107.575749, 41.673305]
            },
            {
                name: '鄂尔多斯市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150600,
                coordinate: [108.63741, 39.765314]
            },
            {
                name: '呼和浩特市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150100,
                coordinate: [111.50328, 40.797159]
            },
            {
                name: '乌兰察布市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150900,
                coordinate: [112.443087, 41.506874]
            },
            {
                name: '锡林郭勒盟',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 152500,
                coordinate: [115.46632, 43.942965]
            },
            {
                name: '赤峰市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150400,
                coordinate: [118.878285, 43.039277]
            },
            {
                name: '通辽市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150500,
                coordinate: [121.569548, 43.834485]
            },
            {
                name: '兴安盟',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 152200,
                coordinate: [121.341355, 46.241397]
            },
            {
                name: '包头市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150200,
                coordinate: [110.266038, 41.789669]
            },
            {
                name: '呼伦贝尔市',
                wheat: 128,
                corn: 100,
                potato: 28,
                soybeans: 234,
                number: 150700,
                coordinate: [120.906868, 49.635235]
            }
        ]
        // 处理scatter散点图数据
        function resetData(data) {
            return data.map((item) => {
                return {
                    name: item.name,
                    value: item.coordinate //坐标点
                }
            })
        }
        function initEachart(geoJson, name, chart) {
            echarts.registerMap(name, geoJson);
            let option2 = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: 'rgba(0,0,0,0)',
                    extraCssText: 'box-shadow: 0 0 0px rgba(0, 0, 0, 0);',
                    formatter: function (params) {
                    	//调整tooltip的样式
                        let html = '<div style="width: 3.5rem;transform: rotate(-17deg);background: url(../image/pop-bg.png) no-repeat center;background-size: 100% 100%; padding: 0.2rem 0.25rem;">' +
                            '<div style="font-size: 0.26rem;color: #fff;font-weight: 600;padding-bottom: 5px;">' + params.name + '</div>' +
                            '<ul>' +
                            '<li style="padding: 0.1rem 0;border-bottom: 1px solid #fff;display: flex;align-items: center;justify-content: space-between;">' +
                            '<div>' +
                            '<img style="width: 0.2rem;float: left;margin-right: 5px;margin-top: 0.08rem;" src="../image/wheat.png" alt=""><span style="float: left;margin-right: 5px;margin-top: 0.08rem;color:#fff;font-size:0.2rem">小麦</span>' +
                            '</div>' +
                            '<div style="color: #59bff0;"><span style="font-size: 0.26rem;font-weight: 600;padding-right: 5px;">12</span><span>万亩</span></div>' +
                            '</li>' +
                            '<li style="padding: 0.1rem 0;border-bottom: 1px solid #fff;display: flex;align-items: center;justify-content: space-between;">' +
                            '<div><img style="width: 0.2rem;float: left;margin-right: 5px;margin-top: 0.08rem;" src="../image/corn.png" alt=""><span style="float: left;margin-right: 5px;margin-top: 0.08rem;color:#fff;font-size:0.2rem">玉米</span></div>' +
                            '<div style="color: #59bff0;"><span style="font-size: 0.26rem;font-weight: 600;padding-right: 5px;">14</span><span>万亩</span></div>' +
                            '</li>' +
                            '<li style="padding: 0.1rem 0;border-bottom: 1px solid #fff;display: flex;align-items: center;justify-content: space-between;">' +
                            '<div><img src="../image/potato.png" alt="" style="width: 0.2rem;float: left;margin-right: 5px;margin-top: 0.08rem;"><span style="float: left;margin-right: 5px;margin-top: 0.08rem;color:#fff;font-size:0.2rem">马铃薯</span></div>' +
                            '<div style="color: #59bff0;"><span style="font-size: 0.26rem;font-weight: 600;padding-right: 5px;">16</span><span>万亩</span></div>' +
                            '</li>' +
                            '<li style="padding: 0.1rem 0;border-bottom: 1px solid #fff;display: flex;align-items: center;justify-content: space-between;">' +
                            '<div><img src="../image/soybeans.png" alt="" style="width: 0.2rem;float: left;margin-right: 5px;margin-top: 0.08rem;"><span style="float: left;margin-right: 5px;margin-top: 0.08rem;color:#fff;font-size:0.2rem">大豆</span></div>' +
                            '<div style="color: #59bff0;"><span style="font-size: 0.26rem;font-weight: 600;padding-right: 5px;">22</span><span>万亩</span></div>' +
                            '</li>' +
                            '</ul>' +
                            '</div>'
                        return html
                    }
                },
                geo: {
                    show: true,
                    map: name,
                    zoom: 1.2,
                    itemStyle: {
                        areaColor: '#1a346f',
                        borderColor: '#59bff0',
                        borderWidth: 4,
                        shadowColor: 'rgba(74,172,224, 0.8)',
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 16 //设置地图阴影
                    }
                },
                series: [
                    {
                        type: 'map',
                        zoom: 1.2,
                        mapType: name, // 自定义扩展图表类型
                        label: {
                            show: true,
                            color: '#0AFF3F',
                            fontSize: '0.17rem',
                            fontWeight: 'bold'
                        },
                        geoIndex: 1,
                        itemStyle: {
                            areaColor: '#1a346f',
                            borderColor: '#59bff0',
                            borderWidth: 4,
                        }，
                        zlevel: 0
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: resetData(dataset),
                        symbolSize: function (val) {
                            return 9;
                        },
                        seriesIndex: 22,
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke',
                            color: '#ffc600',
                        },
                        hoverAnimation: true,
                        label: {
                            show: false,
                            position: 'top',
                            color: '#0AFF3F',
                            fontWeight: 'bold',
                            fontSize: '0.2rem',
                            formatter: function (data) {
                                return data.name
                            }
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: '#ffc600',
                            color: '#ffc600',
                            borderColor: '#ffc600'
                        },
                        emphasis: {
                            label: {
                                color: "#0AFF3F"
                            },
                            itemStyle: {
                                areaColor: '#ffc600'
                            }
                        },
                        zlevel: 333
                    }
                ]
            }
            chart.setOption(option2)
            chart.off('click')
            chart.on('click', function (params) {
                // 接触地图点击高亮选中
                chart.dispatchAction({
                    type: 'unselect',
                    seriesIndex: 0,
                    name: params.name
                });
                let index = dataset.map(item => item.name).indexOf(params.name)
                if (index !== -1) {
                    getGeoJson('../js/' + dataset[index].number + '.json')
                        .then(regionGeoJson => {
                            dataset = []
                            // 展示返回按钮，返回内蒙古地图
                            $('.go-back-btn').show()
                            initEachart(regionGeoJson, params.name, chart)
                        }).catch(err => {
                            getGeoJson('../js/NeiMengGu.json', 'NMG', chart)
                        })
                }
            })
            $(window).resize(function () {
                chart.resize()
            });
        }
        async function getGeoJson(jsonName) {
            return await $.get(jsonName)
        }
        async function initChart() {
            let chart = echarts.init(document.getElementById('mapCon'));
            let json = await getGeoJson('../js/NeiMengGu.json')
            initEachart(json, 'NMG', chart)
        }

<div id="mapCon" style="height: 6.2rem;margin-top: 0.2rem;"></div>
<script>
 $(function () {
            // 地图
            initChart()
            // 点击返回内蒙古地图
            $('.go-back-btn').on('click', function () {
             	dataset = ... // 散点图数据及tooltip数据需要重新获取
			  	initChart()
                $(this).hide()
	     	}
 })
 </script>