echarts 3d中国地图飞行线

一、3D中国地图
1. 一定要使用 echarts 5.0及以上的版本;

2. echarts 5.0没有内置中国地图了。点击下载 china.json;

3. 一共使用了四层地图。
(1)第一层是中国地图各省细边框和展示南海诸岛;
(2)第二层是实现中国地图外边框的宽度和阴影,与第一层完全重合,隐藏南海诸岛;
(3)第三层和第四层形成一个底层3d立体,使用top往下偏移,隐藏南海诸岛。

// html
<div class="china-map" ref="chinaMap"></div>
// 引入资源
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
 
// 方法
chinaEchart(){
    //注册地图,这个特别重要
    echarts.registerMap('china', china)
    let myChart = echarts.init(this.$refs.chinaMap);
    //echart 配制option  
      var options= {
        tooltip: {
          show:true,
          triggerOn: "mousemove",   //mousemove、click
          padding:[4,8],
          borderWidth:1,
          borderColor:'#409eff',
          backgroundColor:'rgba(255,255,255,0.7)',
          textStyle:{
            color:'#000000',
            fontSize:13
          },
          formatter: function(e) {
            return e.name;
          }
        },
        geo: [
          // 第一层
          {
            map: "china",
            z: 3,
            zoom: 1.2,
            aspectScale: 0.85,
            roam: false,
            top: '10%',
            layoutSize: "100%", //保持地图宽高比
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  borderWidth: 0.5,
                  shadowBlur: 0,
                  borderColor: '#61aacb',
                  areaColor: '#104584'
                }
              }
            ],
            itemStyle:{
              borderColor: '#c8feff',
              borderWidth: 0.5,
              shadowBlur: 3,
              shadowColor: '#66edff',
              areaColor: '#0862db'
            },
            emphasis:{
              itemStyle:{
                shadowBlur: 10,
                borderWidth: 1,
                areaColor: '#2da9ff',
              },
              label:{
                show:false,
                color: '#ffffff',
              }
            },
            select:{
              itemStyle:{
                shadowBlur: 10,
                borderWidth: 1,
                areaColor: '#2da9ff',
              },
              label:{
                color: '#ffffff',
              }
            }
          },
          // 第二层
          {
            map: "china",
            z: 2,
            zoom: 1.2,
            aspectScale: 0.85,
            roam: false,
            silent:true,
            top: '10%',
            layoutSize: "100%", //保持地图宽高比
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  opacity: 0 // 为 0 时不绘制该图形
                },
                label: {
                  show: false
                }
              }
            ],
            itemStyle:{
              borderColor: '#d8feff',
              borderWidth: 3,
              shadowBlur: 10,
              shadowColor: '#22a1ff',
              areaColor: '#0862db',
              shadowOffsetX: 0,
              shadowOffsetY: 8
            },
          },
          // 第三层
          {
            map: "china",
            z: 1,
            zoom: 1.2,
            aspectScale: 0.85,
            top: '11.5%',
            silent:true,
            layoutSize: "100%", //保持地图宽高比
            itemStyle:{
              borderColor: '#c8feff',
              borderWidth: 1,
              shadowBlur: 0,
              shadowColor: '#99c4ff',
              areaColor: '#4ebaff',
            },
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  opacity: 0 // 为 0 时不绘制该图形
                },
                label: {
                  show: false
                }
              }
            ],
          },
          // 第四层
          {
            map: "china",
            z: 0,
            zoom: 1.2,
            aspectScale: 0.85,
            top: '12%',
            silent:true,
            layoutSize: "100%", //保持地图宽高比
            itemStyle:{
              borderColor: '#66edff',
              borderWidth: 2,
              shadowBlur: 20,
              shadowColor: '#4d99ff',
              areaColor: '#1752ad',
              shadowOffsetX: 0,
              shadowOffsetY: 8
            },
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  opacity: 0 // 为 0 时不绘制该图形
                },
                label: {
                  show: false
                }
              }
            ],
          },
        ],
        series: [
          // 地图
          {
            type: "map",
            geoIndex: 0,
            data: []
          }
        ]
      }
      myChart.setOption(options);
}
二、地图飞线
1. 飞线有一对多,多对多;

2. 起点和终点使用effectScatter标点。

// 起点名称和经纬度
const fromName = '重庆市'
const fromLatlng = [106.33,29.35]
 
// 终点名称和经纬度
const geoCoordMap = [
    { name: '盘锦市', latlng: [120.93141287481329, 40.93448132827849]},
    { name: '沧州市', latlng: [116.71809759843096, 37.96769678343516]},
    { name: '东营市', latlng: [118.29234782217573, 37.44294670885357]},
    { name: '大连市', latlng: [121.26593157813807, 38.886009413952934]},
    { name: '沈阳市', latlng: [122.220947193165, 41.64094730550629]},
    { name: '北京市', latlng: [116.07673639616456, 40.110426254643315]},
    { name: '白银市', latlng: [101.09220648866805, 36.568363251217576]},
    { name: '石家庄市', latlng: [115.20215293852858, 38.886009413952934]}
]
 
