基于 Vue3.x + Vite 的 Mars3D🌎最简项目模板
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
npm i
npm run dev
npm run build
npm run preview
Navigate to localhost:5173
. For the built version navigate to localhost:4173
npm run eslint
- Lint this projectnpm run prettier
- Format all the code to a consistant stylenpm run prettier-check
- Check the format of code but do not change itnpm run dev
- Starts the Vite development server server at localhost:5173
npm run build
- Runs the Vite production buildnpm run preview
- Starts a local preview of the production build using vite preview
A minimal recommended setup for an applications using Cesium with Vite.
If you are using Webpack instead of Vite, check out our cesium-webpack-example
repo.
This example was created to be the lowest common denominator in the Vite ecosystem and targets Vanilla JS. The same configuration has been tested with other UI frameworks in Vite (like Vue) by adding the relevant plugin. If you run into framework specific problems please open an issue.
If you create a new Vite project with create-vite
you can combine the plugins
that it adds in vite.config.js
with the ones in this example configuration.
We recommend importing named exports from the Cesium ES module, via the import
keyword.
import { Color } from "cesium";
var c = Color.fromRandom();
import "cesium/Build/Cesium/Widgets/widgets.css";
CesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons. This example is already set up to copy these directories if you install the whole cesium
package.
viteStaticCopy({
targets: [
{ src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
{ src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
{ src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
{ src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
],
}),
However if you only install @cesium/engine
then you should change the paths in vite.config.js
to the ones below:
viteStaticCopy({
targets: [
{ src: 'node_modules/@cesium/engine/Build/Workers', dest: cesiumBaseUrl },
{ src: 'node_modules/@cesium/engine/Build/ThirdParty', dest: cesiumBaseUrl },
{ src: 'node_modules/@cesium/engine/Source/Assets', dest: cesiumBaseUrl },
],
}),
Additionally you will have to import a different widgets css file in src/main.js
.
// Change this import
import "cesium/Build/Cesium/Widgets/widgets.css";
// To this one from the cesium/engine package
import "@cesium/engine/Source/Widget/CesiumWidget.css";
1.114
If you are using a version of CesiumJS before 1.114
you will need to modify the config to tell it to ignore some external node dependencies. Add the build
section below:
build: {
rollupOptions: {
external: ["http", "https", "url", "zlib"],
},
},
See cesium PR #11773 for more information
Pull requests are appreciated. Please use the same Contributor License Agreement (CLA) used for Cesium.
Developed by the Cesium team.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。