当前位置: 首页 > news >正文

vue使用Mars3d弹框嵌套video视频/实时视频(m3u8)使用hls.js

下载hls.js
http://mars3d.cn/lib/video/hls/hls.js下载
1.首先绘制地图我使用的天地图

 async infoMars3d() {const that = this;var mapOptions = {scene: {center: {lat: 30.435192,lng: 103.936535,alt: 200000,heading: 359,pitch: -79},highDynamicRange: false},// 方式1:在创建地球前的参数中配置basemaps: [{name: "天地图影像(EPSG:4326)",icon: "img/basemaps/tdt_img.png",type: "group",show: true,layers: [{name: "底图",type: "tdt",layer: "img_d",crs: "EPSG:4326",// key: mars3d.Token.tiandituArrkey: ["xxxx"]},{name: "注记",type: "tdt",layer: "img_z",crs: "EPSG:4326",// key: mars3d.Token.tiandituArrkey: ["xxxx"]}]}]};this.map = await new mars3d.Map("videoTreesmap", mapOptions);// 创建矢量数据图层graphicLayer = await new mars3d.layer.GraphicLayer();this.map.addLayer(graphicLayer);this.map.bindContextMenu([]);//地图加载完成this.map.on(mars3d.EventType.load, function(event) {//绘制省边线地图--以前文章有提到that.addDemoGraphics();//绘制视频点that.ArcGisWfs();});},

2.绘制视频点–使用DivGraphic
准备一组数据
urlsList= [{
name: “XXX”,
url: “xxx./hls.m3u8”,
poster: “/poster/XXX.jpg”,
addressLatitude: “30.899118”,
addressLongitude: “103.593783”
},…]

   ArcGisWfs() {const that = this;if (!this.map) return;graphicLayer.clear();graphicLayer.enabledEvent = false; // 关闭事件,大数据addGraphic时影响加载时间const result = this.urlsList;const graphicLayers = new mars3d.layer.GraphicLayer();this.map.addLayer(graphicLayers);for (let j = 0; j < result.length; ++j) {const index = j + 1;// 添加数据const graphic = that.addRandomGraphicByCount(graphicLayers,[result[j].addressLongitude, result[j].addressLatitude, 0],result[j],index);}graphicLayer.enabledEvent = true; // 恢复事件that.goToUrl(result[0]);return result.length;},addRandomGraphicByCount(graphicLayer, position, result, index) {const that = this;// 标点icon图片const srcImg = require("../../assets/images/icon-sssp.png");const graphicImg = new mars3d.graphic.DivGraphic({position,style: {html: ` <div class="mars3d-camera-content"><img class="mars3d-camera-img" style="width: 40px;height:40px"  src=${srcImg} ></div><div class="mars3d-camera-line" ></div><div class="mars3d-camera-point"></div>`,offsetX: -18,visibleDepth: true}popup: `<div style="width: 450px;text-align:center;font-size:15px;">${result.name}</div><video style="width: 450px;height:300px;" id="videoHLS"  muted="muted" autoplay="autoplay" loop="loop" crossorigin="" controls=""></video>`,popupOptions: {offsetY: -50, // 显示Popup的偏移值,是DivGraphic本身的像素高度值template: `<div class="marsBlackPanel animation-spaceInDown"><div class="marsBlackPanel-text">{content}</div><div></div><span class="mars3d-popup-close-button closeButton" style="color:#FFF" >×</span></div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.CENTER}});graphicLayer.addGraphic(graphicImg);graphicImg.on(mars3d.EventType.click, function(event) {const videoElement = event.container.querySelector("#videoHLS"); // popup对应的DOMif (window.Hls.isSupported()) {const hls = new window.Hls();console.log(window.Hls);hls.loadSource(hlsUrl);hls.attachMedia(videoElement);hls.on(window.Hls.Events.MANIFEST_PARSED, function() {videoElement.play();});} else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {videoElement.src = hlsUrl;videoElement.addEventListener("loadedmetadata", function() {videoElement.play();});}});},

相关文章:

vue使用Mars3d弹框嵌套video视频/实时视频(m3u8)使用hls.js

下载hls.js http://mars3d.cn/lib/video/hls/hls.js下载 1.首先绘制地图我使用的天地图 async infoMars3d() {const that this;var mapOptions {scene: {center: {lat: 30.435192,lng: 103.936535,alt: 200000,heading: 359,pitch: -79},highDynamicRange: false},// 方式1&a…...

Python爬虫之Ajax数据爬取基本原理

前言 有时候我们在用 requests 抓取页面的时候&#xff0c;得到的结果可能和在浏览器中看到的不一样&#xff1a;在浏览器中可以看到正常显示的页面数据&#xff0c;但是使用 requests 得到的结果并没有。这是因为 requests 获取的都是原始的 HTML 文档&#xff0c;而浏览器中…...

osg操控器和键盘切换操控器学习

osg提供了很多操控器,在src\osgGA目录下,cpp文件名含有Manipulator的都是操控器,每个这样的cpp表示一种类型的操控器。 名字带 Manipulator 的类都是操控器; 其中KeySwitchMatrixManipulator.cpp文件实现了键盘切换操控器; 操控器是指:操控相机运动,从而实现场景视图…...

LeetCode1143. Longest Common Subsequence——动态规划

文章目录 一、题目二、题解 一、题目 Given two strings text1 and text2, return the length of their longest common subsequence. If there is no common subsequence, return 0. A subsequence of a string is a new string generated from the original string with so…...

利用Windows10漏洞破解密码(保姆级教学)

前言: 本篇博客只是技术分享并非非法传播知识,实验内容均是在虚拟机中进行,并非真实环境 正文: 一.windows10电脑密码破解 1)开启windows10虚拟机,停留在这个页面 2&#xff09;按5次Shift键,出现这个粘滞键,如果没有出现的,则说明漏洞已经修复 3)重新启动,在这个页面的时候…...

apk反编译修改教程系列---简单修改apk默认横竖屏显示 手机端与电脑端同步演示【十一】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…...

2301: 不定方程解的个数

题目描述 输出不定方程解的个数。在数学中&#xff0c;不定方程是数论中的一个重要课题&#xff0c;在各种比赛中也常常出现. 对于不定方程&#xff0c;有时我们往往只求非负整数解&#xff0c;现有方程axbyc0&#xff0c;其中x、y为未知量且不超过10000&#xff0c;当给定a、…...

vue3学习——封装菜单栏

/Layout/Sidebar/index.vue <script setup lang"ts"> import Sidebar from ./Sidebar.vue // 在下面的代码里 import { useRoute } from vue-router import useUserStore from /store/modules/user.ts // state中存放菜单数据 import useLayoutSetting from /…...

深度学习的进展及其在各领域的应用

深度学习&#xff0c;作为人工智能的核心分支&#xff0c;近年来在全球范围内引起了广泛的关注和研究。它通过模拟人脑的学习机制&#xff0c;构建复杂的神经网络结构&#xff0c;从大量数据中学习并提取有用的特征表示&#xff0c;进而解决各种复杂的模式识别问题。 一、深度…...

blender怎么保存窗口布局,怎么设置默认输出文件夹

进行窗口布局大家都会&#xff0c;按照自己喜好来就行了&#xff0c;设置输出文件夹如图 这些其实都简单。关键问题在于&#xff0c;自己调好了窗口布局&#xff0c;或者设置好了输出文件夹之后&#xff0c;怎么能让blender下次启动的时候呈现出自己设置好的窗口布局&#xff…...

【开源】基于JAVA+Vue+SpringBoot的实验室耗材管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…...

【ES】--Elasticsearch的分词器详解

目录 一、前言二、分词器原理1、常用分词器2、ik分词器模式3、指定索引的某个字段进行分词测试3.1、采用ts_match_analyzer进行分词3.2、采用standard_analyzer进行分词三、如何调整分词器1、已存在的索引调整分词器2、特别的词语不能被拆开一、前言 最近项目需求,针对客户提…...

【算法】{画决策树 + dfs + 递归 + 回溯 + 剪枝} 解决排列、子集问题(C++)

文章目录 1. 前言2. 算法例题 理解思路、代码46.全排列78.子集 3. 算法题练习1863.找出所有子集的异或总和再求和47.全排列II17.电话号码的字母组合 1. 前言 dfs问题 我们已经学过&#xff0c;对于排列、子集类的问题&#xff0c;一般可以想到暴力枚举&#xff0c;但此类问题用…...

sqlserver 存储过程

在 SQL Server 中&#xff0c;存储过程&#xff08;Stored Procedure&#xff09;是一种预编译的 SQL 代码块&#xff0c;可以接受参数&#xff0c;执行一系列 SQL 语句&#xff0c;并返回一个或多个结果集。存储过程可以看作是一种封装了 SQL 语句的函数&#xff0c;可以在需要…...

C语言什么是悬空指针?

一、问题 什么是悬空指针&#xff1f;为什么会出现&#xff1f;我们该如何避免悬空指针的出现&#xff1f; 二、解答 在C语言中&#xff0c;悬空指针指的是指向已删除&#xff08;或释放&#xff09;的内存位置的指针。如果一个指针指向的内存被释放&#xff0c;但指针本身并未…...

AES加密后的密码可以破解吗

AES&#xff08;高级加密标准&#xff09;是一种广泛使用的对称加密算法&#xff0c;设计用来抵御各种已知的攻击方法。AES使用固定块大小的加密块和密钥长度&#xff0c;通常是128、192或256位。它被认为是非常安全的&#xff0c;到目前为止&#xff0c;没有已知的可行方法能够…...

vue3学习——路由进度条

安装 pnpm i nprogress创建permission.ts import router from /router/index.ts import NProgress from nprogress import nprogress/nprogress.css // 不加样式不显示 NProgress.configure({ showSpinner: false }) router.beforeEach((to, from, next) > {console.log(t…...

VMware虚拟机安装Windows系统教程

前言 今天给小伙伴分享一个安装Windows系统的教程&#xff0c;本教程适用于WindowsXP/7/8/8.1/10。 安装的系统前需要先检查一下你的电脑硬件环境&#xff0c;每个系统的硬件要求都不一样哦&#xff5e; 硬件要求指的是你的电脑主机的配置&#xff0c;如果低于这个配置的&am…...

vue3学习——router-view 过渡动画

虽然vue3说建vue页面不用包裹一个根节点&#xff0c;但是transition不能没有唯一的标签 所以还是得包一层~ o(&#xffe3;▽&#xffe3;)o <el-main><router-view v-slot"{ Component, route }"><transition name"MainFade" mode"o…...

从HSE攻击事件漫谈针对勒索攻击防御的两大误区

前言 HSE遭到严重的勒索软件攻击&#xff0c;爱尔兰的医疗服务系统是该国的公共资助医疗系统&#xff0c;在受到勒索病毒攻击之后&#xff0c;被迫在上周五关闭其 IT 系统&#xff0c;以此作为预防措施&#xff0c;避免威胁扩散。该事件导致该国家多家医院的服务取消和中断&am…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...