//飞线数据
const linesData = geoCoordMap.map(row=>{
    return {
        coords: [
            fromLatlng,
            row.latlng
        ],
        fromName: fromName,
        toName: row.name,
        lineStyle: {
            color: '#FFE747',
            curveness: 0.2
        }
    }
})
 
// 终点标点数据
let effectData = geoCoordMap.map(row=>{
    return {
        value: row.latlng,
        name: row.name,
        lineStyle: {
            color: '#FFE747'
        }
    }
})
 
// series新增飞线
series: [
     // 飞线
     {
            type: 'lines',
            zlevel: 5,
            effect: {
              show: true,
              period: 5, //箭头指向速度,值越小速度越快
              trailLength: 0, //特效尾迹长度[0,1]值越大,尾迹越长重
              symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
              symbolSize: 8, //图标大小
            },
            lineStyle: {
              color: '#FFE747',
              type: 'dashed',
              width: 2, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3 //尾迹线条曲直度
            },
            data: linesData,
            markPoint:{
              symbol: 'circle', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
              symbolSize: 8, //图标大小
            }
    },
    //起点
    {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 6,
            rippleEffect: {
                //涟漪特效
                period: 4, //动画时间,值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制,值越大波纹越大
            },
            label: {
              show: false,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: '{b}', //圆环显示文字
              color: 'red'
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return 10; //圆环大小
            },
            itemStyle: {
              show: false,
              color: '#ff8400',
            },
            data: [{value: fromLatlng,name: fromName}]
          },
          // 终点
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 6,
            rippleEffect: {
                //涟漪特效
                period: 4, //动画时间,值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制,值越大波纹越大
            },
            label: {
              show: false,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: '{b}', //圆环显示文字
              color: 'red'
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return 6; //圆环大小
            },
            itemStyle: {
              show: false,
              color: '#befaff',
            },
            data: effectData
}]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/16885.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从 0 开始本地部署 DeepSeek:详细步骤 + 避坑指南 + 构建可视化(安装在D盘)

个人主页&#xff1a;chian-ocean 前言&#xff1a; 随着人工智能技术的迅速发展&#xff0c;大语言模型在各个行业中得到了广泛应用。DeepSeek 作为一个新兴的 AI 公司&#xff0c;凭借其高效的 AI 模型和开源的优势&#xff0c;吸引了越来越多的开发者和企业关注。为了更好地…

[AI]Mac本地部署Deepseek R1模型 — — 保姆级教程

[AI]Mac本地部署DeepSeek R1模型 — — 保姆级教程 DeepSeek R1是中国AI初创公司深度求索&#xff08;DeepSeek&#xff09;推出大模型DeepSeek-R1。 作为一款开源模型&#xff0c;R1在数学、代码、自然语言推理等任务上的性能能够比肩OpenAI o1模型正式版&#xff0c;并采用MI…

Linux(socket网络编程)TCP连接

Linux&#xff08;socket网络编程&#xff09;TCP连接 基础文件目录函数系统进程控制函数fork()exec系列函数void abort(void)void assert(int expression)void exit(int status)void _exit(int status)int atexit(void (*func)(void))int on_exit(void (*function)(int,void*)…

408-数据结构

数据结构在学什么&#xff1f; 1.用代码把问题信息化 2.用计算机处理信息 ch1 数据&#xff1a;数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程序识别和处理的符号的集合。数据是计算机程序加工的原料。 ch2 //假设线性表…

Go语言开发桌面应用基础框架(wails v3)-开箱即用框架

前言 本文是介绍如何集成好了Wails3开发框架以及提供视频教程&#xff0c;当你需要桌面开发时&#xff0c;直接下载我们基础框架代码&#xff0c;开箱即用不用配置开发需要依赖。 为什么使用v3版本&#xff0c;主要是v3新增的功能 ​支持多个窗口&#xff1a;在单个应用程序…

Git 与 Git常用命令

Git 是一个开源的分布式版本控制系统&#xff0c;广泛用于源代码管理。与传统的集中式版本控制系统不同&#xff0c;Git 允许每个开发者在本地拥有完整的代码库副本&#xff0c;支持离线工作和高效的分支管理。每次提交时&#xff0c;Git 会对当前项目的所有文件创建一个快照&a…

尚硅谷爬虫note004

一、urllib库 1. python自带&#xff0c;无需安装 # _*_ coding : utf-8 _*_ # Time : 2025/2/11 09:39 # Author : 20250206-里奥 # File : demo14_urllib # Project : PythonProject10-14#导入urllib.request import urllib.request#使用urllib获取百度首页源码 #1.定义一…

