cesium添加点、线、面有两种方式,一种是Entity方式,另一种是Primitive。
相对于Entity,使用Primitive具有以下优势:
(1)性能:绘制大量Primitive时,可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行,以保持UI响应性;
(2)灵活性:Geometry与Appearance 解耦,两者可以分别进行修改;
(3)低级别访问:易于编写GLSL顶点、片段着色器、使用自定义的渲染状态 。
同时,也具有以下劣势:
(1)需要编写更多的代码,并且对图形编程有更深刻的理解,尤其是OpenGL知识;
(2)需要对组合几何形状对于静态数据有效,而对于动态数据则不一定有效。
需求:添加点、线。点击地图会消失,点击点会出现
效果:
代码如下:这里this.map是我实例化传入进来的,你可以使用viewer代替。
this.polyline_sate = []
this.polyline_sate.push(pick.id.lon)
this.polyline_sate.push(pick.id.lat)
this.polyline_sate.push(20000)
this.polyline_sate.push(pick.id.truthLon)
this.polyline_sate.push(pick.id.truthLat)
this.polyline_sate.push(20000)
this.polyline_sate.push(pick.id.lon)
this.polyline_sate.push(pick.id.lat)
this.polyline_sate.push(20000)
this.polyline_sate.push(pick.id.secondLon)
this.polyline_sate.push(pick.id.secondLat)
this.polyline_sate.push(20000)
this.drawline(pick.id)
// 使用primitive 画线
drawline(val) {
if (this.polyline_sate.length >= 2) {
this.lineDataSource.add({
// Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2])
// 如果有高度,上面的 this.polyline_sate 里面要增加高度的
positions: new Cesium.Cartesian3.fromDegreesArrayHeights(this.polyline_sate),
// 宽度
width: 2,
material: Cesium.Material.fromType('Color', {
color: Cesium.Color.fromCssColorString('#0ABD73FF'),
}),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
clampToGround: false,
// 线的颜色
})
this.drawLabel(val)
this.addsate(val)
} else {
this.lineDataSource.removeAll()
this.labels.removeAll()
this.satebillboards.removeAll()
}
}
// 使用entities画线
newdrawline() {
if (this.polyline_sate.length >= 2) {
this.lineDataSource.entities.add({
name: 'line',
polyline: {
positions: new Cesium.Cartesian3.fromDegreesArrayHeights(this.polyline_sate),
width: 2,
material: Cesium.Color.fromCssColorString('#0ABD73FF'),
clampToGround: false,
},
})
this.drawLabel()
} else {
this.lineDataSource.entities.removeAll()
}
}
// 标注
drawLabel(val) {
this.labels.add({
position: Cesium.Cartesian3.fromDegreesArrayHeights([(val.lon + val.truthLon) / 2,(val.lat + val.truthLat) / 2,20000])[0],
text: (Number(val.distanceMinGrad)*1000).toFixed(2)+'KM',
font: '16px sans-serif',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
});
this.labels.add({
position: Cesium.Cartesian3.fromDegreesArrayHeights([(val.lon + val.secondLon) / 2,(val.lat + val.secondLat) / 2,20000])[0],
text: (Number(val.distanceMinGt)*1000).toFixed(2)+'KM',
font: '16px sans-serif',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
});
}
// 添加点
addsate(item) {
const truh=_.cloneDeep(item)
truh.shownewtooltip='truh'
this.satebillboards.add({
position: Cesium.Cartesian3.fromDegrees(item.truthLon, item.truthLat, 20000),
image: 'img/sate/red.png',
// color: Cesium.Color.fromCssColorString(),
// rotation: deg2rad(item.angle),
scale: 0.5,
id: truh,
// height: 10,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
//用来展示哪种弹窗
})
const second=_.cloneDeep(item)
second.shownewtooltip='second'
this.satebillboards.add({
position: Cesium.Cartesian3.fromDegrees(item.secondLon, item.secondLat, 20000),
image: 'img/sate/blue.png',
// color: Cesium.Color.fromCssColorString(),
// rotation: deg2rad(item.angle),
scale: 0.5,
id: second,
// height: 10,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
//用来展示哪种弹窗
})
}