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的证…

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

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

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

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

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

阶段1:GAN是个啥? 生成式对抗网络(Generative Adversarial Networks, GAN),名字听着就有点“对抗”的意思,没错!它其实是两个神经网络互相斗智斗勇的游戏: 生成器(Gene…

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

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

C++知识整理day3类与对象(下)——赋值运算符重载、取地址重载、列表初始化、友元、匿名对象、static

文章目录 1.赋值运算符重载1.1 运算符重载1.2 赋值运算符重载 2.取地址重载2.1 const成员函数2.2 取地址运算符重载 3.类与对象的补充3.1 再探构造函数---初始化列表3.2 类型转换3.3 static成员3.4 友元3.5 内部类3.6 匿名对象3.7 对象拷贝时的编译器优化 1.赋值运算符重载 赋…

web vue 滑动选择 n宫格选中 九宫格选中

页面动态布局经常性要交给客户来操作,他们按时他们的习惯在同一个屏幕内显示若干个子视图,尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。 来看看如下的用户体验: 设计为最多支持5行6列页面展示后,右侧的布局则动…

解决idea使用maven打包时无法将本地lib库文件和resource目录中的资源文件打包进jar文件的问题!!!

一、问题复现 1)项目结构如下 我们看到项目中手动添加了本地lib资源,同时bootspring的配置文件和mapper文件也放在了resouces目录中。 2)上述结构的项目在使用maven打包时,最终生成的jar文件中将不包含lib库文件,甚…

【短视频矩阵系统==saas技术开发】

在数字媒体领域,短视频的崛起已不可忽视。对于商业实体而言,掌握如何通过短视频平台有效吸引潜在客户并提高转化率,已成为一项关键课题。本文旨在深入剖析短视频矩阵系统的构成与作用机制,以期为企业提供一套系统化的策略&#xf…

C_字符串的一些函数

1.字符串输入函数 scanf("%s",数组名)&#xff1b; gets(数组名)&#xff1b; 区别&#xff1a; scanf(“%s”,数组名); 把空格识别为输入结束 #include <stdio.h>int main() {char a[10];printf("输入&#xff1a;");scanf("%s",a)…

JavaScript实现tab栏切换

JavaScript实现tab栏切换 代码功能概述 这段代码实现了一个简单的选项卡&#xff08;Tab&#xff09;切换功能。它通过操作 HTML 元素的类名&#xff08;class&#xff09;来控制哪些选项卡&#xff08;Tab&#xff09;和对应的内容板块显示&#xff0c;哪些隐藏。基本思路是先…

《网络聊天室项目:全面分析测试报告》

目录 一、项目介绍二、项目功能三、测试计划1. 编写测试用例2. 实际执行测试的部分操作步骤3. 自动化测试 四、项目bug&#xff08;1&#xff09;bug描述&#xff08;2&#xff09;bug描述 五、项目总结 一、项目介绍 网络聊天室项目实现了一个网络交流平台&#xff0c;用户在w…

大数据新视界 -- 大数据大厂之 Hive 数据压缩:优化存储与传输的关键(上)(19/ 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

软通动力携子公司鸿湖万联、软通教育助阵首届鸿蒙生态大会成功举办

11月23日中国深圳&#xff0c;首届鸿蒙生态大会上&#xff0c;软通动力及软通动力子公司鸿湖万联作为全球智慧物联网联盟&#xff08;GIIC&#xff09;理事单位、鸿蒙生态服务&#xff08;深圳&#xff09;有限公司战略合作伙伴&#xff0c;联合软通教育深度参与了大会多项重磅…

动手学深度学习10.5. 多头注意力-笔记练习(PyTorch)

本节课程地址&#xff1a;多头注意力代码_哔哩哔哩_bilibili 本节教材地址&#xff1a;10.5. 多头注意力 — 动手学深度学习 2.0.0 documentation 本节开源代码&#xff1a;...>d2l-zh>pytorch>chapter_multilayer-perceptrons>multihead-attention.ipynb 多头注…

故障诊断 | Transformer-LSTM组合模型的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | Transformer-LSTM组合模型的故障诊断(Matlab) 源码设计 %% 初始化 clear close all clc disp(此程序务必用2023b及其以上版本的MATLAB!否则会报错!) warning off %

用html+jq实现元素的拖动效果——js基础积累

用htmljq实现元素的拖动效果 效果图如下&#xff1a; 将【item10】拖动到【item1】前面 直接上代码&#xff1a; html部分 <ul id"sortableList"><li id"item1" class"w1" draggable"true">Item 1</li><li …