# PolylineGeometry
vc-geometry-polyline
组件用于加载多段线几何体。需要作为 vc-instance-geometry
的子组件使用,可以挂载到 vc-primitive
或 vc-primitive-ground
。
# 示例
# 加载多段线几何体
# 预览
收起
<template>
<div class="viewer">
<vc-viewer @ready="ready">
<vc-primitive :appearance="appearance" :geometryInstances.sync="geometryInstances">
<vc-instance-geometry>
<vc-geometry-polyline ref="polyline" :positions="positions" :width="4"></vc-geometry-polyline>
</vc-instance-geometry>
</vc-primitive>
</vc-viewer>
</div>
</template>
<script>
export default {
data() {
return {
appearance: null,
geometry: null,
geometryInstances: null,
positions: [
{ lng: 102.1, lat: 29.5 },
{ lng: 106.2, lat: 29.5 },
{ lng: 106.2, lat: 33.5 },
{ lng: 108.2, lat: 35.5 },
{ lng: 102.1, lat: 33.5 }
]
}
},
mounted() {
this.$refs.polyline.createPromise.then(({ Cesium, viewer, cesiumObject }) => {
const boundingSphere = Cesium.BoundingSphere.fromPoints(cesiumObject._positions)
viewer.scene.camera.flyToBoundingSphere(boundingSphere)
})
},
methods: {
ready({ Cesium, viewer }) {
this.appearance = new Cesium.PolylineMaterialAppearance()
}
}
}
</script>
# 属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
positions | Array | required 指定表示线条的位置数组。 结构:[{ lng: number, lat: number, height: number },...,{ lng: number, lat: number, height: number }] | |
width | Number | 1.0 | optional 指定线的宽度(像素)。 |
colors | Array | optional 指定每个顶点或每个线段的颜色数组。 | |
colorsPerVertex | Boolean | false | optional 指定颜色数组是根据线段数取均值还是通过线段顶点插值。 |
arcType | Number | 1 | optional 指定线条类型。 NONE: 0, GEODESIC: 1, RHUMB: 2 |
granularity | Number | optional 指定每个经纬度之间的采样粒度。 arcType 不是 ArcType.NONE 时有效。 | |
vertexFormat | Object | optional 指定要缓存的顶点属性类型。 | |
ellipsoid | Object | optional 指定参考椭球体。 |
参考官方文档:PolylineGeometry (opens new window)
# 事件
事件名 | 参数 | 描述 |
---|---|---|
ready | {Cesium, viewer, cesiumObject} | 该组件渲染完毕时触发,返回 Cesium 类, viewer 实例,以及当前组件的 cesiumObject。 |