cesium画流动箭头线
时间: 2023-09-19 18:06:22 浏览: 370
Cesium实现线条流动效果.rar
3星 · 编辑精心推荐
要在cesium中绘制流动箭头线,可以使用Cesium的PolylineGlowMaterial材质和Primitive类型。以下是一个示例代码:
```javascript
// 创建流动箭头线的起点和终点
var start = Cesium.Cartesian3.fromDegrees(-75.0, 40.0);
var end = Cesium.Cartesian3.fromDegrees(-125.0, 35.0);
// 计算两点之间的距离
var distance = Cesium.Cartesian3.distance(start, end);
// 创建流动箭头线的坐标数组
var positions = [start, end];
// 创建流动箭头线的颜色
var color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
// 计算流动箭头线的方向和长度
var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()), new Cesium.Cartesian3());
var length = distance / 10.0;
// 创建流动箭头线的箭头部分的坐标
var arrowEnd = Cesium.Cartesian3.add(start, Cesium.Cartesian3.multiplyByScalar(direction, length, new Cesium.Cartesian3()), new Cesium.Cartesian3());
var arrowLeft = Cesium.Cartesian3.add(arrowEnd, Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.normalize(Cesium.Cartesian3.cross(direction, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()), new Cesium.Cartesian3()), length / 3.0, new Cesium.Cartesian3()), new Cesium.Cartesian3());
var arrowRight = Cesium.Cartesian3.add(arrowEnd, Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.normalize(Cesium.Cartesian3.cross(Cesium.Cartesian3.negate(direction), Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()), new Cesium.Cartesian3()), length / 3.0, new Cesium.Cartesian3()), new Cesium.Cartesian3());
// 创建流动箭头线的坐标数组
var arrowPositions = [arrowEnd, arrowLeft, arrowRight, arrowEnd];
// 创建流动箭头线的几何体
var geometry = new Cesium.PolylineGeometry({
positions: positions,
width: 10.0,
vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL
});
// 创建流动箭头线的材质
var material = new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.2,
color: color
});
// 创建流动箭头线的Primitive
var primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(color)
},
id: 'line'
}),
appearance: new Cesium.PolylineMaterialAppearance({
material: material
}),
show: true
});
// 将流动箭头线添加到场景中
viewer.scene.primitives.add(primitive);
```
这段代码创建了一个从(-75.0,40.0)到(-125.0,35.0)的流动箭头线,并将其添加到Cesium场景中。箭头线的颜色为红色,宽度为10.0。箭头部分的长度是线段总长度的1/10,箭头部分的左右两侧各为长度的1/3。箭头线的材质为PolylineGlowMaterial,使其在场景中呈现出流动的效果。
阅读全文