CesiumGS / cesium

An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
https://cesium.com/cesiumjs/
Apache License 2.0
12.95k stars 3.49k forks source link

Create new simple example with vue2 and vite #11306

Closed brunokunace closed 9 months ago

brunokunace commented 1 year ago

Hi everyone, im trying to create a simple example with vue2+vite and cesium 1.105.2

I use a vite plugin to copy node files to public:

//vite.config.js

import copy from "rollup-plugin-copy";
...

      copy({
          targets: [
              { src: "node_modules/@cesium/engine/Source/*", dest: "public/" },
              { src: "node_modules/@cesium/engine/Source/WorkersES6/*", dest: "public/Workers" },
              { src: "node_modules/@cesium/widgets/Source/*", dest: "public/Widgets" },
          ],
          hook: 'buildStart'
      })

and all files i need are copied to /public folder and its nice.

But when i try to initialize the script bellow, i receive these erros in console and the result a black sky with start moving

//Hello world example code used

      Cesium.Ion.defaultAccessToken = CESIUM_KEY

      const viewer = new Cesium.Viewer('cesiumContainer');

Error: Note. /Workers/createVerticesFromHeightmap.js is working in the indicated path.

image

Result screen:

image
TJKoury commented 1 year ago

It's out of date, but try this and post if it works:

https://www.npmjs.com/package/c137.js

brunokunace commented 1 year ago

@TJKoury works, but its not a official Cesium package and i cant use this. @cesiumgs-admin

TJKoury commented 1 year ago

https://github.com/CesiumGS/cesium/issues/10619

I submitted for a Cesium grant to roll all this into Cesium, make some noise if this is something you want to see done.

ggetz commented 1 year ago

@brunokunace You'll want to use the pre-built workers in Build/Workers/ instead of the unbuilt Source/WorkersES6/.

But message received about an easy-to-follow example using vue/vite.

CC https://github.com/CesiumGS/cesium/issues/11301

mivui commented 1 year ago

https://www.npmjs.com/package/vite-plugin-cesiumjs

ggetz commented 1 year ago

Requested on the forum: https://community.cesium.com/t/is-there-a-good-way-to-use-cesium-with-vite/27545/2

s3xysteak commented 1 year ago

@brunokunace I found maybe a good solution to solve the problem. Here is the code simply-cesium-vite-vue. Hope it helpful. On my laptop, the bundling process only took 717ms, and the resulting "dist" folder was only 11.1 MB in size. I have provided a detailed explanation of my approach in the readme. If there's anything I can assist you with, please feel free to ask. If you have any suggestions or improvements, I welcome them as well!

ggetz commented 9 months ago

Hi all, we've added https://github.com/CesiumGS/cesium-vite-example with a recommended setup for vite. It should also be straightforward to add vue to that setup.

Please leave a comment or issue in that repo if you have any feedback. Thanks!