属性 'intersect' 在类型 'import("cesium").BoundingSphere' 中缺失,但在类型中是必需的
Property 'intersect' is missing in type 'import("cesium").BoundingSphere' but required in type
我一直在尝试在 ReactJs 应用程序中实现 Cesium,其中在 cesium 查看器中显示各种工厂,并在工厂坐标上绘制多边形网格。一切正常,但有一件事让人感到困惑。我正在尝试设置相对于我的工厂的动态相机高度,这意味着工厂越大相机越高,以便整个工厂在第一次加载时被相机覆盖。
为此,我尝试使用 Resium 中的 <CameraFlyToBoundingSphere>
组件(Cesium 的 React 组件)。
我的代码如下所示:
const bound = new BoundingSphere(Cartesian3.fromDegrees(140, 35.7, 0), 0);
<Viewer>
<CameraFlyToBoundingSphere
boundingSphere={bound}
offset={new HeadingPitchRange(0, Math.toRadians(-30), 80000)}
duration={3}
/>
<Entity key={index}>
<PolygonGraphics
hierarchy={positionArrayPoly}
height={height}
material={color}
show={true}
outline={selected}
outlineColor={Color.WHITE}
outlineWidth={10}
/>
</Entity>
</Viewer>;
整个代码明显在Functional Component
下。只是不想让它看起来很复杂,因为还有很多其他代码。所以这就是我面临的问题。此代码向我发送错误。
Property 'intersect' is missing in type 'import("cesium").Bounding Sphere' but required in type
顺便说一句,我正在使用我项目中的类型脚本。希望有人能给些建议。
找到解决办法。 const bound
需要稍微修改一下。
定义函数名flyToLatLng
const flyToLatLng = (viewer: any, lat: number, lng: number) => {
const bounds = BoundingSphere.fromPoints([
Cartesian3.fromDegrees(lng, lat),
]);
viewer.camera.flyToBoundingSphere(bounds, {
duration: CAMERA_DURATION,
offset: AREA_HEADING,
});
};
将查看器代码更改得有点像 Bellow:
<Viewer>
<CameraCustom
cRef={viewerRef}
lat={cameraPosition.lat}
long={cameraPosition.long}
/>
<Entity key={index}>
<PolygonGraphics
hierarchy={positionArrayPoly}
height={height}
material={color}
show={true}
outline={selected}
outlineColor={Color.WHITE}
outlineWidth={10}
/>
</Entity>
</Viewer>
终于添加了组件
import React, { useEffect } from 'react';
import { flyToLatLng } from '../lib/camera';
interface Props {
cRef: any;
lat: number;
long: number;
}
const CameraCustom: React.FC<Props> = ({ cRef, lat, long }) => {
useEffect(() => {
flyToLatLng(cRef.current.cesiumElement, lat, long);
});
return <></>;
};
export default CameraCustom;
希望它对某些人有所帮助,所以在此处添加了解决方案
我一直在尝试在 ReactJs 应用程序中实现 Cesium,其中在 cesium 查看器中显示各种工厂,并在工厂坐标上绘制多边形网格。一切正常,但有一件事让人感到困惑。我正在尝试设置相对于我的工厂的动态相机高度,这意味着工厂越大相机越高,以便整个工厂在第一次加载时被相机覆盖。
为此,我尝试使用 Resium 中的 <CameraFlyToBoundingSphere>
组件(Cesium 的 React 组件)。
我的代码如下所示:
const bound = new BoundingSphere(Cartesian3.fromDegrees(140, 35.7, 0), 0);
<Viewer>
<CameraFlyToBoundingSphere
boundingSphere={bound}
offset={new HeadingPitchRange(0, Math.toRadians(-30), 80000)}
duration={3}
/>
<Entity key={index}>
<PolygonGraphics
hierarchy={positionArrayPoly}
height={height}
material={color}
show={true}
outline={selected}
outlineColor={Color.WHITE}
outlineWidth={10}
/>
</Entity>
</Viewer>;
整个代码明显在Functional Component
下。只是不想让它看起来很复杂,因为还有很多其他代码。所以这就是我面临的问题。此代码向我发送错误。
Property 'intersect' is missing in type 'import("cesium").Bounding Sphere' but required in type
顺便说一句,我正在使用我项目中的类型脚本。希望有人能给些建议。
找到解决办法。 const bound
需要稍微修改一下。
定义函数名flyToLatLng
const flyToLatLng = (viewer: any, lat: number, lng: number) => {
const bounds = BoundingSphere.fromPoints([
Cartesian3.fromDegrees(lng, lat),
]);
viewer.camera.flyToBoundingSphere(bounds, {
duration: CAMERA_DURATION,
offset: AREA_HEADING,
});
};
将查看器代码更改得有点像 Bellow:
<Viewer>
<CameraCustom
cRef={viewerRef}
lat={cameraPosition.lat}
long={cameraPosition.long}
/>
<Entity key={index}>
<PolygonGraphics
hierarchy={positionArrayPoly}
height={height}
material={color}
show={true}
outline={selected}
outlineColor={Color.WHITE}
outlineWidth={10}
/>
</Entity>
</Viewer>
终于添加了组件
import React, { useEffect } from 'react';
import { flyToLatLng } from '../lib/camera';
interface Props {
cRef: any;
lat: number;
long: number;
}
const CameraCustom: React.FC<Props> = ({ cRef, lat, long }) => {
useEffect(() => {
flyToLatLng(cRef.current.cesiumElement, lat, long);
});
return <></>;
};
export default CameraCustom;
希望它对某些人有所帮助,所以在此处添加了解决方案