将铯与 TypeScript 一起使用？答案

【问题标题】：Using Cesium with TypeScript?将铯与 TypeScript 一起使用？
【发布时间】：2020-06-14 11:42:21
【问题描述】：

我无法使用 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);
};

如何使用 TypeScript 运行 Cesium？

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

【问题讨论】：

标签： typescript cesium

【解决方案1】：

运行yarn create cesium，您将获得一个无需自己配置的新打字稿脚手架

【讨论】：

【解决方案2】：

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

从目录 àla import * as Cesium from "../Build/Cesium/Cesium.js"; 导入它（但由于它在您的 rootDir 之外，这将失败）
添加到paths in your tsconfig inside the compilerOptions;

编译器选项：{ ... “路径”：{ “铯”：[“../Build/Cesium/cesium.js”] } }

【讨论】：

做了一些改变，但现在我得到“命名空间“查询”没有导出的成员“查看器”..这是更奇怪的错误..
它开始显示一些甚至奇怪的错误“错误 TS2394 构建：此重载签名与其实现签名不兼容。CesiumTest C:\Users\Sun\.nuget\packages\microsoft.typescript.msbuild \3.9.5\tools\tsc\lib.dom.d.ts 19829”。这就像它与某些 MS TS 包中的同名函数冲突..
{ "compilerOptions": { "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "ES6", "allowJs":真，“noEmit”：真，“类型”：[]，“严格”：真，“baseUrl”：“”，“esModuleInterop”：真，“路径”：{“铯”：[“./Build/Cesium /Cesium.js" ] } }, "exclude": [ "node_modules", "Source", "Build/CesiumUnminified" ] }

【解决方案3】：

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

@types/cesium

【讨论】：

在 Blazor 中？怎么样？！
@YordanYanakiev 我不认识 Blazor。我说的是 React 和 Javascript