可视化例子(4)——人口迁移轨迹(样式更好看lines3D)

最新推荐文章于 2024-03-19 11:14:43 发布
最新推荐文章于 2024-03-19 11:14:43 发布
阅读量1.9k 收藏 8
点赞数 1
分类专栏： Mapbox Echarts 可视化 文章标签： lines3D WebGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ocean111best/article/details/103215678
版权
可视化 同时被 3 个专栏收录
16 篇文章 4 订阅
订阅专栏
Echarts
15 篇文章 0 订阅
订阅专栏
Mapbox
5 篇文章 0 订阅
订阅专栏

一、效果图

PS：CSDN插入的 GIF 怎么变形了

二、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人口迁移轨迹(2.5维)--样式更好看lines3D</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <!-- bootstrap-->
    <link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><!-- bootstrap-->
    <link href="js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iMmdUvS0a3GlqkvFiyxrjomo4XpjkZSz"></script>
    <!--echart3-->
    <script type="text/javascript" src="js/echarts3/echarts.min.js"></script>
    <script type="text/javascript" src="js/echarts3/echarts3.7.2.min.js"></script>
    <script type="text/javascript" src="js/echarts3/chalk.js"></script>
    <script type="text/javascript" src="js/echarts3/bmap.min.js"></script>

    <!-- mapbox -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
    <script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>
    <script src="http://echarts.baidu.com/resource/echarts-gl-latest/mapboxgl-token.js"></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.9.2/mapbox-gl-language.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />

    <!--new 样式-->
    <link href="css/new-style.css" rel="stylesheet" type="text/css"/>
</head>
<style>
    body {
        overflow: hidden;
    }

    body * {
       -webkit-touch-callout: none;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
    }

    .map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>
<body>
<div class="mm-container" style="">
    <div id='chart-map' class='map'></div>
</div>

<script>
    $(function(){
        var myChart = echarts.init(document.getElementById('chart-map'),'chalk');
        var uploadedDataURL = "js/echarts3/map/guangdong.json";
        var guangdongData = [
            {name: '广州市', value: 100},
            {name: '深圳市', value: 85},
            {name: '珠海市', value: 70},
            {name: '汕头市', value: 20},
            {name: '佛山市', value: 77},
            {name: '韶关市', value: 60},
            {name: '湛江市', value: 1},
            {name: '肇庆市', value: 98},
            {name: '江门市', value: 90},
            {name: '茂名市', value: 45},
            {name: '惠州市', value: 25},
            {name: '梅州市', value: 35},
            {name: '汕尾市', value: 45},
            {name: '河源市', value: 70},
            {name: '阳江市', value: 65},
            {name: '清远市', value: 75},
            {name: '东莞市', value: 85},
            {name: '中山市', value: 95},
            {name: '潮州市', value: 80},
            {name: '揭阳市', value: 16},
            {name: '云浮市', value: 52}
        ];
        var palceCodData = [
            {name: '广州市', value: [113.475995,23.417055]},
            {name: '深圳市', value: [114.032357,22.675157]},
            {name: '珠海市', value: [113.234262,22.167468]},
            {name: '汕头市', value: [116.442536,23.305796]},
            {name: '佛山市', value: [112.994017,23.032548]},
            {name: '韶关市', value: [113.590304,24.844739]},
            {name: '湛江市', value: [110.064944,21.335451]},
            {name: '肇庆市', value: [112.365740,23.464062]},
            {name: '江门市', value: [112.687406,22.397417]},
            {name: '茂名市', value: [110.886700,21.850193]},
            {name: '惠州市', value: [114.413784,23.131249]},
            {name: '梅州市', value: [116.123213,24.307352]},
            {name: '汕尾市', value: [115.378103,23.046161]},
            {name: '河源市', value: [114.794798,23.867677]},
            {name: '阳江市', value: [111.782165,22.068633]},
            {name: '清远市', value: [113.072816,24.205702]},
            {name: '东莞市', value: [113.761870,23.032629]},
            {name: '中山市', value: [113.388499,22.531929]},
            {name: '潮州市', value: [116.623721,23.779569]},
            {name: '揭阳市', value: [115.970463,23.373230]},
            {name: '云浮市', value: [111.746914,22.934758]}
        ];
        var linesData = [[[113.475995,23.417055],[112.994017,23.032548]],[[112.994017,23.032548],[113.475995,23.417055]],[[114.032357,22.675157],[113.761870,23.032629]],[[113.761870,23.032629],[114.032357,22.675157]],[[113.761870,23.032629],[113.475995,23.417055]],[[113.475995,23.417055],[113.761870,23.032629]],[[114.032357,22.675157],[114.413784,23.131249]],[[114.413784,23.131249],[114.032357,22.675157]],[[113.234262,22.167468],[113.388499,22.531929]],[[113.388499,22.531929],[113.234262,22.167468]],[[113.388499,22.531929],[111.782165,22.068633]],[[113.475995,23.417055],[113.072816,24.205702]]]
        var palceCodData2 = [
            {name: '广州市', value: [113.575995,23.417055]},
            {name: '深圳市', value: [114.132357,22.675157]},
            {name: '珠海市', value: [113.334262,22.167468]},
            {name: '汕头市', value: [116.542536,23.305796]},
            {name: '佛山市', value: [113.094017,23.032548]},
            {name: '韶关市', value: [113.690304,24.844739]},
            {name: '湛江市', value: [110.164944,21.335451]},
            {name: '肇庆市', value: [112.265740,23.464062]},
            {name: '江门市', value: [112.787406,22.397417]},
            {name: '茂名市', value: [110.986700,21.850193]},
            {name: '惠州市', value: [114.513784,23.131249]},
            {name: '梅州市', value: [116.223213,24.307352]},
            {name: '汕尾市', value: [115.478103,23.046161]},
            {name: '河源市', value: [114.894798,23.867677]},
            {name: '阳江市', value: [111.882165,22.068633]},
            {name: '清远市', value: [113.172816,24.205702]},
            {name: '东莞市', value: [113.861870,23.032629]},
            {name: '中山市', value: [113.488499,22.531929]},
            {name: '潮州市', value: [116.723721,23.779569]},
            {name: '揭阳市', value: [116.070463,23.373230]},
            {name: '云浮市', value: [111.846914,22.934758]}
        ];
        var flexData = [
            {name: '广州市', value: [1960.7,520.1]},
            {name: '深圳市', value: [1886.6,392.5]},
            {name: '珠海市', value: [268.6,90.7]},
            {name: '汕头市', value: [513.9,92]},
            {name: '佛山市', value: [919.2,308.5]},
            {name: '韶关市', value: [192.7,67.7]},
            {name: '湛江市', value: [481.5,31.7]},
            {name: '肇庆市', value: [246.2,119.4]},
            {name: '江门市', value: [375.9,147.9]},
            {name: '茂名市', value: [375.8,85.6]},
            {name: '惠州市', value: [601.4,200.3]},
            {name: '梅州市', value: [275.7,48.6]},
            {name: '汕尾市', value: [178,53.2]},
            {name: '河源市', value: [192.7,56.3]},
            {name: '阳江市', value: [164,69.1]},
            {name: '清远市', value: [293.6,99.4]},
            {name: '东莞市', value: [1091.3,481.7]},
            {name: '中山市', value: [530.5,157.5]},
            {name: '潮州市', value: [214.9,60.4]},
            {name: '揭阳市', value: [379.9,91.9]},
            {name: '云浮市', value: [140.1,74.7]}
        ];
        var moniData = palceCodData.map(function(item, index) {
            return [palceCodData[0].value, item.value]
        });
        var moniData2 = palceCodData.map(function(item, index) {
            return [item.value, palceCodData[0].value]
        });
        moniData.push(...moniData2);
        function setData (data) {
            var newData = [];
            for (let i = 0; i < 1; i++) {
                newData.push(...data)
            }
            return newData
        }
        var scatterData = [[113.475995,23.417055]];
        mapboxgl.accessToken = mapboxglToken;
        var option = {
            title: {
                text: '',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (obj) {
                    if (obj.seriesType === 'map3D') {
                        return `${obj.name}</br>常驻人口：${flexData[obj.dataIndex].value[0]}<br>流动人口：${flexData[obj.dataIndex].value[1]}`
                    }
                }
            },
            mapbox: {
                center: [113.075995,22.517055],
                zoom: 6,
                pitch: 50,
                bearing: -10,
                style: 'mapbox://styles/mapbox/satellite-v9',
                localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif",
                boxHeight: 20,
                light: {
                    main: {
                        intensity: 1,
                        shadow: true,
                        shadowQuality: 'high'
                    },
                    ambient: {
                        intensity: 0.2
                    }
                },
                altitudeScale: 1,
            },
            series: [
            {
                name: '迁移人口',
                type: 'lines3D',
                coordinateSystem: 'mapbox',
                effect: {
                    show: true,
                    period: 10,
                    trailWidth: 10,
                    trailLength: 0.2,
                    trailOpacity: 1,
                    trailColor: 'rgb(30, 30, 60)'
                },
                lineStyle: {
                    width: 5,
                    color: 'rgb(50, 50, 150)',
                    curveness: 0.3,
                    opacity: 0.2
                },
                blendMode: 'lighter',
                // data: [{coords: [[105.575995,21.417055],[116.723721,23.779569]],
                //     value: 1000}],
                data: setData(moniData),
                zlevel: 5
            }
            ]
        };
        $.get(uploadedDataURL, function (geoJson) {
            echarts.registerMap('guangdong', geoJson);
            myChart.setOption(option);
            var map = myChart.getModel().getComponent('mapbox').getMapbox();
            // map.addControl(new mapboxgl.NavigationControl());
            mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
            map.addControl(new MapboxLanguage({
              defaultLanguage: 'zh'
            }));
            map.on('load', function () {
                map.addSource("states", {
                    "type": "geojson",
                    "data": "js/echarts3/guangdong.json"
                });

                map.addLayer({
                    "id": "state-fills",
                    "type": "fill",
                    "source": "states",
                    "layout": {},
                    "paint": {
                        "fill-color": "#627BC1",
                        "fill-opacity": 0.3
                    }
                });

                map.addLayer({
                    "id": "state-borders",
                    "type": "line",
                    "source": "states",
                    "layout": {},
                    "paint": {
                        "line-color": "#ccc",
                        "line-width": 2
                    }
                });

                map.addLayer({
                    "id": "state-fills-hover",
                    "type": "fill",
                    "source": "states",
                    "layout": {},
                    "paint": {
                        "fill-color": "#627BC1",
                        "fill-opacity": 1
                    },
                    "filter": ["==", "name", ""]
                });

                map.on("mousemove", "state-fills", function(e) {
                    map.setFilter("state-fills-hover", ["==", "name", e.features[0].properties.name]);
                });

                map.on("mouseleave", "state-fills", function() {
                    map.setFilter("state-fills-hover", ["==", "name", ""]);
                });
            });
        });
    });

