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,一经查实,立即删除!

相关文章

Vue3学习日记(day4)

响应式状态&#xff08;Vue3&#xff09; methods 对于DOM的更新详解 防抖函数 少量&#xff0c;单组件 多组件 计算属性 可写计算属性 我们继续来对后续的文档进行探究。 响应式状态&#xff08;Vue3&#xff09; 响应式状态在vue3进行了修改。 在选项式API中仍然为在…

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

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

Ubuntu18.04操作系统使用pip3安装open cv

在Ubuntu18.04操作系统环境下使用pip3安装opencv。安装方法如下&#xff1a; #pip3安装 sudo apt-get install python3-pip # 依赖包安装 sudo apt-get install libsm6 libxrender1 libxext6 #opencv安装;版本号自行填写 pip3 install opencv-python4.1.1.26 具体步骤 1、确认…

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

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

C# 判定字符串是否为数字的方法

方法一、使用decimal的TryParse方法 该方法只有当字符串是数字的时候&#xff0c;才能将字符串转换为数字并且返回结果true&#xff0c;否则将字符串转换为0并且返回结果false。 此方法特别适用于字符串不是数字&#xff0c;防止转换过程中出现异常的情况&#xff0c;如果字符…

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

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

代码随想录算法训练营第四十一天 | 01背包理论基础、416. 分割等和子集

01背包理论基础 题目链接&#xff1a;https://kamacoder.com/problempage.php?pid1046 文档讲解&#xff1a;01背包理论基础&#xff08;一&#xff09;、01背包理论基础&#xff08;二&#xff09; 视频讲解&#xff1a;01背包理论基础&#xff08;一&#xff09;、01背包理论…

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介绍与…

使用微信小程序制作画布

在这个技术飞速发展的时代&#xff0c;微信小程序已经成为了人们生活中不可或缺的一部分。它们可以为用户提供各种各样的功能和娱乐&#xff0c;其中之一就是制作画布。在本文中&#xff0c;我们将介绍如何使用微信小程序创建一个简单的画布应用&#xff0c;并为你展示如何实现…

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;高…

NumPy 双曲函数与集合操作详解

NumPy 双曲函数 NumPy 提供了 sinh()、cosh() 和 tanh() 等 ufunc&#xff0c;它们接受弧度值并生成相应的双曲正弦、双曲余弦和双曲正切值。 示例&#xff1a; import numpy as npx np.sinh(np.pi/2)print(x)示例 找到数组 arr 中所有值的双曲余弦值&#xff1a; import…

基于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…

MongoDB 正则表达式

MongoDB 正则表达式 MongoDB 是一个流行的 NoSQL 数据库&#xff0c;它提供了强大的查询功能&#xff0c;包括对正则表达式的支持。正则表达式是一种强大的文本搜索工具&#xff0c;它允许用户根据特定的模式匹配和搜索字符串。在 MongoDB 中&#xff0c;正则表达式可以用于查…

异常处理总结

自定义异常 ​ 系统中的异常可以分为我们能预知的异常和未知的系统异常&#xff0c;对于我们能预知的异常如空值判断&#xff0c;用户名错误&#xff0c;密码错误等异常我们需要返回客户端&#xff0c;对于系统内部异常如SQL语法错误&#xff0c;参数格式转换错误等需要统一包…

MySQL之复制(三)

复制 从另一个服务器开始复制 前面的设置都是嘉定主备库均为刚刚安装好且都是默认的数据&#xff0c;也就是说两台服务器上数据相同&#xff0c;并且知道当前主库的二进制日志。这不是典型的案例&#xff0c;大多数情况下有一个已经运行了一段时间的主库&#xff0c;然后用一…