# vue3-cesium智慧城市

**Repository Path**: Aikaid-yibo/vue3-cesium-smart-city

## Basic Information

- **Project Name**: vue3-cesium智慧城市
- **Description**: vue3+Cesium智慧城市
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 6
- **Created**: 2023-03-29
- **Last Updated**: 2025-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Cesium

## README

# cesium智慧城市

### 描述

作者学习`Cesium`期间练习的小项目，项目以纽约市`3D Tiles`数据为地图，将城市建筑物以不同高度设置颜色分类，并添加`geoJSON`数据、图形标签，最后设置线路，加载一辆保时捷使其沿线路移动。

（在写此项目中，作者也有许多不明白的地方，希望看到此库的小阔爱一起交流！）

### 技术栈

vue3 + vite + cesium(1.103.0)

### 项目展示

![image-20230329210742627](README.en.assets/image-20230329210742627.png)

### 关键代码

#### 1. 加载3D Tiles数据

```js
const city = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
    	url: Cesium.IonResource.fromAssetId(75343) // 官网提供的纽约市数据ID
    })
)
viewer.flyTo(city)
```

#### 2. 建筑物按高度进行颜色分类

```js
city.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ['${Height} >= 300', 'rgba(45,0,75,0.9)'],
        ['${Height} >= 200', 'rgba(102,71,151,0.9)'],
        ['${Height} >= 150', 'rgba(170,162,204,0.9)'],
        ['${Height} >= 100', 'rgba(224,226,238,0.9)'],
        ['${Height} >= 80', 'rgba(252,230,200,0.9)'],
        ['${Height} >= 50', 'rgba(248,176,87,0.9)'],
        ['${Height} >= 10', 'rgba(198,106,11,0.9)'],
        ['true', 'rgba(127, 59, 8,0.9)']
      ]
   }
})
```

#### 3. 加载GeoJSON数据，并添加标签

```js
// 加载 Geojson 数据
  const neighborHoodsPromise = Cesium.GeoJsonDataSource.load(
    './assets/SampleData/sampleNeighborhoods.geojson'
  )
  
  let neighborHoods
  neighborHoodsPromise.then((dataSource) => {
    // 将Geojson添加到 viewer 视图中
    viewer.dataSources.add(dataSource)
    neighborHoods = dataSource.entities
    // 获取Geojson的每一块实体，并进行循环
    let neighborHoodsEntities = dataSource.entities.values
    for (let i = 0; i < neighborHoodsEntities.length; i++) {
      let entity = neighborHoodsEntities[i]
      if (Cesium.defined(entity.polygon)) {
        // 设置多边形名称
        entity.name = entity.properties.neighborhood._value
        // 设置多边形材质(随机色)
        entity.polygon.material = new Cesium.Color.fromRandom({
          minimumRed: 0.75,
          maximumRed: 1,
          minimumGreen: 0.75,
          maximumGreen: 1,
          minimumBlue: 0.75,
          maximumBlue: 1,
          minalpha: 0.5
        })

        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN

        let ployPositions = entity.polygon.hierarchy.getValue(
          Cesium.JulianDate.now()
        ).positions
        let ployCenter = Cesium.BoundingSphere.fromPoints(ployPositions).center
        ployCenter = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(ployCenter)
        entity.position = ployCenter

        // 生成标签
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            10,
            8000
          ),
          disableDepthTestDistance: 100
        }
      }
    }
})
```

#### 4. 加载kml数据

```js
var kmlOptions = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    // 如果我们想要将几何特征（多边形、线串和线性环）固定在地面上，则为true
    clampToGround: true
}

var geocachePromise = Cesium.KmlDataSource.load(
    './assets/SampleData/sampleGeocacheLocations.kml', kmlOptions
)
```

#### 5. 添加广告牌实体并设置样式

```js
// 将 geocache 广告牌实体添加到场景中并为其设置样式
geocachePromise.then(function (dataSource) {
    // 将新数据作为实体添加到查看器
    viewer.dataSources.add(dataSource)

    // 获取实体数组
    var geocacheEntities = dataSource.entities.values

    for (var i = 0; i < geocacheEntities.length; i++) {
      var entity = geocacheEntities[i]
      if (Cesium.defined(entity.billboard)) {
        // 调整垂直原点，使图钉位于地形上
        entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
        entity.billboard.image = '/assets/tagpark.png'
        // 禁用标签以减少混乱
        entity.label = undefined
        // 添加距离显示条件
        entity.billboard.distanceDisplayCondition =
          new Cesium.DistanceDisplayCondition(10.0, 20000.0)
      }
    }
})
```

#### 6. 加载运动路径，并开启动画

```js
var drone
dronePromise.then(function (dataSource) {
    viewer.dataSources.add(dataSource)
    drone = dataSource.entities.getById('Aircraft/Aircraft1')

    drone.model = {
      // uri: './assets/SampleData/Models/CesiumDrone.gltf',
      uri: './assets/SampleData/Models/ferrari2.gltf',
      minimumPixelSize: 128,
      maximumScale: 1000,
      silhouetteColor: Cesium.Color.WHITE,
      silhouetteSize: 2
    }

    drone.orientation = new Cesium.VelocityOrientationProperty(drone.position)
    drone.viewFrom = new Cesium.Cartesian3(0, -30, 30)
    viewer.clock.shouldAnimate = true
})
```

### 运行项目

1. 本地克隆

```
git clone git@gitee.com:Aikaid-yibo/vue3-cesium-smart-city.git
```

2. 下载依赖

```
npm install
```

3. 启动项目

```js
npm run dev
或
pnpm dev
```