echarts 地图3d+地图下钻

最新推荐文章于 2025-01-13 11:20:33 发布
最新推荐文章于 2025-01-13 11:20:33 发布
阅读量3.3k 收藏 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>
原创 Echarts实战案例代码(57)：map3D实现下钻功能的开发
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
02-06 627
按钮样式 #btn { position: absolute; color: #FFF; z-index: 999; width: 60px; height: 25px; background: #1E9FFF; border-radius: 10px; padding: 5px; mar.
echarts-gl+bar3D+地图下钻 js源码分享
qq_16428395的博客
07-05 2万+
echarts-gl bar3D 地图下钻到区县级别 源码分享
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地图，并且实现地图下钻和返回上级地图的完整功能。
在公众系统中应用中国、世界地图数据的注意事项
最新发布
软件设计师到程序员
01-13 439
前端工程师在项目中应用Echarts 5.x 找不到世界地图数据，恰好俺之前是干WebGIS的GISer，就搜了一波。1.Echarts官网：对于地图数据的告知如下，geoJson来自第三方，可能涉及版权等原因，5.x已不包含。页面提示：所有数据均由 挪威 Highsoft AS 提供（国内是杭州简数科技代理运营），提供很全面的svg、json、js格式的国内外地图数据。，单一开发者8000元/套（含maps和charts）。
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使用map3D+visualMap 实现地图下钻，区域高亮状态下变高
weixin_43111926的博客
06-30 4671
Echarts使用map3D+visualMap 实现地图下钻，区域高亮状态下变高
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播
04-25
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回...
echarts中国地图+柱状图组合.zip
03-25
echarts 中国地图+柱状图组合。可以缩放，拖拽，很多朋友在找，现在分享给大家自己，做个参考吧，echarts版本3.3的，
echarts 3D地图，地图区域点击触发事件
10-16
在3D地图上添加数据通常涉及设置 `data` 属性，它可以是包含地理位置和对应值的数组。例如，如果我们有各国的 GDP 数据，可以这样配置： ```javascript series: [{ type: 'map3d', mapType: 'world', events: { ...
3.（echarts篇）echarts颜色地图伪3D（优化提示窗）.zip
01-04
1. ECharts地图组件的使用，包括加载地图数据和设置颜色填充。 2. 通过光照、阴影和颜色梯度实现地图的伪3D效果。 3. ECharts提示窗的自定义，包括样式、内容和动态效果的调整。 4. 地图的交互设计，如鼠标悬停、...
使用echarts 进行全国地图下钻
06-25
提供echarts 全国地图下钻功能，可以详细到各个省市地区。
echarts-3d地图.zip
07-31
echarts echarts-gl 实现3D地图 （摘录于https://blog.csdn.net/GRAY_KEY/article/details/81295961）
Vue2 + Echarts实现3D地图下钻
liangsw
10-24 1185
【代码】Vue2 + Echarts实现3D地图下钻。
echarts 3d地图
qq_27007423的博客
05-27 4601
echarts 3d地图 var option = { title: { show:false, text: '地图', left: 'center', top: 20, textStyle:{ color:'#fff', fontSize:24 } }, geo3D: { map: 'guangdong', viewControl: { center: [-1
echarts 3D地图
长缨缚苍龙
09-13 1129
通过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 3d地图
qq_43557302的博客
08-13 7810
使用echarts绘制3d地图以及在3d地图上绘制江苏省区域边界飞线图以及3d柱状图和3d散点.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值