老WinForm中一个执行文件使用SQLite数据库

EF6在老WinForm中停止更新了&#xff0c;但如果只是在win10上面使用&#xff0c;老的.net Framework 4.8框架有一个优势&#xff0c;编译后的执行文件很小。还有一些老类库也只能在老的.net Framework 4.8框架使用&#xff0c;所以微软还是保留了老的.net Framework 4.8框架。 …

diff算法简析

diff算法的核心目的是用最少的步骤找出新旧节点的差异&#xff0c;从而更新视图。 diff算法是一种通过同层的树节点进行比较的高效算法&#xff0c;探讨的是虚拟DOM树发生变化后&#xff0c;生成DOM树更新补丁的方式。对比新旧两株虚拟DOM树的差异&#xff0c;将更新补丁作用于…

19.3 连接数据库

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 ​​​​​​​需要北风数据库的请留言自己的信箱。 连接数据库使用OleDbConnection&#xff08;数据连接&#xff09;类&#xff…

Redis实现分布式锁

一、使用分布式锁的背景是什么 1、如果你公司的业务&#xff0c;各个应用都只部署了一台机器&#xff0c;那么完全用不着分布式锁&#xff0c;直接使用Java的锁即可 2、可是当你们的业务量大&#xff0c;多台机器并发情况下争夺一个资源的时候&#xff0c;就必须要保证业务的…

变化检测相关论文可读list

一些用得上的&#xff1a; 遥感变化检测常见数据集https://github.com/rsdler/Remote-Sensing-Change-Detection-Dataset/ 代码解读&#xff1a;代码解读 | 极简代码遥感语义分割&#xff0c;结合GDAL从零实现&#xff0c;以U-Net和建筑物提取为例 对本list的说明&#xff1a;…

docker 逃逸突破边界

免责声明 本博客文章仅供教育和研究目的使用。本文中提到的所有信息和技术均基于公开来源和合法获取的知识。本文不鼓励或支持任何非法活动&#xff0c;包括但不限于未经授权访问计算机系统、网络或数据。 作者对于读者使用本文中的信息所导致的任何直接或间接后果不承担任何…

cv2.Sobel

1. Sobel 算子简介 Sobel 算子是一种 边缘检测算子&#xff0c;通过对图像做梯度计算&#xff0c;可以突出边缘。 Sobel X 方向卷积核&#xff1a; 用于计算 水平方向&#xff08;x 方向&#xff09; 的梯度。 2. 输入图像示例 假设我们有一个 55 的灰度图像&#xff0c;像素…

网络编程 day3

思维导图 以select函数模型为例 思维导图2 对应 epoll模型 应使用的函数 题目 使用epoll函数实现 两个客户端 通过服务器 实现聊天 思路 在原先代码基础上 实现 服务器 发向 客户端 使用客户端在服务器上的 套接字描述符 实现 客户端 接收 服务器…

Java 同步锁性能的最佳实践:从理论到实践的完整指南

目录 一、同步锁性能分析 &#xff08;一&#xff09;性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 &#xff08;二&#xff09;案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …

Mac之JDK安装

Mac之JDK安装 一.安装 jdk 打开终端输入命令:java -version 查看是否已安装 JDK Oracle 官方下载地址 根据自己Mac 系统安装 查看 Mac 系统&#xff0c;打开中断命令&#xff0c;输入: uname -a Compressed Archive 是压缩文档&#xff0c;下载的是一个 .tar.gz 压缩包 D…

[MySQL]5-MySQL扩展(分片)

随着数据量和用户量增加&#xff0c;MySQL会有读写负载限制。以下是部分解决方案 目录 功能拆分 使用读池拓展读&#xff08;较复杂&#xff09; 排队机制 &#x1f31f;分片拓展写 按业务或职责划分节点或集群 大数据集切分 分片键的选择 多个分片键 跨分片查询 资料…

芯盾时代数据安全产品体系,筑牢数据安全防线

芯盾时代数据安全治理&#xff08;DSG&#xff09;框架&#xff0c;以国家法律法规、行业监管标准、行业最佳实践为依据&#xff0c;从数据安全战略出发&#xff0c;以数据分类分级为支撑&#xff0c;构数据安全管理体系、数据安全技术体系、数据安全运营体系与数据安全监督评价…

腾讯大数据基于 StarRocks 的向量检索探索

作者&#xff1a;赵裕隆&#xff0c;腾讯大数据研发工程师 本文整理自腾讯大数据工程师在 StarRocks 年度峰会上的分享&#xff0c;深入探讨了向量检索技术的原理与应用。此功能已应用到腾讯内部多个场景&#xff0c;引入 StarRocks 后&#xff0c;业务不仅不需要维护多套数据库…