PrimitiveUtil.js代码
class PrimitiveUtil {
//画点(componentsPerPositionAttribute必须为3)
static addPrimitivePoints(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
for (let i = 0; i < pointNum; i++) {
indicesTesm.push(i);
}
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.POINTS, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
});
return viewer.scene.primitives.add(primitive);
}
//画线(每2个顶点相连组成一条线)
static addPrimitiveLines(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
for (let i = 0; i < pointNum; i++) {
indicesTesm.push(i);
}
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.LINES, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
})
return viewer.scene.primitives.add(primitive);
}
//画线(所有的顶点前后相连组成一条线)
static addPrimitiveLinesStrip(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
for (let i = 0; i < pointNum; i++) {
indicesTesm.push(i);
}
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.LINE_STRIP, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
})
return viewer.scene.primitives.add(primitive);
}
//画线(所有的顶点前后相连组成一条闭合的线)
static addPrimitiveLinesLoop(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
for (let i = 0; i < pointNum; i++) {
indicesTesm.push(i);
}
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.LINE_LOOP, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
})
return viewer.scene.primitives.add(primitive);
}
//画三角形(每3个顶点相连组成一个三角形)
static addPrimitiveTriangles(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
for (let i = 0; i < pointNum; i++) {
indicesTesm.push(i);
}
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.TRIANGLES, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
})
return viewer.scene.primitives.add(primitive);
}
//画三角形(每个顶点和前面的一个顶点,第一个顶点相连组成一个三角形)
static addPrimitiveTrianglesFan(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
// let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
// for (let i = 2; i < pointNum; i++) {
// indicesTesm.push(0);
// indicesTesm.push(i-1);
// indicesTesm.push(i);
// }
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.TRIANGLE_FAN, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
})
return viewer.scene.primitives.add(primitive);
}
//画三角形(每个顶点和前面的两个顶点相连组成一个三角形)
static addPrimitiveTrianglesStrip(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
let vertexShader = this.prototype.getVS();
let fragmentShader = this.prototype.getFS();
//顶点索引（坐标点下标的连接顺序）
let indicesTesm = [];
// let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
// for (let i = 2; i < pointNum; i++) {
// indicesTesm.push(i-2);
// indicesTesm.push(i-1);
// indicesTesm.push(i);
// }
let positionArr = new Float64Array(pointPositionArr);
let colorArr = new Float32Array(pointColorArr);
let indiceArr = new Uint32Array(indicesTesm);
let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.TRIANGLE_STRIP, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
let primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
appearance: appearance
})
return viewer.scene.primitives.add(primitive);
}
//创建Geometry
createGeometry(primitiveType, positions, componentsPerPositionAttribute, colors, componentsPerColorAttribute, indices) {
return new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: componentsPerPositionAttribute,
values: positions
}),
color: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: componentsPerColorAttribute,
values: colors
})
},
indices: indices,
primitiveType: primitiveType,
boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});
}
//创建Appearence
createAppearence(fs, vs) {
return new Cesium.Appearance({
renderState: {
blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
depthTest: {
enabled: true
},
depthMask: true
},
fragmentShaderSource: fs,
vertexShaderSource: vs
});
}
//顶点着色器源码
getVS() {
return "attribute vec3 position3DHigh;\
attribute vec3 position3DLow;\
attribute vec4 color;\
varying vec4 v_color;\
attribute float batchId;\
void main()\
{\
vec4 p = czm_computePosition();\
v_color = color;\
p = czm_modelViewProjectionRelativeToEye * p;\
gl_Position = p;\
gl_PointSize = 10.0;\
}\
";
}
//片源着色器源码
getFS() {
return "varying vec4 v_color;\
void main()\
{\
float d = distance(gl_PointCoord, vec2(0.5,0.5));\
if(d < 0.5){\
gl_FragColor = v_color;\
}else{\
discard;\
}\
}\
";
}
}
export default PrimitiveUtil
测试代码
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import CesiumUtil from '../../public/js/CesiumUtil.js'
export default {
name: 'CesiumViewer',
components: {},
data() {
return {
viewerFlag: false,
maxR: 100000,
r1: 0,
leftDownFlag: false,
pointDraged: null
}
},
mounted() {
let _this = this;
let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
window.viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
shouldAnimate: true,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
infoBox: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
})
});
window.viewer.scene.debugShowFramesPerSecond = true;
let p1 = Cesium.Cartesian3.fromDegrees(115.0, 37.0, 0);
let p2 = Cesium.Cartesian3.fromDegrees(120.0, 37.0, 0);
let p3 = Cesium.Cartesian3.fromDegrees(120.0, 40.0, 0);
let p4 = Cesium.Cartesian3.fromDegrees(119.0, 42.0, 0);
let pointArr2 = [p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p4.x, p4.y, p4.z];
let colorArr = [1.0, 0.0, 0.0, 0.5,
0.0, 1.0, 0.0, 0.5,
0.0, 0.0, 1.0, 0.5,
1.0, 1.0, 0.0, 0.5
];
let pPrimitives = CesiumUtil.primitive.addPrimitivePoints(window.viewer, pointArr2, 3, colorArr, 4);
// let lPrimitives1 = CesiumUtil.primitive.addPrimitiveLines(window.viewer, pointArr2, 3, colorArr, 4);
// let lPrimitives2 = CesiumUtil.primitive.addPrimitiveLinesStrip(window.viewer, pointArr2, 3, colorArr, 4);
// let lPrimitives3 = CesiumUtil.primitive.addPrimitiveLinesLoop(window.viewer, pointArr2, 3, colorArr, 4);
// let tPrimitives1 = CesiumUtil.primitive.addPrimitiveTriangles(window.viewer, pointArr2, 3, colorArr, 4);
// let tPrimitives2 = CesiumUtil.primitive.addPrimitiveTrianglesFan(window.viewer, pointArr2, 3, colorArr, 4);
// let tPrimitives3 = CesiumUtil.primitive.addPrimitiveTrianglesStrip(window.viewer, pointArr2, 3, colorArr, 4);
},
methods: {
}
}
</script>
<style scoped>
#cesiumContainer {
position: absolute;
width: 100%;
height: 100%;
}
</style>
效果
image.png
image.png
image.png
image.png
image.png
image.png
image.png
