vue+mars3d给影像底图叠加炫酷效果

话不多说,直接上效果图:

在这里墙体其实是有一个不太明显的流动效果

实现方式:这里我使用了PolylineEntity+WallPrimitive,开始我用的是polygonEntity但是发现实现效果并不好,所有直接改用了线

map.vue文件:在methods方法中调用后台接口返回的数据

//影像范围线initImageLine(){let vthis = this;getimageRangeLine().then(res=>{if(res.status == 0){let arr = res.wktList[0].lnglatvthis.graphicLayer_outerLine = initLine(this.map,arr)} }).catch(err=>{console.log(err)})},

map.js文件:封装initLine方法,叠加在地图上展示

  //叠加polygonEntity--最外层范围线function initLine(m,p){graphicLayer_outerLine = new mars3d.layer.GraphicLayer();m.addLayer(graphicLayer_outerLine)let polylineGraphic = new mars3d.graphic.PolylineEntity({positions: p,style: {width: 20,color: "#b3e0ff",depthFail: false,materialType: mars3d.MaterialType.PolylineGlow,materialOptions: {color: "#00FFFF", glowPower: 0.1,taperPower: 0.5,}}})graphicLayer_outerLine.addGraphic(polylineGraphic)let wall = new mars3d.graphic.WallPrimitive({positions: p,style: {setHeight: -10000,diffHeight: 10000, // 墙高width: 10,materialType: mars3d.MaterialType.LineFlow,materialOptions: {image: "//data.mars3d.cn/img/textures/fence.png",color: "#0b88e3",repeatX: 2, // 重复数量axisY: true, // 竖直方向opacity: 0.7, // 透明度speed: 20, // 速度}},closed:true})graphicLayer_outerLine.addGraphic(wall)return graphicLayer_outerLine      //这里返回是因为我需要在map.vue中可以控制显示隐藏}

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

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

相关文章

浅谈volatile

volatile有三个特性: (1)可见性 (2)不保证原子性 (3)禁止指令重排 下面我们一一介绍 (一)可见性 volatile的可见性是说共享变量只要修改,就可以被其他线…

Redis自学之路—高级特性(实现消息队列)(七)

目录 简介 Redis的Key和Value的数据结构组织 全局哈希表 渐进式rehash 发布和订阅 操作命令 publish 发布消息 subscribe 订阅消息 psubscribe订阅频道 unsubscribe 取消订阅一个或多个频道 punsubscribe 取消订阅一个或多个模式 查询订阅情况-查看活跃的频道 查询…

Java-09 深入浅出 MyBatis - 注解开发 注解映射 基本介绍 与 一对一模型

点一下关注吧!!!非常感谢!!持续更新!!! 大数据篇正在更新!https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了: MyBatis&#xff…

【k8s】kubelet 的相关证书

在 Kubernetes 集群中,kubelet 使用的证书通常存放在节点上的特定目录。这些证书用于 kubelet 与 API 服务器之间的安全通信。具体的位置可能会根据你的 Kubernetes 安装方式和配置有所不同,下图是我自己环境【通过 kubeadm 安装的集群】中的kubelet的证…

ES语法(一)概括

一、语法 1、请求方式 Elasticsearch&#xff08;ES&#xff09;使用基于 JSON 的查询 DSL&#xff08;领域特定语言&#xff09;来与数据交互。 一个 ElasticSearch 请求和任何 HTTP 请求一样由若干相同的部件组成&#xff1a; curl -X<VERB> <PROTOCOL>://&l…

Redis开发实践

在现代开发中&#xff0c;Redis 已经成为一种重要的高性能内存数据库。无论是作为缓存、消息队列还是排行榜的实现工具&#xff0c;它都表现出了极高的性能和灵活性。本文将带你了解 Redis 的基本概念&#xff0c;并通过 Python 示例代码实现 Redis 的核心功能。 文章目录 1. R…

【el-table】表格后端排序

在需要排序的列添加属性 sortable&#xff0c;后端排序&#xff0c;需将sortable设置为custom 如果需要自定义轮转添加 sort-orders 属性&#xff0c;数组中的元素需为以下三者之一&#xff1a;ascending 表示升序&#xff0c;descending 表示降序&#xff0c;null 表示还原为原…

Linux迁移gitlab容器

Linux迁移gitlab容器并配置 迁移gitlab容器本文分两部分&#xff0c;第一步在新服务器上安装相同版本的gitlab容器&#xff0c;可以在确定gitlab版本之后直接在docker上拉取&#xff0c;我这里直接从原服务器上将镜像打包加载到新服务器上。第二步从原服务器上操作备份文件&am…

