项目中使用AntV L7地图(五)添加飞线

项目中使用AntV L7地图,添加 飞线

文档地址:https://l7.antv.antgroup.com/zh/examples/line/animate/#trip_animate

一、初始化地图
  • 使用的地图文件为四川地图JSON,下载地址:https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
import { ref, onMounted } from "vue";
import { Scene } from "@antv/l7";
import { Map } from "@antv/l7-maps";const scene: any = ref(null); //地图实例function initMap() {scene = new Scene({id: "map",logoVisible: false, //logo 是否可见map: new Map({center: [104.065735, 30.659462], //中心点zoom: 5.4, //初始化缩放等级interact: false, // 高德地图是否允许地图可拖动,默认为truepitch: 30,}),});scene.setMapStatus({dragEnable: false, //是否允许地图拖拽keyboardEnable: false, // 是否允许形键盘事件doubleClickZoom: false, // 双击放大zoomEnable: false, // 滚动缩放rotateEnable: false, // 旋转});scene.on("loaded", () => {addPolygonLayer();addLineLayer()});
}onMounted(() => {initMap();
});
二、添加地图面图层
import sichuanJson from "@/assets/json/sichuan.json";
import sichuanAreaJson from "@/assets/json/scArea.json"; //将地图下载存放在本地文件中,并引入function addPolygonLayer() {//边线const sichuanLineShapeMap = new LineLayer({ zIndex: 10 }).source(sichuanJson).shape("line").size(0).color("rgb(175, 222, 255)").style({// raisingHeight: 200000,});const sichuanLineMap = new LineLayer({ zIndex: 10 }).source(sichuanAreaJson).shape("wall").size(150000).style({heightfixed: true,opacity: 0.6,sourceColor: "rgba(0,0, 0,.5)",targetColor: "rgb(175, 222, 255)",});let polygonLayer = new PolygonLayer() //{ autoFit: true }.source(sichuanAreaJson).size(150000).shape("extrude").color("rgba(0,0, 0,.5)").active({color: "rgb(100,230,255)",}).style({//  mapTexture: mapBg,heightfixed: true,pickLight: true,raisingHeight: 10000,opacity: 0.8,});const texts: any = [];sichuanAreaJson.features.map((option: any) => {const { name, center } = option.properties;const [lng, lat] = center;texts.push({ name, lng, lat });return "";});const scPointLayer = new PointLayer({ zIndex: 10 }).source(texts, {parser: {type: "json",x: "lng",y: "lat",},}).shape("name", "text").size(10).color("#fff").style({textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近stroke: "#fff", // 描边颜色strokeWidth: 0.3, // 描边宽度textAllowOverlap: true,raisingHeight: 10000,});scene.addLayer(polygonLayer);scene.addLayer(sichuanLineShapeMap);scene.addLayer(scPointLayer);scene.addLayer(sichuanLineMap);
}
三、添加地图飞线

1、引入需要渲染飞线的数据

//数据格式如下:
[
{ "startLongitude":"104.080989","startLatitude":"30.657689","endLongitude":"101.964057","endLatitude":"30.050738"}
]

2、

