在进入绘制前,必须熟悉cesuim基础知识
1、实现样式
2、实现方法(只贴部分代码)
let dayMaximumHeight;
let PolyLinePrimitive = function () { //创建线方法
function _(points, bol) {
if (viewModel.lineValue !== 'Wall') {
this.options = {
name: '直线',
polyline: {
zIndex: 15,
maximumHeights: new Array(points.length).fill(1000),
minimumHeights: new Array(points.length).fill(0),
show: true,
positions: [],
clampToGround: true,//是否贴地
material: lineType(viewModel),
// material: Cesium.Material.fromType('Wallfloater'),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
width: 5,
}
};
} else {
this.options = {
name: '墙',
wall: {
positions: [],
material: new Cesium.ColorMaterialProperty(
new Cesium.CallbackProperty(function () {
let color = Cesium.Color.fromCssColorString(viewModel.colorPink1)
return color;
}, false)),//Cesium.Color.BLUE.withAlpha(0.2)
outline: true,
outlineColor: Cesium.Color.BLACK,
minimumHeights: new Cesium.CallbackProperty(e => {
// return [0,0,0,0];
return new Array(points.length + 1).fill(0)
}, false),
maximumHeights: new Cesium.CallbackProperty(e => {
// return [100,100,100,100]
if (viewModel.animationShow) {//动画控制
for (let i = 0; i < dayMaximumHeight.length; i++) {
dayMaximumHeight[i] += 500 * 0.001 * viewModel.wallSpeed;//[5,10,15,20]
if (dayMaximumHeight[i] > viewModel.QTheight) {
dayMaximumHeight[i] = 0;
}
}
return dayMaximumHeight;
} else {
return new Array(points.length+1).fill(viewModel.QTheight);//墙体高度控制
}
//return new Array(points.length + 1).fill(100)
}, false),
}
}
}
if (points.length && bol) {
points.push(points[0])
}
this.positions = points
this._init();
}
_.prototype._init = function () {
var _self = this;
var _update = function () {
let newArr = [..._self.positions]
let arr = []
if (newArr.length > 2) {
newArr.push(newArr[0])
}
if (viewModel.lineValue !== 'Wall') {
return newArr
} else {
newArr.forEach((item) => {
let cartographic = ellipsoid.cartesianToCartographic(item);
let lon = Cesium.Math.toDegrees(cartographic.longitude) ;
let lat = Cesium.Math.toDegrees(cartographic.latitude);
arr.push(lon)
arr.push(lat)
arr.push(0)
})
return Cesium.Cartesian3.fromDegreesArrayHeights(arr)
}
};
// 实时更新polyline.positions
if (viewModel.lineValue !== 'Wall') {
this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
} else {
this.options.wall.positions = new Cesium.CallbackProperty(_update, false);
}
viewer.entities.add(this.options);
};
return _;
}();