cesium按照参数绘制不同形状的船舶

俺们公司之前有个自创的所谓前端GIS框架,是用Cesium搞的。我对该框架不熟悉,用它在地图上作画,画船舶符号,看以前的代码,感觉十分艰深晦涩,什么材质、纹理,令人头大如斗。我4年前用过一阵Cesium,后来荒废了,到现在已经完全失忆。

一、不知道怎么判断船舶类型

最难点在于,原先的代码,不知道是怎么判断船舶类型,因而画相应的形状的。比如说我们有一个变量type,0代表渔船,1代表货船,2代表海盗船。按照一般思维,就是我判断这个type,是1就怎么怎么画,2就如何如何涂。但是,在我们那个框架代码里,这个type传着传着,就不知道变成啥样了,像这样

在这里插入图片描述
在这里插入图片描述
这个 i_type 貌似就是我们想用于判断船舶类型的type,但由于Cesium作画独树一帜,我们当初设好的type,命名是个整数,到了这里就变成这个鬼样子,是个奇怪的小数,似乎是256种颜色的等分的其中之一。如上图所示,根本就没办法判断类型,也不知道这个小数是怎么来的。

这里面的对象关联很复杂,我试着描述一下:

const targetPrimitiveCollection: Cesium.PrimitiveCollection = props.context.scene.primitives.add(new Cesium.PrimitiveCollection());let shipGeometryInstances = [];
shipGeometryInstances.push(new Cesium.GeometryInstance({。。。type:。。。{value: [type]}
}));
targetPrimitiveCollection.add(ShipPrimitive(。。。, shipGeometryInstances));

而上面说的判断type类型的方法

czm_material czm_getMaterial(czm_materialInput materialInput, vec4 i_color, vec4 i_outColor, float i_type){}

是ShipPrimitive()内的某个着色器定义里的方法。晕吧?

二、努力判断船舶类型

可以说,不能判断船舶类型,绘制不同形状就无从谈起。必须能判断。由于我基本靠AI指导才调试成功,而还没有完全理解,只能贴代码,而说不出一个子丑寅卯。
在这里插入图片描述

import image1 from '@/assets/target_icon/渔船.png'
import image2 from '@/assets/target_icon/货船.png';
import image3 from '@/assets/target_icon/海盗船.png';const image01 = new Image();
image01.src = image1;
const image02 = new Image();
image02.src = image2;
const image03 = new Image();
image03.src = image3;let uniforms = {image1: image1,//三角形image2: image2, //圆形image3: image3 //三角形 + 圆形
};const targetPrimitiveCollection: Cesium.PrimitiveCollection = props.context.scene.primitives.add(new Cesium.PrimitiveCollection());let type = 。。。//得到0,1,2let shipGeometryInstances = [];
shipGeometryInstances.push(new Cesium.GeometryInstance({id: 。。。,geometry: 。。。,modelMatrix: 。。。,attributes: {type: new Cesium.GeometryInstanceAttribute({componentDatatype: Cesium.ComponentDatatype.FLOAT,componentsPerAttribute: 1,value: [type]}),outWidth: 。。。,color: 。。。,outColor: 。。。},
}));targetPrimitiveCollection.add(ShipPrimitive(uniforms, shipGeometryInstances));const ShipPrimitive = (uniforms: any = {}, shipGeometryInstances: Cesium.GeometryInstance[]) => {/*** fragmentShaderSource属性在Cesium的MaterialAppearance或WebGL编程中起到了核心作用,* 它定义了片段着色器(Fragment Shader)的源代码。片段着色器是图形管线中的一个关键阶段,* 负责计算场景中每个像素的最终颜色。** 顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)是图形渲染管线中的两个核心着色器阶段** 先顶点后片段*///片段着色器const fragmentShaderSource = `varying vec4 v_color;varying vec4 v_outColor;varying vec3 v_positionEC;varying vec3 v_normalEC;varying vec2 v_outWidth;varying vec2 v_st;varying float v_type;uniform sampler2D image1; // 第一个纹理uniform sampler2D image2; // 第二个纹理uniform sampler2D image3; // czm_material getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);materialInput.st.t = 1.0 - materialInput.st.t; //将图片坐标轴调整成和纹理坐标轴一致vec4 textureValue;vec4 i_color = v_color;if (v_type == 2.0) {//海盗船textureValue = texture2D(image3, materialInput.st);i_color.rgb = textureValue.rgb;//颜色来自图片} else if (v_type == 1.0) {//货船textureValue = texture2D(image2, materialInput.st);i_color.rgb = textureValue.rgb;//颜色来自图片} else{//渔船textureValue = texture2D(image1, materialInput.st);i_color.rgb = textureValue.rgb;}i_color.a = i_color.a * textureValue.a;//颜色相与material.diffuse = i_color.rgb;material.alpha = i_color.a;        return material;}void main() {vec3 positionToEyeEC = -v_positionEC;vec3 normalEC = normalize(v_normalEC);#ifdef FACE_FORWARDnormalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);#endifczm_materialInput materialInput;materialInput.normalEC = normalEC;materialInput.positionToEyeEC = positionToEyeEC;materialInput.st = v_st;czm_material material = getMaterial(materialInput);#ifdef FLATgl_FragColor = vec4(material.diffuse + material.emission, material.alpha);#elsegl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);#endif}`;//顶点着色器const vertexShaderSource = `attribute vec3 position3DHigh;attribute vec3 position3DLow;attribute vec3 normal;attribute vec2 st;attribute float batchId;varying vec4 v_color;varying vec4 v_outColor;varying vec3 v_positionEC;varying vec3 v_normalEC;varying vec2 v_outWidth;varying vec2 v_st;varying float v_type;void main() {vec4 p = czm_computePosition();v_positionEC = (czm_modelViewRelativeToEye * p).xyz;v_normalEC = czm_normal * normal;v_st = st;v_outWidth = czm_batchTable_outWidth(batchId);v_color = czm_batchTable_color(batchId);v_outColor = czm_batchTable_outColor(batchId);v_type = czm_batchTable_type(batchId);vec4 positionPC = czm_modelViewProjectionRelativeToEye * p;gl_Position = positionPC;}`;let shipPrimitive = new Cesium.Primitive({asynchronous: false,geometryInstances: shipGeometryInstances,appearance: new Cesium.MaterialAppearance({flat: true,material: new Cesium.Material({fabric: {type: "image2D",uniforms: uniforms,//source: imageSource,// <------- //-------------修改关键点,上面说的方法czm_getMaterial()就定义在imageSource里面},}),vertexShaderSource: vertexShaderSource,fragmentShaderSource: fragmentShaderSource,})});let fps = 5;let oldUpdate = shipPrimitive.update;shipPrimitive.update = function (frameState: { context: any; }) {oldUpdate.call(this, frameState);if (this._colorCommands[0] && fps > 0) {fps--;let uniformMap = this._colorCommands[0].uniformMap;uniformMap.image1 = function () {return new Cesium.Texture({//渔船,绿底圆形context: frameState.context,source: image01,sampler: new Cesium.Sampler()});}uniformMap.image2 = function () {//货船,绿底三角形return new Cesium.Texture({context: frameState.context,source: image02,sampler: new Cesium.Sampler()});}uniformMap.image3 = function () {//海盗船,绿底三角形 + 白底圆形return new Cesium.Texture({context: frameState.context,source: image03,sampler: new Cesium.Sampler()});}}}return shipPrimitive;
}

