echarts 地图3d+地图下钻

最新推荐文章于 2024-09-02 15:01:06 发布
最新推荐文章于 2024-09-02 15:01:06 发布
阅读量3.2k 收藏 12
点赞数 2
分类专栏： js 文章标签： js 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MAYA_G/article/details/117461952
版权

效果图

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

原理

使用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>
MAYA_G
关注
专栏目录
echarts 3D地图
长缨缚苍龙
09-13 791
通过echats echats-gl 实现的3D地图页面。以下代码没有相应数据不能正常运行，可参考js外部引入修改。1.通过外边js引入方式，引入必要的js压缩文件。const obj = { //city数据格式。this.getJson(‘唐山市’)this.getJson(‘唐山市’)//通过 fetch 方法引入json。city: [],//数据格式。二、通过npm 安装 引入。3.新建index.js。4.地图jison 获取。地图geoJSON通过。3.新建html页面。
Echarts 点击地图区域弹出框
smallMirror_的博客
10-27 2万+
点击地图里面的区域，弹出信息html 准备两个容器，一个装地图，一个装弹出框<!-- 地图 --> <div id="map" style="height: 600px;width: 600px;"></div> <!-- 弹出框 --> <div id="box" > <span id="box-title"></span>
echarts的地图点击事件
Biexiansheng的博客
11-23 9043
1、echarts的地图展示，有时候展示出的数据，虽然鼠标点击上去某个省份或者某个地方会有数据显示，但是点击一下地图没有任何动态效果，如何添加地图点击效果呢，这里自己也是坐下笔记，方便以后使用。 参考链接：https://blog.csdn.net/qq_21386275/article/details/79039024 1 //地图展示 2 function map() { 3...
用 echarts 开发地图、点击展示自定义信息框
weixin_45907435的博客
08-08 1159
'详情<i class="el-icon-close closebt" id = "closeBtn"></i></div>' +color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色。color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色。backgroundColor: 'rgba(0,0,0,.6)', //提示框样式。areaColor: '#389BB7', //区域的面积颜色。'150100000000' :'呼和浩特市',
echarts地图下钻+平面3D效果+自定义toolTip+自定义立体数据图层
最新发布
bingmoujs的博客
09-02 774
自定义toolTip比较简单，这里相关背景图使用import导入，关键点是自定义position位置（不自定义会出现安阳定在濮阳的情况），获取地图json中的centorid的坐标（这里的坐标自己可以直接修改位置），通过convertToPixel将地理坐标转换为屏幕坐标，相当好用。自定义立体图层，直接参考代码吧，网上也找过相关的参考，他们的实现方式是主体柱形部分采用左右多层次渐变的方式，要求上下渐变就不太合适。导入到地图组件使用，通过下拉框或者点击地图获取name实现json切换。
echarts开发的自动旋转map3D下钻和柱图地图
09-18
代码分析见：https://lockdatav.blog.csdn.net/article/details/120369570 1.地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问; 2.目录说明 ├─index.html ........默认启动页 ├─map ........geojson地理数据 │ ├─chongqing.json ........重庆市地理数据 │ ├─city........各区县地理数据 ├─js ........JS封装库 │ ├─app.js ........下钻核心库，具体见文件注释
【vue】Echarts3D地图下钻
m0_68324632的博客
04-13 1万+
地图下钻是一个非常常见的功能需求，本篇文章会细致讲解如何在Vue3中使用Eharts-gl渲染出3D地图，并且实现地图下钻和返回上级地图的完整功能。
ECharts3D地图(详细示例——附有具体注释)
热门推荐
GRAY_KEY的博客
07-31 4万+
3D地图图表效果如下: 具体代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;铜仁市3D地图(点击地图区域跳转到相应页面)&lt;/title&gt; &lt;script type="text/javasc
原创 Echarts实战案例代码(57)：map3D实现下钻功能的开发
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
02-06 604
按钮样式 #btn { position: absolute; color: #FFF; z-index: 999; width: 60px; height: 25px; background: #1E9FFF; border-radius: 10px; padding: 5px; mar.
Vue2 + Echarts实现3D地图下钻
liangsw
10-24 1074
【代码】Vue2 + Echarts实现3D地图下钻。
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播
04-25
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回...
使用echarts 进行全国地图下钻
06-25
提供echarts 全国地图下钻功能，可以详细到各个省市地区。
echarts-3d地图.zip
07-31
echarts echarts-gl 实现3D地图 （摘录于https://blog.csdn.net/GRAY_KEY/article/details/81295961）
echarts 3D地图，地图区域点击触发事件
10-16
在3D地图上添加数据通常涉及设置 `data` 属性，它可以是包含地理位置和对应值的数组。例如，如果我们有各国的 GDP 数据，可以这样配置： ```javascript series: [{ type: 'map3d', mapType: 'world', events: { ...
echarts中国地图+柱状图组合.zip
03-25
echarts 中国地图+柱状图组合。可以缩放，拖拽，很多朋友在找，现在分享给大家自己，做个参考吧，echarts版本3.3的，
3.（echarts篇）echarts颜色地图伪3D（优化提示窗）.zip
01-04
1. ECharts地图组件的使用，包括加载地图数据和设置颜色填充。 2. 通过光照、阴影和颜色梯度实现地图的伪3D效果。 3. ECharts提示窗的自定义，包括样式、内容和动态效果的调整。 4. 地图的交互设计，如鼠标悬停、...
echarts-gl+bar3D+地图下钻 js源码分享
qq_16428395的博客
07-05 2万+
echarts-gl bar3D 地图下钻到区县级别 源码分享
echarts 3d地图
qq_27007423的博客
05-27 4550
echarts 3d地图 var option = { title: { show:false, text: '地图', left: 'center', top: 20, textStyle:{ color:'#fff', fontSize:24 } }, geo3D: { map: 'guangdong', viewControl: { center: [-1
echarts3d地图下钻
05-24
ECharts3D 是百度开发的一个基于 WebGL 技术的数据可视化库，支持 3D 数据展示。在 ECharts3D 中，地图是一个内置的组件，可以通过配置数据来展示不同区域的数据分布。下钻功能指的是点击地图上的区域，可以进入该区域的更详细的数据展示页面。 实现 ECharts3D 地图下钻的关键在于对数据的处理和配置。具体实现步骤如下： 1. 准备地图数据：ECharts3D 内置了一些地图数据，也可以从外部加载地图数据。可以通过 GeoJSON 格式的数据来描述地图边界和区域信息。 2. 准备下钻数据：点击地图上的区域后，需要进入该区域的更详细数据展示页面。因此需要准备好该区域的详细数据，并在点击事件中进行处理。 3. 配置 ECharts3D 地图组件：通过 ECharts3D 的配置项，设置地图的样式、坐标系、区域颜色等属性。并将准备好的地图数据和下钻数据绑定到地图组件上。 4. 监听点击事件：通过 ECharts3D 提供的事件监听机制，在地图上监听用户的点击事件。当用户点击某个区域时，根据该区域的数据信息进行下钻操作，并展示该区域的详细数据。 下面是一个简单的示例代码，演示如何实现 ECharts3D 地图下钻： ```javascript // 引入 ECharts3D 库 import echarts from 'echarts'; import 'echarts-gl'; // 准备地图数据 const mapData = [ {name: '北京', value: 100}, {name: '上海', value: 200}, {name: '广州', value: 300}, {name: '深圳', value: 400}, // ... 其他区域数据 ]; // 准备下钻数据 const detailData = [ {name: '北京区域1', value: 50}, {name: '北京区域2', value: 50}, // ... 其他区域数据 ]; // 配置地图组件 const option = { geo3D: { map: 'china', // 使用中国地图 itemStyle: { areaColor: '#fff', // 区域背景颜色 opacity: 1, // 区域透明度 borderWidth: 1, // 区域边框宽度 borderColor: '#000', // 区域边框颜色 }, label: { show: true, // 是否显示区域标签 textStyle: { color: '#000', // 标签文字颜色 fontSize: 12, // 标签文字大小 }, }, regions: mapData, // 绑定地图数据 }, series: [{ type: 'bar3D', data: detailData, // 绑定下钻数据 }], }; // 监听点击事件 echarts.init(document.getElementById('chart')).on('geo3DClick', function(params) { const name = params.name; // 根据区域名称查询对应的下钻数据 const data = detailData.filter(item => item.name.startsWith(name)); // 更新下钻数据并重新渲染 option.series[0].data = data; echarts.init(document.getElementById('chart')).setOption(option); }); ``` 在上面的示例代码中，我们通过配置 ECharts3D 的 `geo3D` 组件来展示地图，并将准备好的地图数据绑定到组件上。在 `series` 中，我们配置了一个 3D 柱状图，用于展示下钻数据。在监听 `geo3DClick` 事件时，我们根据点击的区域名称查询对应的下钻数据，并更新 `series` 中的数据，最后重新渲染图表即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值