Cesium是一個基于WebGL的開源地球瀏覽器，可以在瀏覽器內實現3D視圖和地球層數據的可視化。在Vue中使用Cesium可以方便地構建交互式三維場景。
在Cesium中創建點是一個很基本的功能，可通過以下代碼實現：
```javascript
const viewer = new Cesium.Viewer('cesiumContainer');
const point = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW
}
});
```
首先，通過`new Cesium.Viewer`創建了一個視圖對象，并將其附加到了HTML中的容器（`cesiumContainer`）。然后使用`viewer.entities.add`方法創建了一個實體（entity），實體是Cesium中的基本元素，可以是點、線、面等等。在這個實體中定義了位置（通過經緯度表示）和點的視覺屬性（比如大小和顏色）。最后，將這個實體添加到了Cesium的場景中。
接下來，我們可以在Vue組件中使用這些代碼實現類似的效果。首先，在Vue的`mounted`鉤子函數中創建一個新的實例并將其添加到組件的DOM元素中：
```javascript
import * as Cesium from 'cesium';
export default {
mounted() {
this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
geocoder: false,
sceneModePicker: false,
navigationHelpButton: false,
fullscreenButton: false,
baseLayerPicker: false,
infoBox: false,
homeButton: false
});
}
};
```
這里使用了ES6的`import`語法引入了Cesium庫。接著，將實例化的`Viewer`對象綁定到組件的`viewer`屬性上。注意，這里將`Viewer`對象附加到了組件的DOM元素（使用`$refs`獲取）中。
在組件中添加點同樣可以使用上面的代碼，在`mounted`鉤子函數中調用`viewer.entities.add`方法。不過，注意要在`Vue.nextTick`中執行，這是Vue更新DOM的時機，確保Cesium視圖已經加載完畢。
```javascript
mounted() {
this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
geocoder: false,
sceneModePicker: false,
navigationHelpButton: false,
fullscreenButton: false,
baseLayerPicker: false,
infoBox: false,
homeButton: false
});
Vue.nextTick(() =>{
this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW
}
});
});
}
```
這樣就可以在Vue組件中創建一個簡單的點了。當然，Cesium還支持許多其他的功能和高級API，可以讓我們在Vue中構建更加復雜、高度交互的三維場景。
下一篇vue會泄露嗎