Skip to content

以天际线分析为例演示如何使用 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,
      },
    });
  });
});