Question

我一直在尝试在ReactJs应用程序中实现铯，在铯查看器中显示各种工厂，并在工厂坐标上绘制多边形网格。一切工作正常，但有一件事正在使混乱。我正在尝试设置相对于我的工厂的动态摄像机高度，这意味着工厂越大，摄像机越高，以便在第一次加载时摄像机覆盖整个工厂。

为此，我试图使用Resium的<CameraFlyToBoundingSphere>组件（铯的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

顺便说一句，我正在从项目中使用脚本类型。希望有人提出一些建议。

Answer 1

找到了解决方案。 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;

希望对某些人有帮助，因此在此处添加了解决方案

类型'import（“ cesium”）。BoundingSphere'中缺少属性'intersect'，但类型中必需

1 个答案: