3d地图 迁徙类

最新推荐文章于 2025-05-13 19:19:36 发布
原创 最新推荐文章于 2025-05-13 19:19:36 发布 · 295 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在这里插入图片描述

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://gallerybox.makeapie.com/dep/echarts/map/js/china.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var option;

        var data = [{
            name: "北京",
            value: [116.24, 39.55, 100]
        },

        {
            name: "重庆",
            value: [106.54, 29.59]
        },
        {
            name: "浙江",
            value: [120.19, 30.26]
        },
        ];

        option = {
            backgroundColor: 'black',
            geo: {
                map: 'china',
                aspectScale: 0.85,
                layoutCenter: ["50%", "50%"],
                layoutSize: '100%',
                itemStyle: {
                    normal: {
                        shadowColor: '#02bdd8',
                        shadowOffsetX: 0,
                        shadowOffsetY: 15,
                        opacity: 0.5,
                    },
                    emphasis: {
                        areaColor: '#02bdd8',

                    }
                },
                regions: [{
                    name: '南海诸岛',
                    itemStyle: {
                        areaColor: 'rgba(0, 10, 52, 1)',
                        borderColor: 'rgba(0, 10, 52, 1)',
                        normal: {
                            opacity: 0,
                            label: {
                                show: false,
                                color: "#009cc9",
                            }
                        },
                    },
                    label: {
                        show: false,
                        color: '#FFFFFF',
                        fontSize: 12,
                    },
                }],
            },
            series: [
                {
                    type: 'map',
                    mapType: 'china',
                    aspectScale: 0.85,
                    layoutCenter: ["50%", "50%"], //地图位置
                    layoutSize: '100%',
                    zoom: 1, //当前视角的缩放比例
                    // roam: true, //是否开启平游或缩放
                    scaleLimit: { //滚轮缩放的极限控制
                        min: 1,
                        max: 2
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#0c274b',
                            borderColor: '#1cccff',
                            borderWidth: 1.5


                        },
                        emphasis: {
                            areaColor: '#02102b',
                            label: {
                                color: "#fff"
                            }

                        }
                    },

                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    symbolSize: 10,
                    rippleEffect: {
                        period: 3,
                        scale: 5,
                        brushType: 'fill'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}',
                            color: '#b3e2f2',
                            fontWeight: "bold",
                            fontSize: 18
                        }
                    },

                    data: data,
                    itemStyle: {
                        normal: {
                            show: true,
                            color: '#a68625',
                            shadowBlur: 20,
                            shadowColor: '#fff'
                        },
                        emphasis: {
                            areaColor: '#f00'
                        }
                    },

                },
                {
                    type: 'lines',
                    zlevel: 1, //设置这个才会有轨迹线的小尾巴
                    polyline: true,
                    effect: {
                        show: true,
                        period: 4,
                        trailLength: 0.7,
                        color: '#fff', //流动点颜色
                        symbol: 'arrow',
                        symbolSize: 6
                    },
                    lineStyle: {
                        normal: {
                            color: '#fff', //线条颜色
                            width: 1.5,
                            curveness: 0.2,
                            shadowColor: '#fff',
                        }
                    },
                    data: [{

                        fromName: "北京",
                        toName: "重庆",
                        coords: [
                            [116.24, 39.55, 100],
                            [106.54, 29.59],
                        ]
                    },
                    {

                        fromName: "重庆",
                        toName: "浙江",
                        coords: [
                            [106.54, 29.59],
                            [120.19, 30.26],
                        ]
                    },
                    {
                        fromName: "浙江",
                        toName: "北京",
                        coords: [
                            [120.19, 30.26],
                            [116.24, 39.55, 100],
                        ]
                    }
                    ],
                },
                {
                    type: "lines",
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        color: "#fff",
                        symbolSize: 3
                    },
                    lineStyle: {
                        normal: {
                            color: "#ffa022",
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: [
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [121.4648, 31.2891]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [113.5107, 23.2196]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [122.2229, 39.4409]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [108.479, 23.1152]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [116.0046, 28.6633]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [91.1865, 30.1465]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [125.8154, 44.2584]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [110.3467, 41.4899]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [107.7539, 30.1904]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [119.4543, 31.5582]
                        }]
                    ]
                }, {
                    type: "lines",
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: "arrow",
                        symbolSize: 15
                    },
                    lineStyle: {
                        normal: {
                            color: "#ffa022",
                            width: 1,
                            opacity: 0.4,
                            curveness: 0.2
                        }
                    },
                    data: [
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [121.4648, 31.2891]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [113.5107, 23.2196]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [122.2229, 39.4409]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [108.479, 23.1152]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [116.0046, 28.6633]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [91.1865, 30.1465]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [125.8154, 44.2584]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [110.3467, 41.4899]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [107.7539, 30.1904]
                        }],
                        [{
                            coord: [116.4551, 40.2539]
                        }, {
                            coord: [119.4543, 31.5582]
                        }]
                    ]
                }, {
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    zlevel: 2,
                    rippleEffect: {
                        "brushType": "stroke"
                    },
                    label: {
                        normal: {
                            show: true,
                            "position": "right",
                            "formatter": "{b}"
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#ffa022"
                        }
                    },
                    data: [{
                        name: "上海",
                        "value": [121.4648, 31.2891, 95]
                    }, {
                        name: "广州",
                        "value": [113.5107, 23.2196, 90]
                    }, {
                        name: "大连",
                        "value": [122.2229, 39.4409, 80]
                    }, {
                        name: "南宁",
                        "value": [108.479, 23.1152, 70]
                    }, {
                        name: "南昌",
                        "value": [116.0046, 28.6633, 60]
                    }, {
                        name: "拉萨",
                        "value": [91.1865, 30.1465, 50]
                    }, {
                        name: "长春",
                        "value": [125.8154, 44.2584, 40]
                    }, {
                        name: "包头",
                        "value": [110.3467, 41.4899, 30]
                    }, {
                        name: "重庆",
                        "value": [107.7539, 30.1904, 20]
                    }, {
                        name: "常州",
                        "value": [119.4543, 31.5582, 10]
                    }]
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

    </script>
</body>

</html>
echats 3d地图 并打点和绘制迁徙图，绘制3d柱状图 3d迁徙线3d点 lines3D bar3D scatter3D
唐僧洗头用飘柔
07-08 828
echats 3d地图 并打点和绘制迁徙图，绘制3d柱状图 3d迁徙线3d点 lines3D bar3D scatter3D
echarts 5.0——3d中国地图和飞线
为技术而生
03-24 1万+
echarts 5.0的版本样式语法与4.0及以下的语法有个别差异，使用旧语法浏览器会警告提示。3d地图常用的实现方法有两种。一种是使用GL来实现，一种是使用叠层和阴影来实现，本文将使用叠层和阴影来实现。
echarts使用中国3D地图展示热力值值并添加地图缩放按钮
最新发布
liuning159的博客
05-13 764
之前项目中需要的功能是在3D地图中展示热力图，同时点击地图上某个城市时左上方相应的城市选项也要改变，且鼠标滑动到地图热力点上方时需要展示热力值。现在需要在地图上添加缩放按钮，但也遇到些困难，所以记录一下这个地图的功能实现过程。
echarts实现中国地图记录篇之2D，3D地图
weixin_42632751的博客
02-22 5160
本文主要讲述了echarts 2D(平面)、3D地图的实现方式，以及实现过程中遇到的各种坑。本文主要讲述并实现了 echarts2D平面有标记点中国地图、echarts无标记点中国地图；有贴图的3Decharts中国地图；有标记点的echarts 3D地图；提供了 3D地图如何添加点击事件，3D地图如何在点击的时候高亮某块，3D点击setOption()时贴图丢失等问题的解决方案。
手把手教 Vue3.2+Vite+Echarts 5 绘制3D线条效果中国地图
学全栈、大前端方向，就找前端早间课
05-08 2817
前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。— 关注我：前端路上不迷路 —
使用echartgl构建3D中国地图
zhuantou000的博客
12-17 7557
先上个最终效果图： 这周研究了 3D 地图，并在地图上添加柱状图，带有涟漪特效动画的散点图，过程比较波折，遇到不少坑，所以在此记录一下。 **坑一：**涟漪特效的水波纹是二维图表effectScatter，不能用在 echarts 中 geo3D 上，解决方法，把二维地图加上effectScatter，整体作为 geo3D 的背景纹理，贴在上面。 注意： 使用在colorMaterial 属性仅在 shading属性为’color’时有效。 geo3D: { map: 'china', shad
百度地图+eChart实现动态迁徙图
05-29
在本项目中，我们将探讨如何使用百度地图API与ECharts数据可视化库来创建一个动态的迁徙图。这种图表能够生动地展示人口或物体在不同地理位置间的流动情况，常用于研究人口迁移、交通流量分析等领域。 首先，让我们...
echarts 生成 迁徙图_Echarts4+EchartsGL 3D迁徙图（附源码）
weixin_39929721的博客
12-29 721
最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个小demo，希望能帮大家少走些弯路，共同学习。一、效果图二、准备引用文件1、Echarts：Echarts4下载2、Echarts GL：Echarts GL1下载3、地图文件下载，js版本或json版本均可三、代码(以json地图为例)1、文件引...
three.js实现世界地图城市迁徙图
baby_duoduo的博客
09-04 2607
概况如下： 1、THREE.CylinderGeometry，THREE.SphereGeometry绘制地图上的标记； 2、THREE.CanvasTexture用于加载canvas绘制的字体； 3、THREE.Shape，MeshLine用于实现平面地图； 4、THREE.ExtrudeGeometry用于将绘制的平面地图沿Z轴拉伸，出现3d效果； 5、THREE.CubicBezierCur...
echarts实现某个市3D地图展示
chu_han_qiao的博客
09-09 1万+
应业务需求，以3D形式展示某个城市的地图，并根据该城市下属区域车辆的多少，动态变幻区域颜色 大概效果如下（颜色随便给的，超丑 简单记录下吧） 以舟山市为例： 1.生成舟山市的geojson文件 查询链接：http://echarts.baidu.com/echarts2/doc/example/geoJson/china-main-city/522200.json 想要对应城市的geojson地...
echarts 3d中国地图，label无法显示
m0_47772398的博客
07-27 2076
在配置中加了label.show = true 任然无法的在省份显示省份名称，但是注册的是省份地图的话，配置label.show = true可以展示label；解决办法 使用formatter ，并且不要直接返回name，直接返回name会导致label仍不显示。我的例子中在name后加了空格。在使用echarts-gl 中的 geo3d 制作3d中国地图时遇到的问题；
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
01-08
概述 上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制，因为这些图表绘制其实是跟地理坐标无关的，只需要设置图表的位置即可，所以仅仅用了纯前端的方式去实现。这篇文章通过参考【dGIS】大佬的文章，重构了EchartsLayer.js文件(因为网上所有关于EchartsLayer.js文件的代码全部是编译过的，阅读起来很不友好，并且有些EchartsLayer.js扩展文件仅仅支持到ArcGIS JS API 4.6版本，对于ArcGIS JS API 4.14这样的高版本切换还是有一些问题)，使其支持最新版的ArcGIS API for JavaScr
中国地图3D立体效果
Lobove_code的博客
05-06 2887
中国地图3D立体效果 具体思路： geo叠加3层，zlevel是重叠的优先级 <template> <div class="map"> <div class="charts" ref="chartsBox"></div> <div class="e-label"> <p class="e-label-title">项目图例</p> <p>区域公司<img src
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题
$
05-06 1万+
绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题
echarts扩展3D中国地图（vue）
weixin_46097277的博客
03-28 898
首先，确保自己安装echarts和echarts-gl。在main.js中引入。
echarts绘制中国地图省份地图及世界地图
m0_60648668的博客
07-11 1万+
利用echarts绘制中国地图,省份地图及世界地图!
pyecharts可视化画3D动态地球仪，世界地图，中国地图。
lhas_dfghjkl的博客
08-26 8942
pyecharts是一款将python与echarts结合的强大的数据可视化工具，其下有许多模块，本文分享的是如何利用pyecharts制作地球仪和地图。本人利用的工具是python3.7和pyecharts1.9，pyechartsV1.0和V0.5还是有很大区别的。 首先下载pyecharts库和相关地图库（echart-countries等） 下载方式：win+R 输入cmd ，再输入pip install 要下载的包，例：pip install pyecharts 中国地图篇 第一、导入库
Echarts——中国地图绘制
热门推荐
heal_l的博客
01-13 1万+
首先准备中国城市分布Geo数据 china.jsonhttps://download.youkuaiyun.com/download/heal_l/75671467https://download.youkuaiyun.com/download/heal_l/75671467
Echarts4+EchartsGL 3D迁徙图（附源码）
qq_29773123的博客
01-21 6122
最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个demo，希望能帮大家少走些弯路，共同学习。 一、效果图 二、准备引用文件 1、Echarts：Echarts4下载 2、Echarts GL：Echarts GL1下载 3、地图文件下载，js版本或json版本均可 三、代码 1、文件引用 &amp;amp;amp;l...
Cesium实现仿Echarts的流入迁徙图教程
3. **时间动态数据（Dynamic Data）**：Cesium支持时间动态数据的展示，这对于实现流入迁徙图这类实时或模拟数据可视化场景非常重要。 4. **着色器（Shader）**：Cesium使用WebGL的着色器来处理图形渲染的细节，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值