6 Star 51 Fork 41

火星科技/mars3d-vue-template

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
mars3d-vite-js
public
src
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.prettierignore
.prettierrc
README.md
index.html
package.json
vite.config.js
mars3d-vue2
mars3d-vue3-vite
mars3d-webpack
LICENSE
README.md
README_EN.md
package.json
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

基于 Vue3.x + Vite 的 Mars3D🌎最简项目模板

Npm version Npm downloads GitHub stars star

English |中文

建议环境配置

  1. 推荐使用 Visual Studio Code 编辑器
  2. 推荐安装 ESlint、Volar 插件(如果已经安装 Vetur 插件,需要禁用)并将格式化工具设置为 eslint (settings.json 配置如下)
"[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

Available scripts

  • npm run eslint - Lint this project
  • npm run prettier - Format all the code to a consistant style
  • npm run prettier-check - Check the format of code but do not change it
  • npm run dev - Starts the Vite development server server at localhost:5173
  • npm run build - Runs the Vite production build
  • npm run preview - Starts a local preview of the production build using vite preview

来源cesium-vite-example

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.

UI framework support

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.

Requiring Cesium in your application

We recommend importing named exports from the Cesium ES module, via the import keyword.

Import named modules from Cesium

import { Color } from "cesium";
var c = Color.fromRandom();

Import Cesium static asset files

import "cesium/Build/Cesium/Widgets/widgets.css";

Cesium sub-packages

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";

CesiumJS before version 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

Contributions

Pull requests are appreciated. Please use the same Contributor License Agreement (CLA) used for Cesium.


Developed by the Cesium team.

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/marsgis/mars3d-vue-template.git
git@gitee.com:marsgis/mars3d-vue-template.git
marsgis
mars3d-vue-template
mars3d-vue-template
master

搜索帮助