项目中使用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;看了一两集感…
阅读更多...
CSS系列（2）-- 盒模型精解

CSS系列（2）-- 盒模型精解

前端技术探索系列&#xff1a;CSS 盒模型精解 &#x1f4e6; 致读者&#xff1a;深入理解盒模型的本质 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS 盒模型&#xff0c;这是构建网页布局的核心概念。通过本文&#xff0c;你将全面理解盒模型的工作原理及…
阅读更多...
如果子组件是一个 Portal,发生点击事件能冒泡到父组件吗?

如果子组件是一个 Portal,发生点击事件能冒泡到父组件吗?

简介 在React中&#xff0c;Portal是一种允许组件渲染到DOM的不同位置的技术&#xff0c;主要用于解决溢出隐藏和z-index问题&#xff0c;如创建对话框或悬浮框等。关于子组件是Portal时&#xff0c;其点击事件是否能冒泡到父组件的问题&#xff0c;以下进行详细分析&#xff1…
阅读更多...
生成式AI概览与详解

生成式AI概览与详解

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

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

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

.NET周刊【12月第1期 2024-12-01】

我在.NET Conf China 2024 等你&#xff01; .NET Conf China 2024 是一场面向开发人员的社区盛会&#xff0c;旨在庆祝 .NET 9 的发布&#xff0c;并回顾过去一年 .NET 在中国的发展成就。作为延续 .NET Conf 2024 的重要活动&#xff0c;本次峰会汇聚了来自中国各地区的技术…
阅读更多...
STM32软件IIC驱动TCA9548A多路测量AHT10

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 决赛] 面试

信奥赛CSP-J复赛集训（dfs专题-刷题题单及题解）（15）：洛谷P8838：[传智杯 #3 决赛] 面试 题目背景 disangan233 和 disangan333 去面试了，面试官给了一个问题，热心的你能帮帮他们吗？ 题目描述 现在有 n n n 个服务器，服务器
阅读更多...
ARM学习（36）静态扫描规则学习以及工具使用

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

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

LabVIEW实现HTTP通信

目录 1、HTTP通信原理 2、硬件环境部署 3、云端环境部署 4、HTTP通信函数 5、程序架构 6、前面板设计 7、程序框图设计 本专栏以LabVIEW为开发平台，讲解物联网通信组网原理与开发方法，覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例，展示如何利用LabVIEW和…
阅读更多...
Python机器学习笔记（五、决策树集成）

Python机器学习笔记（五、决策树集成）

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

虚幻引擎C++按键绑定

在项目的 Project Settings -> Engine -> Input 中进行配置。 配置输入映射的步骤&#xff1a; 打开 Project Settings: 在 Unreal Editor 中&#xff0c;点击菜单栏的 Edit -> Project Settings。 导航到 Input: 在 Project Settings 窗口的左侧导航栏中&#xff0…
阅读更多...
态感知与势感知

态感知与势感知

“态感知”和“势感知”是两个人机交互中较为深奥的概念&#xff0c;它们虽然都与感知、认知相关&#xff0c;但侧重点不同。下面将从这两个概念的定义、区分以及应用领域进行解释&#xff1a; 1. 态感知 态感知通常指的是对事物当前状态、属性或者内在特征的感知。它强调的是在…
阅读更多...
为什么数据平台需要敏捷版｜直播回顾

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

11月28日&#xff0c;我们邀请到StartDT合伙人、CTO地雷和StartDT资深战略咨询专家何夕&#xff0c;围绕“为什么数据平台需要敏捷版”这个话题&#xff0c;向大家汇报了DataSimba敏捷版这半年来的最新进展&#xff0c;并带来了详细的产品解读。 敏捷版支持StarRocks、ClickHo…
阅读更多...
FUXA：基于Web的工艺可视化（SCADAHMI仪表板）软件安装与使用指南

FUXA：基于Web的工艺可视化（SCADAHMI仪表板）软件安装与使用指南

FUXA&#xff1a;基于Web的工艺可视化&#xff08;SCADA/HMI/仪表板&#xff09;软件安装与使用指南 项目地址:https://gitcode.com/gh_mirrors/fu/FUXA 1. 项目介绍 FUXA是一款完全基于Web的跨平台全栈式软件&#xff0c;专为过程可视化设计&#xff0c;涵盖SCADA/HMI/仪表板…
阅读更多...
scala的隐式转换2

scala的隐式转换2

隐士类:implicit class 隐式转换函数 类 第一步:定义一个有updateUser功能的类 PowerUser 第二步: 定义一个隐式转换函数&#xff0c;把BaseUser ---> PowerUser 代码如下: package test1 //隐士类:implicit class 隐式转换函数 类 object y1 {class BaseUser(){def…
阅读更多...
SpringBoot【九】mybatis-plus之自定义sql零基础教学！

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的过程-签到性能和便携

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

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

ThinkPHP知识库文档系统源码

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

交换排序(Swap Sort)详解

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

Copyright @ 2022~2023