# 基础知识
Viewer
他就是我们初始化地图的时候用到一个API,他也就是梦开始的地方,地图初始我们在之前的操作中把他的状态进行啦提升放在啦data函数中.
官网描述 (opens new window):用于构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合到一个可重用的包中。小部件总是可以通过使用 mixins 来扩展,它添加了对各种应用程序有用的功能。
也就是这个样子
this.viewer = new Cesium.Viewer('DOM元素或者盒子的ID',{'配置小部件'})
# 点位起飞
API:viewer (opens new window)和Cartesian3 (opens new window)
在添加点位的时候this.viewer.entities.add
方法中设置他position
改为Cesium.Cartesian3.fromDegrees(pointObj.longitude * 1, pointObj.latitude * 1,100)
100椭圆体上方的高度,以米为单位
// cesium 加载点位
addMarker() {
const Cesium = this.cesium
// 清除上一次加载的点位
this.viewer.entities.removeAll()
// foreach循环加载点位
this.pointInfo.forEach((pointObj) => {
this.viewer.entities.add({
name: pointObj.psName,
code: pointObj.id,
id: pointObj.id,
position: Cesium.Cartesian3.fromDegrees(pointObj.longitude * 1, pointObj.latitude * 1,100),
// 点
// point: {
// pixelSize: 5,
// color: Cesium.Color.RED,
// outlineColor: Cesium.Color.WHITE,
// outlineWidth: 2,
// },
// 文字标签
label: {
// show: false,
text: pointObj.psName,
font: '12px monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.fromCssColorString('rgb(11, 255, 244)'),
outlineWidth: 4,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
pixelOffset: new Cesium.Cartesian2(0, -20), // 偏移量
},
// 图标
billboard: {
image: require('@/assets/logo.png'),
width: 18,
height: 24,
},
})
})
},
# 落地线
此时我们点就飞起来啦,现在需要在点位的下方加入一条落地线
// cesium 加载点位
addMarker() {
this.pointEntitiesLine = [];
const Cesium = this.cesium
// 清除上一次加载的点位
this.viewer.entities.removeAll()
// foreach循环加载点位
this.pointInfo.forEach((pointObj) => {
// 循环添加点位引线方法
const labelEntityLine = this.loadFloatPoint(pointObj, pointObj.longitude * 1, pointObj.latitude * 1, 100);
...
this.pointEntitiesLine.push(labelEntityLine);
})
},
loadFloatPoint
方法
// 加载高度线
loadFloatPoint(pointObj, long, lat, height) {
const Cesium = this.cesium;
const lineColor = "#108de7";
const entityLine = this.viewer.entities.add({
name: 'line_' + pointObj.pointName,
code: 'line_' + pointObj.id,
id: 'line_' + pointObj.id,
// 经度维度必须是数字
// position: Cesium.Cartesian3.fromDegrees(120.42602, 31.92423),
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
long, lat, 0,
long, lat, height,
]),
width: 1,
// 材质设置
// material: Cesium.Color.DODGERBLUE,
material: Cesium.Color.fromCssColorString(lineColor),
// material : new Cesium.PolylineGlowMaterialProperty({ //发光线
// glowPower : 0.1,
// color : Cesium.Color.DODGERBLUE
// })
},
});
return entityLine;
},