Introduction

3DSIM WEB is a 3D webgis prototype system built based on the self-designed "3DSIM conceptual model". It is developed using mainstream technologies such as Vue3, Vite5, and TypeScript, and can be used for learning and reference. The core code of 3DSIM design has also been officially open sourced: https://github.com/binwenwu/3DSIM

Features

• State-of-art Techinical Stack：Using the latest and popular front-end technology such as Vue3/vite2
• TypeScript: Application-level JavaScript language
• Component: Extracted and encapsulated components for various scenarios.
• 3D Visualization: Utilizing advanced techniques for 3D visualization, enabling immersive and interactive experiences within the web GIS system.
• Geospatial Data Handling: Efficiently managing geospatial data, including complex geometries, raster data, and attribute information, to provide accurate and comprehensive representations of geographic features.
• Interactivity: Implementing interactive features such as zooming, panning, rotation, and selection, allowing users to explore and interact with 3D maps and spatial data effectively.
• Performance Optimization: Employing optimization techniques to ensure smooth performance and fast rendering, even with large-scale and complex 3D scenes and datasets.

Preview

Use Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

Preparation

• node and git - Project development environment
• Vite - Familiar with vite features
• Vue3 - Familiar with Vue basic syntax
• TypeScript - Familiar with the basic syntax of TypeScript
• Es6+ - Familiar with es6 basic syntax
• Vue-Router-Next - Familiar with the basic use of vue-router
• Ant-Design-Vue - ui basic use

Install and use

• Get the project code

git clone https://github.com/binwenwu/3DSIM_WEB.git

• Install dependencies

cd 3DSIM_WEB

npm install

• Local operation

npm run dev

• Build

npm run build

How to contribute

You are very welcome to join！Raise an issue or submit a Pull Request.

Pull Request:

1. Fork code!
2. Create your own branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat(function): add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. submit:pull request

Git Contribution submission specification

• reference vue specification (Angular)

  • feat Add new features
  • fix Fix the problem/BUG
  • style Modify the code style/format that does not affect the feature
  • perf Optimization/performance improvement
  • refactor Refactor
  • revert Undo edit
  • test Test related
  • docs Documentation/notes
  • chore Dependency update/scaffolding configuration modification etc.
  • workflow Workflow improvements
  • ci Continuous integration
  • types Type definition file changes
  • wip In development

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, doesn't include IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Maintainer

@Binwen Wu

License

MIT © Tankenqi-2023