以天际线分析为例演示如何使用 CDK
js
import * as Cesium from 'cesium';
import { Skyline } from 'cdk/skyline';
import { onMounted } from 'vue';
// 初始化场景
const viewer = new Cesium.Viewer('container', { timeline: false, animation: false });
// 初始化天际线类
const skyline = new Skyline(window.$viewer, {
lineColor: 'rgba(255, 0, 0, 1)',
lineWidth: 3,
hideTerrain: false,
});
// 点击分析
const onClick = () => {
skyline.analyse().then(res => {
if (res) {
skyline.clear();
skyline.visualize(res);
}
});
};
// 点击清除
const onClean = () => {
skyline?.clear();
};
onMounted(() => {
const v = window.$viewer;
Cesium.Cesium3DTileset.fromUrl('https://raw.githubusercontent.com/WShihan/3dtiles_data/main/Hangzhou/tileset.json').then(t => {
v.scene.primitives.add(t);
v.camera.flyTo({
destination: new Cesium.Cartesian3(-2775269.493801193, 4766186.262439957, 3193391.603100528),
orientation: {
heading: 5.913595053091834,
pitch: -0.19132638510213162,
roll: 0.000026944589734512192,
},
});
});
});