3.建立本地仓库及常用命令

1.建立本地仓库 要使用Git对我们的代码进行版本控制&#xff0c;首先需要获得本地仓库 1&#xff09;在电脑的任意位置创建一个空目录&#xff0c;作为我们的本地Git仓库 2&#xff09;进入这个目录&#xff0c;右键点击Git Bash 窗口 3&#xff09;执行命令git init 4) 如果创…

Narya.ai正在寻找iOS工程师!#Mixlab内推

如果你对AI技术和iOS开发充满热情&#xff0c;这里有一个绝佳的机会加入一家专注于AI应用创新的初创公司。Narya.ai正在招聘iOS工程师&#xff0c;帮助他们开发下一代效率工具&#xff0c;旨在提升用户的日常生活效率与幸福感。 关于Narya.ai&#xff1a; 专注于AI应用层创新&a…

AI开发:生成式对抗网络入门 模型训练和图像生成 -Python 机器学习

阶段1&#xff1a;GAN是个啥&#xff1f; 生成式对抗网络&#xff08;Generative Adversarial Networks, GAN&#xff09;&#xff0c;名字听着就有点“对抗”的意思&#xff0c;没错&#xff01;它其实是两个神经网络互相斗智斗勇的游戏&#xff1a; 生成器&#xff08;Gene…

网络安全攻击和防范措施

常见的有四种网络安全攻击方式. 第一种是XSS跨站脚本攻击,往网页中插入恶意脚本代码以攻击用户. 防范措施有三种. 第一种是输入过滤,对用户的所有输入数据进行检测,过滤掉可能导致脚本的字符. 第二种是输出编码,使用工具对用户输入进行编码,使其中可能含有的HTML脚本变成普通…

Redis服务配置文件 redis.conf 更新修改配置参数说明

场景&#xff1a; 在安装redis服务中&#xff0c;默认的配置项通常不能实际使用&#xff0c;需要修改一些配置参数 修改配置参数 1、拿到 redis.cnf 文件&#xff0c;此文件通常在 redis 项目源码的第一级目录下 2、修改配置内容&#xff0c;主要修改项如下 protect…

成功解决logs is not a directory [Op:CreateSummaryFileWriter] name

成功解决logs is not a directory [Op:CreateSummaryFileWriter] name 目录 解决问题 解决思路 解决方法 1、确保日志目录存在 2、权限问题 3、日志路径配置问题 解决问题 tensorflow.python.framework.errors_impl.FailedPreconditionError: {{function_node __wrapped…

数据集增强:提升深度学习模型泛化能力的关键技术

在深度学习中&#xff0c;数据是模型性能的基石。大规模、高质量的数据集通常能显著提高模型的泛化能力&#xff0c;帮助模型在真实场景中做出更准确的预测。然而&#xff0c;在很多实际应用中&#xff0c;数据收集困难、昂贵或者受限&#xff0c;尤其是当数据集相对较小或标注…

039集——渐变色之:CAD中画彩虹()(CAD—C#二次开发入门)

&#xff08;来左边儿 跟我一起画个龙&#xff0c;在你右边儿 画一道彩虹 ~~~~~~~~~~~ &#xff09; 效果如下&#xff1a; 以下展示部分颜色源码&#xff1a; namespace AcTools {public class Class1{public Wform.Timer timer;//定时器需建在类下面public s…

第1章:CSS简介 --[CSS零基础入门]

1. 什么是CSS CSS&#xff08;层叠样式表&#xff0c;Cascading Style Sheets&#xff09;是一种用于描述HTML或XML&#xff08;包括各种XML方言如SVG、XHTML等&#xff09;文档表现的样式语言。CSS的主要目的是将网页的内容与它的表现形式分离&#xff0c;从而使得开发者能够…

Android 中绘制带箭头的线

在 Android 中绘制带箭头的线&#xff0c;可以使用 Canvas 和 Paint 类。以下是一个示例&#xff0c;展示了如何在自定义 View 中绘制一条带有箭头的线。 自定义 View 实现 你可以创建一个自定义的 View&#xff0c;并覆盖其 onDraw() 方法来实现这个功能。 java public clas…

面试题整理(二)

芯冰乐知识星球入口:芯冰乐

JS +CSS @keyframes fadeInUp 来定义载入动画

JSCSS 更完美展现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>跳动加载指示器</title>&l…