Mars3D Vue Examples: 381 Interactive 3D Map Demos and Live Code Editing

The Mars3D Vue Example project is a live demonstration platform designed for the Mars3D 3D mapping engine. Every feature is isolated into its own single-page example, allowing you to view the source code, make edits, and see the results update instantly in the browser. Developers use this suite to study the platform's API and implementation patterns, while product managers and stakeholders use it to evaluate the engine's out-of-the-box capabilities.

The entire frontend is powered by Vue 3.

1. Tech Stack The project is built with Vue 3 and Vite. The entire codebase is written in TypeScript to ensure type safety and better developer tooling.

2. Dev Environment and Tooling

• We recommend using VS Code as your primary editor. • Install the following VS Code extensions: Volar (ensure Vetur is disabled to avoid conflicts), ESLint, and Prettier. • Configure your workspace settings.json file with the following settings:

{
  "eslint.format.enable": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Download and Setup

1. Clone the Repository

• GitHub: git clone https://github.com/marsgis/mars3d-vue-example.git • Gitee (for faster access within China): git clone https://gitee.com/marsgis/mars3d-vue-example.git

2. Run Commands

• A Node.js version of v18 or higher is required. Download the latest stable release from the official Node.js website. • Install dependencies before running the project for the first time: npm install or npm i --registry=http://registry.taobao.org • Start the development server: npm run serve • Build for production: npm run build (the output will be generated in the /dist folder). You can test the production build locally using npm run serve:dist.

3. Live Preview If you prefer not to set up a local environment, you can explore the examples online. The suite currently features 381 distinct demos.

Architecture Overview

1. Core Dependencies • Vue 3 – Frontend framework • TypeScript – Programming language • Ant Design Vue – UI component library • IconPark – Icon library

2. Foundational Knowledge Users should have a basic understanding of Node.js and Git. Familiarity with npm scripts, ES6+ syntax, and Vite is helpful. While a grasp of Vue’s Composition API is beneficial, it is not strictly mandatory for making minor code adjustments.

How the Examples Are Organized

1. Example Directory Structure All demos are located in the src/example directory. Each example is contained within its own folder. The core mapping logic is stored in a map.js file. If an example includes a UI control panel, an index.vue file will also be present in that folder.

2. Resource Dependencies

• Lib Dependencies: Shared third-party libraries are stored in public/lib/ and managed via includeLibs.js. If an example only uses core Mars3D resources, the libs field can be omitted. You can toggle between local assets and CDN links via a flag in includeLibs.js. • Resource Dependencies: These are custom JS or CSS files specific to an individual example. If a file is located within the example's own directory, simply list the filename. For external files, provide the absolute path relative to the build output.

3. Anatomy of an Example Every example folder contains a map.js file at minimum. This file manages map instantiation and all spatial logic. The optional index.vue file handles the UI overlay, buttons, and data displays—essentially anything that does not interact directly with the map object. This separation ensures that business logic remains clean and modular.

Adding a New Example

1. Register the Example Open public/config/example.json and add a new entry for your demo:

{
  "name": "Your Example Name",
  "main": "map/sample",
  "hasPannel": true,
  "libs": [],
  "thumbnail": "thumbnail.jpg"
}

2. Create the Folder Create a new directory under src/example that matches the path specified in the main field.

3. Write the Map Logic Create a map.js file inside that folder. It must export an initMap function. The basic structure is as follows:

let map
const eventTarget = new mars3d.BaseClass()

function initMap(options) {
  map = new mars3d.Map("mars3dContainer", options)
}

Once saved, you can view your work by navigating to http://localhost:8080/editor-vue.html?id=map/sample.

4. Add Dependencies (Optional) If your example requires custom data or specific external libraries, configure them in the example.json entry.

5. Add a UI Panel (Optional) Create an index.vue file with a basic template:

<template>
  <mars-pannel> </mars-pannel>
</template>
<script lang="ts" setup></script>
<style scoped lang="less"></style>

Ensure hasPannel is set to true in your example.json configuration.

Interaction Principle The project maintains a strict separation of concerns. map.js manages the map object and geographic data, while index.vue manages the UI state. You can remove index.vue and the map will still function correctly. Conversely, if you remove map.js, the UI will still render, though any interactive calls to map functions will fail silently.