将 Cesium 与 TypeScript 一起使用?

Using Cesium with TypeScript?

我无法使用 TypeScript 运行 Cesium,它经常失败,错误是 "cesium" 在一种或另一种形式的错误中不可用。

我有这个项目树:

在tsconfig.json中:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "allowJs": true,
    "noEmit": true,
    "types": [],
    "strict": true
  },
  "exclude": [
    "node_modules",

    "Build"
  ],
  "include": [

    "Build/CesiumUnminified/Cesium.js"
  ]
}

在index.html中:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CesiumTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link href="css/syncfusion-blazor-icons.css" rel="stylesheet" />
    <link href="Build//Cesium/Widgets/widgets.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Syncfusion.Blazor/styles/bootstrap4.css" />

</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register( 'service-worker.js' );</script>
    <script src="Source/Cesium.js"></script>

    <script src="Main.js" ></script>
</body>

</html>

在Main.ts中:

import * as Cesium from "cesium";


let map: Cesium.Viewer = undefined;

function createTheMap()
{
    if (map === undefined) {

        map = new Cesium.Viewer("mapViewDiv",
            {
                timeline: false,
                animation: false,
                infoBox: false,
                navigationHelpButton: false,
                fullscreenButton: false,
                geocoder: false,
                shadows: false



            });

        console.log( map );

    }
    map.zoomTo(map.entities);
};

PS。该项目完全是客户端 - 因此未使用 Node.js。

通常,您需要将 @typings for cesium 添加到您的项目中。但是如果你在本地安装了它,你会想要

  • 从目录 àla import * as Cesium from "../Build/Cesium/Cesium.js"; 导入它(但这会失败,因为它在你的 rootDir 之外)
  • 将其添加到 paths in your tsconfig inside the compilerOptions;

    编译器选项:{ ... "paths":{ "cesium": ["../Build/Cesium/cesium.js"] } }

运行 yarn create cesium 你将得到一个新的没有配置的脚手架

Cesium 不需要TypeScript 配置。 Cesium 会为您安装它,包括 Typescript 配置。

@types/cesium