</script>
</body>
</html>

 

 

 

爱睡懒觉的老舅
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
亿信ABI VS Echart数据可视化工具你选谁
amsonga的博客
09-16 640
说到制作大屏，很多人就开始发憷了，心里肯定一大串疑问，“制作可视化大屏麻不麻烦？”“这么炫酷的效果前端后端干预多不多？”“可视化大屏工具报价是不是很贵，人力物力会不会划不来？”“制作时间会不会很长很耗时？”有这么疑问又怎么办呢？ 还是抵不过领导喜欢！ 接下来，为大家介绍几款好用的数据可视化工具啦！ 首先是不得不提到的Echart。 Echart： Echart是百度提供基于JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器。其底层依赖轻量级的矢量图形库
echart 三维可视化地图_ECharts-X
weixin_39602280的博客
02-23 1354
软件简介ECharts-X是 ECharts 团队推出的全新 3D 可视化库，它是基于ECharts 的扩展，底层深度整合了 WebGL 库QTEK和 Canvas2D库ZRender。特色混搭ECharts 里的混搭功能很强大，作为 ECharts 的扩展，ECharts-X 自然也需要支持。ECharts-X 能跟 ECharts中的折柱饼地图等图表混搭，可以有更丰富的可视化效果，同时 ECh...
数据可视化 - Map 3D地图光线效果
YYDataV的博客
05-22 2896
from pyecharts import options as opts from pyecharts.charts import Map3D from pyecharts.globals import ChartType example_data = [ [[119.107078, 36.70925, 1000], [116.587245, 35.415393, 1000]], [[117.000923, 36.675807], [120.355173, 36.082982...
开源web三维可视化_福利放送！为大家推荐5个数据分析师必备的数据可视化工具...
weixin_39995351的博客
12-03 1643
近年来，随着云和大数据时代的来临，数据可视化产品已经不再满足于使用传统的数据可视化工具来对数据仓库中的数据抽取、归纳并简单的展现。传统的数据可视化工具仅仅将数据加以组合，通过不同的展现方式提供给用户，用于发现数据之间的关联信息。新型的数据可视化产品必须满足互联网爆发的大数据需求，必须快速的收集、筛选、分析、归纳、展现决策者所需要的信息，并根据新增的数据进行实时更新。因此，在大数据时代，数据可视化工...
mapbox加载自定义字体
最新发布
m0_46478007的博客
03-19 339
mapbox加载自定义字体
＜ 可视化：Echarts 3D地图（map3D）组件案例 - 中山市举例 ＞
一个平平无奇的技术宅
05-30 2746
在前端可视化开发中，我们有时候需要实现3D地图，但是发现修改过后，3D地图的缩放比例很大，超出可视窗口了。影响整体的观看，小温在前面开发遇到过，去搜索配置项，也没有明确描述。从而白白浪费时间，今天小温就这个问题给大伙讲解。
深度学习的3D可视化工具Zetane——windows版本
02-19
深度学习的3D可视化工具Zetane——windows版本
深度学习的3D可视化工具Zetane——Linux版本
02-19
深度学习的3D可视化工具Zetane——Linux版本
可视化创造快乐——QQ游戏地图项目总结
03-04
QQ游戏平台目前已接入运营183款休闲棋牌类游戏，最大同时在线人数达到800万。我们这次要做的就是通过可视化的设计方法，将游戏同时...为了让产品变成“好玩”的城堡，我们首先需要打地基——搭建可视化平台，然后在地
可视化ex2_Python可视化_美国失业人口可视化pyechart_
09-29
美国失业人口可视化，利用python+pyechart实现了美国县区人口失业情况的可视化
3d地球散点图加路径lines3D的实现，带有散点即路径的立体地球
weixin_45669156的博客
07-22 1569
1.echarts+echarts-gl实现3d地球,3d散点,3d路径图，3d地球上散点及路径。2.geo绘制地球,2d散点图，3d路径图
echarts 河北省人口迁徙图
11-01
使用js和echarts结合制作的人口迁徙图，带动画效果，可以到博客中看效果。
privinceMapJson.zip
06-02
包括全国各省份名称及中心点的geojson数据，可自定义添加属性
echarts 模仿3D地图 实现数据动态交互
让心在跳动
03-25 4531
实现的效果图 首先要获取地图数据------json或者geojson格式的文件 可以通过 echarts-map最新实时geoJson文件下载* map地图 geoJson文件下载地址 话不多说，代码如下： var uploadedDataURL = "common/nanjing.geoJson"; // 根目录下面 如果地图加载不出来 看一下是不是文件路径写错了 func...
数据可视化之Echarts-lines3D动态轨迹渲染
热门推荐
佯佯DESIGNER
07-13 1万+
数据可视化之Echarts-lines3D动态轨迹渲染 谈到数据可视化，不得不提到近两年超级火的ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ...
Echarts实现可视化世界地图——Vue
K563161969的博客
12-17 1万+
Echarts实现可视化世界地图——Vue
$.getJSON(url, data, function(data){ })访问同步
小&哥
07-10 6053
var url = "pc/admin/grade/getGradeInfo";    var args = {"school_Id": schoolId};  $.getJSON(url, args, function (data) {                 for (var i = 0; i                     var id =
Echarts实战案例代码(27)：地理坐标图视觉引导线及富文本提示框的案例
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-09 1205
项目要点 使用如何注册地理坐标图； 带有起点和终点信息的线数据的路径图的使用； 使用富文本表现文本框； 多组数据在文本内如何使用 formatter回调函数； 区域鼠标事件变化文本框样式； geoJSON数据 调用geoJSON，设置区域中心点坐标和显示文本框位置的经纬度坐标； myChart.showLoading(); var uploadedDataURL = "/asset/get/s/data-1593486529294-SRyGZ7brP.json"; const COORDS_LINE
ECharts自定义地图——行政划分“乡镇级别”地图
牟云飞的博客
06-19 1万+
百度地图API能够直接划分区级别的行政划分： 如果是在线访问的系统可以参考链接https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618#comments； 如果是离线的系统，可以通过这个echarts地址下载实现离线地图https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe ...
《javascript数据可视化编程》—— 第4章
05-11
《Javascript数据可视化编程》第4章主要介绍了D3.js的数据绑定方式和数据更新逻辑。数据绑定是D3.js的重要特性之一，通过数据绑定可以将数据和DOM元素进行关联，使得数据更新时DOM元素可以及时响应变化，实现数据可视化的动态效果。 数据绑定分为三个步骤：选择元素、绑定数据、操作元素。其中选择元素可以使用D3.js提供的选择器和方法，绑定数据使用.data()方法，操作元素则通过元素的属性和样式等进行操作。在数据更新时，D3.js会根据数据与现有DOM元素的绑定情况，自动判断新增、删除和更新DOM元素，减少开发者的工作量。 除了数据绑定外，本章还介绍了一些常用的数据处理方法，如map()、filter()、nest()等。这些方法可以方便地对数据进行处理和分组，进一步优化数据可视化的效果和性能。 最后，本章还介绍了D3.js的数据可视化架构，包括数据处理、比例尺、坐标轴、图形绘制等模块。这些模块可以根据具体的可视化需求进行灵活组合和扩展。 总的来说，第4章对于初学者来说是比较难理解和掌握的，需要反复练习和实践才能熟练应用。但是对于掌握了数据绑定和数据处理等基础知识的开发者来说，可以通过深入学习和实践，掌握D3.js的核心特性和技巧，实现更加复杂和出色的数据可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值