三、成果

在这里插入图片描述

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

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

相关文章

ClickHouse 高性能的列式数据库管理系统

ClickHouse是一个高性能的列式数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;主要用于在线分析处理查询&#xff08;OLAP&#xff09;。以下是对ClickHouse的详细介绍&#xff1a; 基本信息&#xff1a; 来源&#xff1a;由俄罗斯的Yandex公司于2016年开源。全称&…

成都晨持绪科技:2024年抖音网店做起来难吗

随着抖音平台的日益火爆&#xff0c;越来越多的商家和个人开始关注并尝试开设自己的抖音网店。然而&#xff0c;面对激烈的市场竞争和不断变化的平台规则&#xff0c;许多人都在问&#xff1a;2024年抖音网店做起来难吗? 要回答这个问题&#xff0c;我们首先需要了解抖音网店的…

【机器学习】第3章 K-近邻算法

一、概念 1.K-近邻算法&#xff1a;也叫KNN 分类 算法&#xff0c;其中的N是 邻近邻居NearestNeighbor的首字母。 &#xff08;1&#xff09;其中K是特征值&#xff0c;就是选择离某个预测的值&#xff08;例如预测的是苹果&#xff0c;就找个苹果&#xff09;最近的几个值&am…

Javaweb07-JavaBean技术和Jsp开发模式

JavaBean技术和Jsp开发模式 一.JavaBean技术 1.JavaBean的基本概念 **JavaBean组件&#xff1a;**与html分离且使用Java代码封装类 **JavaBean分类&#xff1a;**可视化JavaBean&#xff1a;swing 非可视化JavaBean&#xff1a;用于封装实体和业务逻辑 JavaBean特点&#x…

把Vue文件转至树莓派上遇到的问题和解决方案

把整个文件夹复制进树莓派后&#xff0c;运行 npm run dev ,报错sh: 1: vite: Permission denied 解决方案&#xff1a;删除项目里的 node_modules 重新 npm install 再运行即可 rm -rf node_modules/ npm install 在安装过程中&#xff0c;遇到下图问题&#xff0c;vulnerabi…

【热门开源项目推荐】满足不同程序员的需求与关注点

目录 前言一、热门开源项目介绍二、使用开源热门项目的优势&#xff08;一&#xff09;经济方面&#xff08;二&#xff09;技术方面&#xff08;三&#xff09;社区支持及协作方面 三、程序员选择项目模型建议&#xff08;一&#xff09;关键步骤&#xff08;二&#xff09;示…

掌握rpc、grpc并探究内在本质

