当前位置：首页 > news >正文

世界上前端做的最好的网站/沈阳今日新闻头条

news 2025/6/30 19:21:58

世界上前端做的最好的网站,沈阳今日新闻头条,日本韩国美国中国动作的,网站开发合同.doc之前在“VSC调试Cesium代码及模块功能初探”介绍了在vs code中如何调试cesium的源代码中的部分函数。目前看来，在整体引入Cesium时就无能为力了。从1.70版本开始，CesiumJS附带了正式的TypeScript类型定义，即Cesium.d.ts文件。d.ts大名叫Typ…

之前在“VSC调试Cesium代码及模块功能初探”介绍了在vs code中如何调试cesium的源代码中的部分函数。目前看来，在整体引入Cesium时就无能为力了。

从1.70版本开始，CesiumJS附带了正式的TypeScript类型定义，即Cesium.d.ts文件。d.ts大名叫TypeScript Declaration File，里面存放一些声明，类似于C/C++的.h头文件。d.ts文件的一个越来越广泛的应用场景是编辑器智能提示（具体见IntelliSense based on TypeScript Declaration Files）。

本文给出如何在vs code编辑器中编辑cesium代码时使用d.ts文件，从而到达智能提示的效果。我查阅了网上很多地方，都没有直接给出完整的例子，本文的解决方案也是不完整的，希望各位提出更改意见（本人对js不精通）。

官方调用方式

在Cesium包里有个例子文件helloworld.html（Apps/HelloWorld.html），实现了最简单的Cesium示例。

从上面代码可以看出，一个典型的html文档实现cesium应用，主要干了两件事：

<head>里引用Cesium.js文件（<script src="../Build/Cesium/Cesium.js"></script>），这里文件引用的是min格式的，我们在调试的时候也可以引用"/Build/CesiumUnminified/Cesium.js"。
在<body>里的js代码里，直接创建Viewer对象（代码：var viewer = new Cesium.Viewer("cesiumContainer");），注意，此处输入代码时是没有智能提示的，也就是说，Cesium对象里的属性、接口、函数等统统没有智能提示，智能我们自己手动输入，极大的影响了工作效率。

Cesium的智能提示开启

在Cesium包里，我们发现有三处地方包含了Cesium.d.ts文件，分别为：

Build/Cesium/Cesium.d.ts
Build/CesiumUnminified/Cesium.d.ts
Source/Cesium.d.ts

我猜是最后一个起作用(通过package.json文件里看出的）。反正只要有了Cesium.d.ts文件，我们在编写js代码时就可以有智能提示的功能了。

在通常的项目工程中，cesium的代码不会直接在html文件里写，而是单独写在一个.js文件里，此处在Apps文件里创建两个文件:

app.js
HelloWorld2.html

其中,HelloWorld2.html文件由HelloWorld.html文件拷贝而来，具体代码如下：

<!DOCTYPE html>
<html lang="en"><head><!-- Use correct character set. --><meta charset="utf-8" /><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>Hello World!</title><script src="../Build/Cesium/Cesium.js"></script><style>@import url(../Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style></head><body><div id="cesiumContainer"></div>    <script src='./app.js'></script></body>
</html>

相比较原文件，HelloWorld2.html文件只改动了一个地方：<script src='./app.js'></script>，即直接引用一个js代码文件。
注意，<head>里引用Cesium.js文件方式不变，仍然为（<script src="../Build/Cesium/Cesium.js"></script>）

而"app.js"文件里的内容如下：

//  下面一句，在调试（编写）代码的时候打开；运行的时候注释掉
import * as Cesium from 'cesium';//  创建Viewer对象(浏览器里的地球及所有控件)
var viewer = new Cesium.Viewer("cesiumContainer");

只要有第一句:"import * as Cesium from 'cesium';"，那么后面的所有语句都有智能提示功能。见下图
Cesium智能提示
但是在运行的时候一定要将第一句import注释掉，否则运行时浏览器加载时会报错误：Uncaught TypeError: Failed to resolve module specifier "cesium". Relative references must start with either "/", "./", or "../".