3d地图 迁徙类

最新推荐文章于 2022-07-08 16:51:14 发布
最新推荐文章于 2022-07-08 16:51:14 发布
阅读量238 收藏 1
点赞数
分类专栏： Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quhongqiang/article/details/119389825
版权

在这里插入图片描述

<!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>
曲小强
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts：中国地图
weixin_53571388的博客
05-27 1726
效果图： 代码演示： <template> <div> <div id="child" ref="direction"></div> </div> </template> <script> import * as echarts from "echarts"; export default { name: "child", data() { return { o
echarts 生成 迁徙图_Echarts4+EchartsGL 3D迁徙图（附源码）
weixin_39929721的博客
12-29 669
最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个小demo，希望能帮大家少走些弯路，共同学习。一、效果图二、准备引用文件1、Echarts：Echarts4下载2、Echarts GL：Echarts GL1下载3、地图文件下载，js版本或json版本均可三、代码(以json地图为例)1、文件引...
echats 3d地图 并打点和绘制迁徙图，绘制3d柱状图 3d迁徙线3d点 lines3D bar3D scatter3D
唐僧洗头用飘柔
07-08 724
echats 3d地图 并打点和绘制迁徙图，绘制3d柱状图 3d迁徙线3d点 lines3D bar3D scatter3D
Arcgis api 4.x集成 Echarts实现二三维点状图和迁徙图
weixin_39676449的博客
08-28 8721
本文主要用Arcgis api最新版本4.8集成了echarts最新版本4.x，这里主要实现了点状图和二三维迁徙图的效果，下面对其进行概括介绍。 在arcgis api集成echarts中，一个最重要的点就是需要解决echarts坐标系与arcgis的坐标系不统一出现的问题，因此要进行echarts坐标系与arcgis坐标系的转换，这里采用的方法是注册一个坐标系统命名为arcgis（名称可自由拟...
three.js实现世界地图城市迁徙图
baby_duoduo的博客
09-04 2474
概况如下： 1、THREE.CylinderGeometry，THREE.SphereGeometry绘制地图上的标记； 2、THREE.CanvasTexture用于加载canvas绘制的字体； 3、THREE.Shape，MeshLine用于实现平面地图； 4、THREE.ExtrudeGeometry用于将绘制的平面地图沿Z轴拉伸，出现3d效果； 5、THREE.CubicBezierCur...
echarts 3D earth实时攻击 线路图
10-18 2万+
echarts 3D 透明地球 需求 3D earth 透明度效果 坐标数据的涟漪扩散效果 效果图 第三方插件 &lt;script type="text/javascript" src="js/echarts.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/echarts-gl.min.js"&
百度地图+eChart实现动态迁徙图
05-29
在本项目中，我们将探讨如何使用百度地图API与ECharts数据可视化库来创建一个动态的迁徙图。这种图表能够生动地展示人口或物体在不同地理位置间的流动情况，常用于研究人口迁移、交通流量分析等领域。 首先，让我们...
echarts-3d地图.zip
07-31
ECharts 3D地图是ECharts的一个特色功能，它允许用户在三维空间中展示地理数据，增加了视觉表现力和交互性。在ECharts 3D地图的实现中，`echarts-gl` 模块起到了关键作用，它是ECharts的一个扩展，专门用于处理3D...
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地...
Echarts4+EchartsGL 3D迁徙图（附源码）
qq_29773123的博客
01-21 5985
最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个demo，希望能帮大家少走些弯路，共同学习。 一、效果图 二、准备引用文件 1、Echarts：Echarts4下载 2、Echarts GL：Echarts GL1下载 3、地图文件下载，js版本或json版本均可 三、代码 1、文件引用 &amp;amp;amp;l...
地级市echarts 3d 地图数据可视化
08-31
基于地级市3d 地图上的3d柱形图 更换相关json就可以变成你想要的城市的统计图 demo 学习多天心血之作 一起学习
可视化篇：R语言REmap+Echart做迁徙，通勤图
yjz_sdau的博客
11-23 4441
工作后经常要做一些比较贴合用户级别的可视化，R的ggplot2在做一些学术或者理论研究上的可视化时，效果是非常好，基本上能想到的图ggplot都能画出（不要纠结双坐标和3D）     在作静态图时，ggplot2+AI可以展现出印刷级别的效果，具体可以查看：http://theinformationcapital.com/ 这里要感谢数据人网一位朋友，是他介绍的这本书。     在作动态图或者
echarts 地图_【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制，JavaScript, WebGIS, 地图...
weixin_39976382的博客
11-29 577
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制，因为这些图表绘制其实是跟地理坐标无关的，只需要设置图表的位置即可，所以仅仅用了纯前端的方式去实现。这篇文章通过参考【dGIS】大佬的文章，重构了EchartsLayer.js文件(因为网上所有关于EchartsLayer.js文件的代码全部是编译过的，阅读起来很不友好，并且有些Echarts...
百度 Echarts 地图->模拟迁徙，实现自动切换地图
cj_zyz的博客
08-02 1万+
百度 Echarts 地图->模拟迁徙，实现自动切换地图 刚好有个项目，然后前端找了这个百度的echarts地图，领导说好，然后说要让它自动切换地图，就丢给我了。。。不过还好，做出来了。可惜的是，效果是实现了，最后却被更高级的领导pass掉，但决定写下这篇博客，或许能帮到有
地理坐标系与投影坐标系的区别
weixin_33882452的博客
03-29 324
1、首先理解地理坐标系（Geographic coordinate system），Geographic coordinate system直译为 地理坐标系统，是以经纬度为地图的存储单位的。很明显，Geographic coordinate syst em是球面坐标系统。我们要将地球上的数字化信息存放到球面坐标系统上，如何进行操作 呢？地球是一个不规则的椭球，如何将数据信息以科学的方...
Map 3D中程序设置地图中心点
weixin_33898233的博客
10-26 162
你可能需要在Map 3D中通过程序把某块地图拉到屏幕中央来，下面通过程序的方式来实现这个功能。   这里有两种情况，如果你在Map 3D中通过Data Connect连接到了一下FDO数据源（SDF、SHP、Oracle Spatial等等），并把他们加入到了地图上，这时你可以使用AcMapMap.ZoomToExtent方法，他接受一个MgEnvelope对象。但如果你么有FDO数据源，那么你就...
绘制流向地图（Flow Maps）
热门推荐
ArcGIS产品与技术专栏
04-27 2万+
1、 什么是流向地图         当事物或人从一个地点移动到另一个地点时，可以通过流向地图（Flow Maps）揭示出运动中的一些规律或现象。通常使用“线”来表示流向，且不同的宽度代表不同数量间的差异。 2 、流向地图类型     1) 网络流图         显示地点之间相互的连接，通常是基于交通或通讯联系。        【示例】：美国俄勒冈州的公路交通情况。
vue中使用echarts实现中国地图
口袋的天空的博客
03-31 2万+
第一种效果：不同省份颜色不同 代码： 注意：要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来 <template> <div class="echartsMapAllDemo"> <!-- style的宽高一定要写，不写也不会展示echarts图 --> <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:
手把手教学制作人口重心迁移地图
qq_39167542的博客
02-27 1万+
新年新气象！今天开始【凌晨GIS】第一篇原创文章，希望大家在新的一年里牛气冲天，直上云霄！这期小编跟大家分享的是如何制作一张人口重心迁移地图。首先百度一下定义，人口重心又称人口中心，为地区...
3D地图编辑器实现详解
"3D地图编辑器的实现涉及到游戏工具和引擎开发，对于初学者来说是一个很好的参考。本文将详细介绍3D地图编辑器的实现过程，包括其重要性、类型以及核心组件如地形编辑器。" 在3D游戏开发中，3D地图编辑器是不可或缺...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值