CesiumJS is a robust library for creating 3D globes and maps in a web browser, while Vue.js is a flexible JavaScript framework for building user interfaces.
By integrating CesiumJS with Vue.js, developers can leverage the 3D capabilities of CesiumJS and the modular structure of Vue.js to build interactive geospatial applications.
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
In this tutorial series, we’ll guide you through the process of integrating CesiumJS into a Vue.js application, from setting up a basic project to rendering a 3D map and beyond, exploring complex features to build a comprehensive geospatial application.
We will start by setting up a new project using Vite, a modern build tool that provides fast development and builds speeds. We will then install the necessary dependencies, including CesiumJS, VueJS, and Pinia. We will also enable TypeScript in our project to ensure type safety.
1.Create latest VueJS application with npm init vue@latest
We will use npm init vue@latest command to create a latest VueJS application. This command will internally use Vite to create project. The created project will be using a build setup based on Vite.
When you run the command, it will ask you to select the options while creating the project. Give project name and make sure you select yes for all options. It will create the project. Then go to vue-layers directory, install dependencies using npm install and run the the project using using npm run dev.
We have created the the simple basic project using Vite as build tool enabling TypeScript and Pinia
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
(base) geoknight@pop-os:~/Desktop/Learning/cesium$ npm init vue@latest Vue.js - The Progressive JavaScript Framework ✔ Project name: … vue-layers ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an End-to-End Testing Solution? › Cypress ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in /home/geoknight/Desktop/Learning/cesium/vue-cesium... Done. Now run: cd vue-cesium npm install npm run format npm run dev (base) geoknight@pop-os:~/Desktop/Learning/cesium$ cd vue-cesium/ (base) geoknight@pop-os:~/Desktop/Learning/cesium/vue-layers$ npm install npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead added 642 packages, and audited 643 packages in 2m 141 packages are looking for funding run `npm fund` for details found 0 vulnerabilities (base) geoknight@pop-os:~/Desktop/Learning/cesium/vue-layers$ npm run dev VITE v4.2.1 ready in 376 ms ➜ Local: http://127.0.0.1:5174/ ➜ Network: use --host to expose ➜ press h to show help |
After running the project using npm run dev command, you will see below web page running on the local server.
2. Install Cesium using npm
Next, we will install cesiumjs library using npm
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(base) geoknight@pop-os:~/Desktop/Learning/cesium/vue-cesium$ npm install cesium changed 7 packages, and audited 676 packages in 2m 139 packages are looking for funding run `npm fund` for details 5 moderate severity vulnerabilities To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. (base) geoknight@pop-os:~/Desktop/Learning/cesium/vue-cesium$ |
3. Integrating CesiumJS with VueJS
The provided Vue.js component integrates CesiumJS for 3D geospatial visualization. It starts by importing necessary dependencies and setting up Cesium’s access token and base URL. In the mounted lifecycle hook, an OpenStreetMap imagery provider is created and used to instantiate a Cesium Viewer, which is attached to the ‘cesiumContainer’ div. The viewer is configured to use OpenStreetMap for its base layer. Lastly, CSS is applied to ensure the viewer takes up the entire window without causing any scrollbars to appear. This setup results in a Vue application with a full-window Cesium Viewer displaying an OpenStreetMap layer.
If you’re trying to set window.CESIUM_BASE_URL to /static/cesium, you should have a public/static/cesium directory in your project with the Cesium files.
CesiumJS relies on a number of static files, such as Web Workers, images, and other assets, which need to be accessible to the client-side JavaScript at runtime. These files are not bundled into the main Cesium.js file, but are loaded separately as needed. By placing the Cesium static files in the public directory, you ensure that they are accessible to the client-side JavaScript and can be loaded correctly at runtime. When the application is built for production, everything in the public directory is copied to the build output directory, maintaining the same directory structure.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<template> <div id = "cesiumContainer" ></div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { Viewer, Ion, OpenStreetMapImageryProvider, ImageryLayer } from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css"; Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkM2I3YTNiNy0wNjNiLTRmNDEtODFiMy05ODAzOGQ2ZTM0YjkiLCJpZCI6NzExNywiaWF0IjoxNjkwOTIzNDQzfQ.hI_Ri0N2Y3bWNzp7ckE4ho6nr4ZQMDMxFrluGgHSdy4'; declare global { interface Window { CESIUM_BASE_URL: string; } } window.CESIUM_BASE_URL = 'static/cesium'; export default defineComponent({ name: 'App', mounted() { let baseLayer = new ImageryLayer(new OpenStreetMapImageryProvider({ url: "https://tile.openstreetmap.org/" }), {}) new Viewer("cesiumContainer", { baseLayer: baseLayer }); } }) </script> <style> html, body, #cesiumContainer, #app { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; } </style> |
4. Output
I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.