俺们公司之前有个自创的所谓前端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,2
let 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_FORWARD
normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif
czm_materialInput materialInput;
materialInput.normalEC = normalEC;
materialInput.positionToEyeEC = positionToEyeEC;
materialInput.st = v_st;
czm_material material = getMaterial(materialInput);
#ifdef FLAT
gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
#else
gl_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;
}
三、成果