文章目录 rpc是什么&#xff1f;又如何实现服务通信&#xff1f;理解rpcRPC的通信过程通信协议的选择小结RPC VS Restful net_rpc实践案例net/rpc包介绍创建服务端创建client 看看net_rpc的通信调度实现的内部原理明确目标基于自己实现的角度分析我会怎么做代码分析 grpc介绍与…

c++实现二叉搜索树(下)

好久不见啊&#xff0c;baby们&#xff0c;小吉我又回归了&#xff0c;发完这一篇小吉将会有两周时间不会更新blog了&#xff08;sorry&#xff09;&#xff0c;在小吉没有发blog的日子里大家也要好好学习数据结构与算法哦&#xff0c;还有就是别忘了小吉我❤️  这篇博客是二…

充电学习—7、BC1.2 PD协议

BC1.2&#xff08;battery charging&#xff09;充电端口识别机制&#xff1a; SDP、CDP、DCP 1、VBUS detect&#xff1a;vbus检测 PD&#xff08;portable device&#xff0c;便携式设备&#xff09;中有个检测VBUS是否有效的电路&#xff0c;电路有个参考值&#xff0c;高…

基于CNN的掩码自编码器微调用于分类任务

开源仓库 JJLi0427/CNN_Masked_Autoencoder: Design a patches masked autoencoder by CNN (github.com)https://github.com/JJLi0427/CNN_Masked_Autoencoder CNN自编码器 前面的文章中我们模仿MAE的思路用CNN做了一个掩码自编码器 动手小实验&#xff0c;用CNN来构建Mase…

python学习笔记-07

python内置函数 内置函数就是python自带的函数&#xff0c;不需要我们再去定义的&#xff0c;如print等直接使用即可&#xff0c;内置函数官方文档&#xff1a;官链。 1.数学运算 #数学运算&#xff1a; print(------abs()是绝对值函数------) a-1.1 print({}的绝对值是{}.fo…

QT day04

一、思维导图 二、登录界面优化 代码&#xff1a; 界面&#xff1a; *{background-color: rgb(255, 255, 255); }QFrame#frame{border-image: url(:/Logo/shanChuan.jpg);border-radius:15px; }#frame_2{background-color: rgba(110, 110, 110, 120);border-radius:15px; }Q…

使用芯片为ZYNQ—7020,基于野火FPGA ZYNQ开发板

使用芯片为ZYNQ—7020&#xff0c;基于野火FPGA ZYNQ开发板 肤色模型简介 YCrCb也称为YUV&#xff0c;主要用于优化彩色视频信号的传输。与RGB视频信号传输相比&#xff0c;它最大的优点在于只需占用极少的频宽&#xff08;RGB要求三个独立的视频信号同时传输&#xff09;。其…

国内如何高速下载hugginging face模型

国内如何高速下载hugginging face模型 背景 如今开源大模型很多&#xff0c;相较于线上的调用接口&#xff0c;本地部署更有吸引力。这就免不了需要去Huggingface上下载模型&#xff0c;但因为国内管制要求&#xff0c;huggingface 并不能直接访问&#xff0c;或者下载速度很…

统计学一(术语,正态)

目录 一&#xff0c;常用术语 二&#xff0c;正态分布&#xff08;Normal Distribution&#xff09; 三&#xff0c;中心极限定理(Central Limit Theorem) 一&#xff0c;常用术语 population(族群)&#xff1a;要统计的总的 populationSize(族群数量)&#xff1a;要统计的总…

使用高斯混合模型(GMM)进行猫狗音频聚类(Kaggle Audio Cats and Dogs)

Audio Cats and Dogs | Kaggle 目录 一、实验目标 二、数据分析 三、实验结果 四、改进方向 一、实验目标 数据集包括164个标注为猫的.wav文件&#xff0c;总共1323秒和113个标注为狗叫声的.wav文件&#xff0c;总共598秒&#xff0c;要求判别每个音频是狗叫还是猫叫 二、…

反激开关电源保险丝以及热敏电阻的选型

保险丝&#xff08;2A/250V&#xff09; 保险丝的选型及计算 1、保险丝的作用就是在电路出现故障造成过流甚至短路时能及时切断电路电源的联系。&#xff08; 保护后 级电路&#xff0c;一旦出现故障&#xff0c;由于电流过大温度过高&#xff0c;保险丝熔断 &#xff09; 2、…

6月18日 Qtday4

作业day4.1 作业4.2

SpringBoot快速入门-上

Apache Tomcat Apache Tomcat是一个开源的Servlet 或 web容器&#xff0c;它实现了Java Servlet、JavaServer Pages (JSP)、Java Unified Expression Language (JUEL) 和 Java WebSocket 规范。 使用 官网下载 安装:绿色版 , 直接解压 卸载:直接删除目录 改编码: # conf/l…

多路h265监控录放开发-(1)建立head窗口并实现鼠标拖动整个窗口

头文件&#xff1a; //鼠标事件 用于拖动窗口//一下三个函数都是QWidget的可重载成员函数void mouseMoveEvent(QMouseEvent* ev) override;void mousePressEvent(QMouseEvent* ev) override;void mouseReleaseEvent(QMouseEvent* ev) override; 源文件&#xff1a; / /// 鼠标…