# cesium-threejs-template

**Repository Path**: mu1866/cesium-threejs-template

## Basic Information

- **Project Name**: cesium-threejs-template
- **Description**: Three-D Geographic Information System 基于 cesium 架构，封装平时常用的功能工具类，在工作时省去了许多烦恼，并结合了 threejs(enable3d) 双场景交互实现较为复杂多样的功能特效场景。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/mu1866/projects
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2025-02-10
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: GIS, Threejs, JavaScript

## README

# Three-D Geographic Information System Template

## 介绍

Three-D Geographic Information System 基于 cesium 架构，封装平时常用的功能工具类，在工作时省去了许多烦恼，并结合了 threejs(enable3d) 双场景交互实现较为复杂多样的功能特效场景。

``` bash
cd cesium-utils-template
npm install
npm run dev
```

``` bash
cd @server
npm install
npm run dev
```

## config

``` bash
update @/config/host.js
```

## Utils

``` bash
copy @/components/index.js
```

## Class

- [x] **Class.CesiumMain**
- [x] **Class.CesiumMain.CameraInit**
- [x] **Class.CesiumMain.ModelPointMap**
- [x] **Class.CesiumMain.PointMap**
- [x] **Class.CesiumMain.TagMap**
- [x] **Class.CesiumMain.InterpolationRoamMap**
- [x] **Class.CesiumMain.LocalScopeTagMap**
- [x] **Class.CesiumMain.EarthLineMap**
- [x] **Class.CesiumMain.MatrixModelingMap**
- [x] **Class.CesiumMain.PolygonalWaterAreaMap**
- [x] **Class.CesiumMain.FyPoint**
- [x] **Class.CesiumMain.FyModel**
- [x] **Class.CesiumMain.PickModel**
- [x] **Class.CesiumMain.ShowTag**
- [x] **Class.CesiumMain.FyLocalScopeTag**
- [x] **Class.CesiumMain.DrawEarthLine**
- [x] **Class.CesiumMain.DrawTerrainLine**
- [x] **Class.CesiumMain.DrawMatrixModeling**
- [x] **Class.CesiumMain.InterpolationRoam**
- [x] **Class.CesiumMain.CreateSyGJsonData**
- [x] **Class.CesiumMain.CreatePolygonalWaterArea**
- [x] **Class.CesiumMain.CreateLightRoad**
- [x] **Class.CesiumMain.CreateMeteorology**
- [x] **Class.CesiumMain.CreateUserInteractionEventsOperateGCJ02PathPlanningNavigation**
- [x] **Class.CesiumMain.CreateGCJ02PathPlanningNavigation**
- [x] **Class.CesiumMain.CreateShaderSnow**
- [x] **Class.CesiumMain.CreateShaderRain**
- [x] **Class.CesiumMain.CreateShaderFog**
- [x] **Class.CesiumMain.CreateWatchCarPosition**
- [x] **Class.CesiumMain.CreateDrawingArea**
- [x] **Class.CesiumMain.CamLookAtWho**
- [x] **Class.CesiumMain.UnCamLookAt**
- [x] **Class.CesiumMain.FyModelShowSwitchScene**
- [x] **Class.EnableAirSceneMain**
- [x] **Class.EnableBalloonSceneMain**
- [x] **Class.EnableOutdoorSceneMain**

## code

<div align=center><img width="600" height="500" src="./src/assets/code-1.jpg"/></div>

<div align=center><img width="600" height="500" src="./src/assets/code-2.jpg"/></div>

<div align=center><img width="600" height="500" src="./src/assets/scene.jpg"/></div>

<div align=center><img width="600" height="500" src="./src/assets/scene-2.jpg"/></div>

<div align=center><img width="600" height="500" src="./src/assets/scene-3.jpg"/></div>

![GIF](./src/assets/2025-02-10T12_59_03.874Z-163809.gif)

![GIF](./src/assets/2025-02-10T13_44_25.630Z-489104.gif)

<div align=center><video src="./src/assets/Rec 0001.mp4" autoplay loop muted></video></div>

-  [【文档】](http://cesium.xin/cesium/cn/Documentation1.62/)
-  [【示例】](https://sandcastle.cesium.com/)
-  [【工具】](https://geojson.io/)
-  [【工具】](https://datav.aliyun.com/portal/school/atlas/area_generator#3.86/102.834000/34.951000)