const onViewerReady = (readyObj: VcReadyObject) => { Cesium = readyObj.Cesium; viewer = readyObj.viewer; viewer.scene.globe.depthTestAgainstTerrain = true; };用JavaScript怎么写
时间: 2023-11-28 13:50:45 浏览: 32
您可以使用如下JavaScript代码来编写此函数:
```
function onViewerReady(readyObj) {
var Cesium = readyObj.Cesium;
var viewer = readyObj.viewer;
viewer.scene.globe.depthTestAgainstTerrain = true;
}
```
请注意,此代码假定在调用此函数之前已经定义了变量 `Cesium` 和 `viewer`。如果这些变量未定义,则需要根据您的代码进行相应的修改。
相关问题
const onViewerReady = (readyObj: VcReadyObject) => { Cesium = readyObj.Cesium; viewer = readyObj.viewer; viewer.scene.globe.depthTestAgainstTerrain = true; }; 用JavaScript语言怎么写
可以这么写:
```javascript
const onViewerReady = function(readyObj) {
Cesium = readyObj.Cesium;
viewer = readyObj.viewer;
viewer.scene.globe.depthTestAgainstTerrain = true;
};
```
或者使用箭头函数:
```javascript
const onViewerReady = (readyObj) => {
Cesium = readyObj.Cesium;
viewer = readyObj.viewer;
viewer.scene.globe.depthTestAgainstTerrain = true;
};
```
如何在vue3的<script setup>中使用cesium,实现点击地球保存并绘制该点位置,用虚线将该点与北极点连接,但不绘制北极点的位置,以及虚线的长度只有点击保存的那个点开始到北极点的1000米
在Vue3的<script setup>中使用Cesium需要先安装Cesium和@vue-cesium组件库:
```
npm install cesium --save
npm install @vue-cesium/vue3-cesium --save
```
然后在组件中引入Cesium和@vue-cesium:
```html
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium/Cesium";
import { VcViewer } from "@vue-cesium/vue3-cesium";
const options = {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
shouldAnimate: true,
vrButton: false,
};
const viewer = new Cesium.Viewer("cesiumContainer", options);
const vcViewer = new VcViewer(viewer);
</script>
```
接着,我们可以使用Cesium的API来实现点击地球保存并绘制该点位置,并用虚线将该点与北极点连接,但不绘制北极点的位置,以及虚线的长度只有点击保存的那个点开始到北极点的1000米。
```html
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium/Cesium";
import { VcViewer } from "@vue-cesium/vue3-cesium";
const options = {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
shouldAnimate: true,
vrButton: false,
};
const viewer = new Cesium.Viewer("cesiumContainer", options);
const vcViewer = new VcViewer(viewer);
// 添加鼠标单击事件监听器
vcViewer.cameraChanged.addEventListener(() => {
const picked = viewer.scene.pickPosition(event.position);
if (Cesium.defined(picked)) {
const position = viewer.scene.globe.ellipsoid.cartesianToCartographic(picked);
const lon = Cesium.Math.toDegrees(position.longitude);
const lat = Cesium.Math.toDegrees(position.latitude);
const height = position.height;
// 绘制点
const entity = viewer.entities.add({
position: picked,
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
},
});
// 计算北极点的位置
const northPole = Cesium.Cartesian3.fromDegrees(0, 90, 0);
// 计算虚线的端点
const point1 = picked;
const point2 = Cesium.Cartesian3.fromRadians(northPole.longitude, northPole.latitude, 1000);
// 绘制虚线
const polyline = viewer.entities.add({
polyline: {
positions: [point1, point2],
width: 5,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.RED,
}),
},
});
}
});
</script>
```