import flyData from "@/assets/json/flyData.json"
function addLineLayer(){const layer = new LineLayer({blend: 'normal',}).source(flyData, {parser: {type: 'json',x: 'startLongitude',y: 'startLatitude',x1: 'endLongitude',y1: 'endLatitude',},}).size(2).shape('arc3d').color('#fff').animate({interval:0.5,trailLength: 1,duration: 3,}).style({opacity:1,raisingHeight: 10000,});scene.addLayer(layer);
}function addChinaLineLayer() {moveLineLayer.value = new LineLayer({blend: "normal",}).source(dailyFlyData, {parser: {type: "json",x: "startLongitude",y: "startLatitude",x1: "endLongitude",y1: "endLatitude",},}).size(3).shape("arc3d").color("rgb(249, 252, 22)").animate({interval: 0.5,trailLength: 1,duration: 3,}).style({opacity: 1,raisingHeight: 10000,});movePointLineLayer.value = new PointLayer({autoFit: false,zIndex:10}).source(dailyFlyData, {parser: {type: "json",x: "endLongitude",y: "endLatitude",},}).shape("name", "text").size(14).active(true).color("#18ecef").style({raisingHeight: 35000,});scene.value.addLayer(moveLineLayer.value);scene.value.addLayer(movePointLineLayer.value);
}
四、完整代码如下
<script lang="ts" setup>
import { onMounted } from "vue";
import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
import { Map } from "@antv/l7-maps";
import sichuanJson from "@/assets/json/sichuan.json";
import sichuanAreaJson from "@/assets/json/scArea.json";
// import mapBg from "@/assets/images/screen/home/bg_screen.png"
import flyData from "@/assets/json/flyData.json"let scene: Scene; //地图实例//初始化地图
function initMap() {scene = new Scene({id: "map",logoVisible: false, //logo 是否可见map: new Map({center: [104.065735, 30.659462], //中心点zoom: 5.4, //初始化缩放等级interact: false, // 高德地图是否允许地图可拖动,默认为truepitch: 30,}),});scene.setMapStatus({dragEnable: false, //是否允许地图拖拽keyboardEnable: false, // 是否允许形键盘事件doubleClickZoom: false, // 双击放大zoomEnable: false, // 滚动缩放rotateEnable: false, // 旋转});scene.on("loaded", () => {addPolygonLayer();addLineLayer()});
}function addPolygonLayer() {//边线const sichuanLineShapeMap = new LineLayer({ zIndex: 10 }).source(sichuanJson).shape("line").size(0).color("rgb(175, 222, 255)").style({// raisingHeight: 200000,});const sichuanLineMap = new LineLayer({ zIndex: 10 }).source(sichuanAreaJson).shape("wall").size(150000).style({heightfixed: true,opacity: 0.6,sourceColor: "rgba(0,0, 0,.5)",targetColor: "rgb(175, 222, 255)",});let polygonLayer = new PolygonLayer() //{ autoFit: true }.source(sichuanAreaJson).size(150000).shape("extrude").color("rgba(0,0, 0,.5)").active({color: "rgb(100,230,255)",}).style({//  mapTexture: mapBg,heightfixed: true,pickLight: true,raisingHeight: 10000,opacity: 0.8,});const texts: any = [];sichuanAreaJson.features.map((option: any) => {const { name, center } = option.properties;const [lng, lat] = center;texts.push({ name, lng, lat });return "";});const scPointLayer = new PointLayer({ zIndex: 10 }).source(texts, {parser: {type: "json",x: "lng",y: "lat",},}).shape("name", "text").size(10).color("#fff").style({textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-leftspacing: 2, // 字符间距padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近stroke: "#fff", // 描边颜色strokeWidth: 0.3, // 描边宽度textAllowOverlap: true,raisingHeight: 10000,});scene.addLayer(polygonLayer);scene.addLayer(sichuanLineShapeMap);scene.addLayer(scPointLayer);scene.addLayer(sichuanLineMap);
}function addLineLayer(){const layer = new LineLayer({blend: 'normal',}).source(flyData, {parser: {type: 'json',x: 'startLongitude',y: 'startLatitude',x1: 'endLongitude',y1: 'endLatitude',},}).size(2).shape('arc3d').color('#fff').animate({interval:0.5,trailLength: 1,duration: 3,}).style({opacity:1,raisingHeight: 10000,});scene.addLayer(layer);
}onMounted(() => {initMap();
});
</script><template><div class="map-content"><div id="map"></div></div>
</template><style lang="scss" scoped>
.map-content {width: 100%;height: 100%;box-sizing: border-box;position: relative;overflow-y: hidden;#map {width: 100%;height: 100%;}
}</style>
五、效果图

在这里插入图片描述

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

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

相关文章

《九重紫》逐集分析鉴赏—序言、概览、框架分析

主标题&#xff1a;《九重紫》一起追剧吧副标题&#xff1a;《九重紫》逐集分析鉴赏—序言、概览、框架分析《永夜星河》后&#xff0c;以为要浅尝剧荒&#xff0c;一部《九重紫》突出重围。 看了宣传片感觉不是很差&#xff0c;看了部分剪辑感觉还可以&#xff0c;看了一两集感…

生成式AI概览与详解

1. 生成式AI概览&#xff1a;什么是大模型&#xff0c;大模型应用场景&#xff08;文生文&#xff0c;多模态&#xff09; 生成式AI&#xff08;Generative AI&#xff09;是指通过机器学习模型生成新的数据或内容的人工智能技术。生成式AI可以生成文本、图像、音频、视频等多种…

0001.简易酒店管理系统后台

一.系统架构 springmvcjsplayuimysql 二.功能特性 简单易学习&#xff0c;虽然版本比较老但是部署方便&#xff0c;tomcat环境即可启用&#xff1b;代码简洁&#xff0c;前后端代码提供可统一学习&#xff1b;祝愿您能成尽快为一位合格的程序员&#xff0c;愿世界没有BUG; …

STM32软件IIC驱动TCA9548A多路测量AHT10

STM32软件IIC驱动TCA9548多路测量AHT10 TCA9548AAHT10代码逻辑代码展示现象总结 TCA9548A TCA9548A 有八个可通过 I2C 总线控制的双向转换开关&#xff0c;SCL/SDA 上行对扩展到八个下行对&#xff0c;或者通道&#xff0c;适用于系统中存在I2C目标地址冲突的情况。8路双向转换…

信奥赛CSP-J复赛集训(dfs专题)(15):洛谷P8838:[传智杯 #3 决赛] 面试

信奥赛CSP-J复赛集训(dfs专题-刷题题单及题解)(15):洛谷P8838:[传智杯 #3 决赛] 面试 题目背景 disangan233 和 disangan333 去面试了,面试官给了一个问题,热心的你能帮帮他们吗? 题目描述 现在有 n n n 个服务器,服务器

ARM学习(36)静态扫描规则学习以及工具使用

笔者来学习了解一下静态扫描以及其规则&#xff0c;并且亲身是实践一下对arm 架构的代码进行扫描。 1、静态扫描认识 静态扫描&#xff1a;对代码源文件按照一定的规则进行扫描&#xff0c;来发现一些潜在的问题或者风险&#xff0c;因为不涉及代码运行&#xff0c;所以其一般…

Python机器学习笔记(五、决策树集成)

集成&#xff08;ensemble&#xff09;是合并多个机器学习模型来构建更强大模型的方法。这里主要学习两种集成模型&#xff1a;一是随机森林&#xff08;random forest&#xff09;&#xff1b;二是梯度提升决策树&#xff08;gradient boosted decision tree&#xff09;。 1…

为什么数据平台需要敏捷版|直播回顾

11月28日&#xff0c;我们邀请到StartDT合伙人、CTO地雷和StartDT资深战略咨询专家何夕&#xff0c;围绕“为什么数据平台需要敏捷版”这个话题&#xff0c;向大家汇报了DataSimba敏捷版这半年来的最新进展&#xff0c;并带来了详细的产品解读。 敏捷版支持StarRocks、ClickHo…

SpringBoot【九】mybatis-plus之自定义sql零基础教学!

一、前言&#x1f525; 环境说明&#xff1a;Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE mybatis-plus的基本使用&#xff0c;前两期基本讲的差不多&#xff0c;够日常使用&#xff0c;但是有的小伙伴可能就会抱怨了&#xff0c;若是遇到业务逻辑比较复杂的sq…

Android后端签到flask迁移到rust的axum的过程-签到性能和便携

本次变更了以下内容: 为了使用之前ip2sta的ip到端点名的python,dic变量,将其存入redis hashset.使用地址/api/ip2dic 手动执行之.并且定义在/station/init,这个每天初始化redis的路径下.在rust axum使用redis 连接池在test中 ip2dic,IP转端点名,转本日此端网址.在前端的人名下…

ThinkPHP知识库文档系统源码

知识库文档系统 一款基于ThinkPHP开发的知识库文档系统&#xff0c;可用于企业工作流程的文档管理&#xff0c;结构化记录沉淀高价值信息&#xff0c;形成完整的知识体系&#xff0c;能够轻松提升知识的流转和传播效率&#xff0c;更好地成就组织和个人。为部门、团队或项目搭…

交换排序(Swap Sort)详解

交换排序Swap Sort详解 冒泡排序冒泡算法代码实现冒泡分析 快速排序快排算法代码实现快排分析 交换类排序主要是通过两两比较待排元素的关键字&#xff0c;若发现与排序要求相逆&#xff0c;则交换之。在这类排序方法中最常见的是起泡排序&#xff08;冒泡排序&#xff09;和快…

091 脉冲波形的变换与产生

00 如何获得脉冲波形 01 单稳态触发器 1.分类 2.工作特点&#xff1a; ① 电路在没有触发信号作用时处于一种稳定状态。 ② 在外来触发信号作用下&#xff0c;电路由稳态翻转到暂稳态; ③ 由于电路中RC延时环节的作用&#xff0c;暂稳态不能长保持, 经过一段时间后&#xff0c…

高级排序算法(二):归并排序与堆排序详解

引言 在上一章中&#xff0c;我们探讨了高效的快速排序及其分治思想。这一次&#xff0c;我们将继续探索两种同样重要的排序算法&#xff1a;归并排序&#xff08;Merge Sort&#xff09; 和 堆排序&#xff08;Heap Sort&#xff09;。 它们与快速排序一样&#xff0c;都是O(…

JVM调优之如何排查CPU长时间100%的问题

对于CPU长时间100%的问题&#xff0c;其实有一个比较标准的排查流程&#xff0c;现在模拟一个垃圾回收导致的cup占用率过高的排查方法。 步骤如下&#xff1a; 1.先通过top命令找到消耗cpu很高的进程id 在服务器上输入top&#xff0c;显示如下&#xff1a; 通过top命令定位到…

中间件--MongoDB部署及初始化js脚本(docker部署,docker-entrypoint-initdb.d,数据迁移,自动化部署)

一、概述 MongoDB是一种常见的Nosql数据库&#xff08;非关系型数据库&#xff09;&#xff0c;以文档&#xff08;Document&#xff09;的形式存储数据。是非关系型数据库中最像关系型数据库的一种。本篇主要介绍下部署和数据迁移。 在 MongoDB 官方镜像部署介绍中&#xff…

SkyWalking Helm Chart 4.7.0 安装、配置

https://skywalking.apache.org/events/release-apache-skywalking-kubernetes-helm-chart-4.7.0/https://github.com/apache/skywalking-helm/tree/v4.7.0https://skywalking.apache.org/zh/2020-04-19-skywalking-quick-start/简介 skywalking 是分布式系统的 APM(Applicat…

HTA8998 实时音频跟踪的高效内置升压2x10W免电感立体声ABID类音频功放

1、特征 输出功率(fIN1kHz,RL4Ω&#xff0c;BTL) VBAT 4V, 2x10.6W(VOUT9V,THDN10%) VBAT 4V, 2x8.6W (VOUT9V,THDN1%) 内置升压电路模式可选择:自适应实时音频跟踪 升压(可提升播放时间50%以上)、强制升压 最大升压值可选择&#xff0c;升压限流值可设置 ACF防破音功能 D类…

时间敏感网络与工业通信的融合:光路科技电力专用交换机和TSN工业交换机亮相EP电力展

12月7日&#xff0c;第三十一届中国国际电力设备及技术展览会&#xff08;EP Shanghai 2024&#xff09;暨上海国际储能技术应用展览会在上海新国际博览中心圆满落幕。本届展会以“数字能源赋能新质生产力”为主题&#xff0c;系统地呈现了电力设备行业在技术融合、转型升级及上…

前端请求后端接口报错(blockedmixed-content),以及解决办法

报错原因&#xff1a;被浏览器拦截了&#xff0c;因为接口地址不是https的。 什么是混合内容&#xff08;Mixed Content&#xff09; 混合内容是指在同一页面中同时包含安全&#xff08;HTTPS&#xff09;和非安全&#xff08;HTTP&#xff09;资源的情况。当浏览器试图加载非…