将 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);
};
- 如何使用 TypeScript 运行 Cesium?
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
我无法使用 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。
通常,您需要将 @typings for cesium 添加到您的项目中。但是如果你在本地安装了它,你会想要
- 从目录 àla
import * as Cesium from "../Build/Cesium/Cesium.js";
导入它(但这会失败,因为它在你的 rootDir 之外) 将其添加到
paths
in your tsconfig inside thecompilerOptions
;编译器选项:{ ... "paths":{ "cesium": ["../Build/Cesium/cesium.js"] } }
运行 yarn create cesium
你将得到一个新的没有配置的脚手架
Cesium 不需要TypeScript 配置。 Cesium 会为您安装它,包括 Typescript 配置。
@types/cesium