vite+vue3.0+cesium ----04 使用纽约自带的城市模型演示如何修改城市白模颜色属性

vite+vue3.0+cesium ----04 使用纽约自带的城市模型演示如何修改城市白模颜色属性

1. 定义你的viewer

  let viewer = new Cesium.Viewer("cesiumContainer", {
    //cesium的查看器的基本属性
    baseLayerPicker: true, //配置图层底图的图标
    // imageryProvider:custom  ,//使用上面自己配置的底图
    terrainProvider: Cesium.createWorldTerrain({
      //设置cesium的世界地形
      requestVertexNormals: true, //地形的开启
      requestWaterMask: true, //水面效果的开启
    }),
  });

如果无法成功创建viewer实例对象，可以参考第一篇文章 https://blog.youkuaiyun.com/weixin_43564810/article/details/129328096

2. 相机视角定位到纽约上空

  // 设置默认相机视角
  viewer.camera.setView({
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888), //纽约的地理坐标
    orientation: {
      heading: 0.6,
      pitch: -0.66,
    },
  });

3. 加载cesium自带的纽约白模数据

使用cesium的Cesium3DTileset调用cesium的75343纽约白模建筑群数据

  let city = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) })
  );

4. 定义白模数据的style样式 实现不同高度的白模数据展示不同的颜色

使用conditions定义数据在不同高度时候展示出来不同的颜色

  // 定义3d样式
  let heightStyle = new Cesium.Cesium3DTileStyle({
    color: {
      // 条件判断建筑物的颜色
      conditions: [
        ["${Height} >= 300", "rgba(45,0,75,0.5)"],
        ["${Height}>=200", "rgb(102,71,151)"],
        ["${Height}>=100", "rgba(170,162,204,0.5)"],
        ["${Height}>=50", "rgb(224,226,238)"],
        ["${Height}>=25", "rgb(252,230,200)"],
        ["${Height}>=10", "rgba(248,176,87,0.5)"],
        ["${Height}>=5", "rgb(198,106,11)"],
        ["true", "rgb(127,59,8)"],
      ],
    },
  });

将引用的city对象的style修改为自定义的样式 实现不同高度建筑物以不同颜色进行展示

  city.style = heightStyle;

5. 单页面完整代码

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  // 配置cesium中的相关属性
  let custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//servicse.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });
  let viewer = new Cesium.Viewer("cesiumContainer", {
    //cesium的查看器的基本属性
    baseLayerPicker: true, //配置图层底图的图标
    // imageryProvider:custom  ,//使用上面自己配置的底图
    terrainProvider: Cesium.createWorldTerrain({
      //设置cesium的世界地形
      requestVertexNormals: true, //地形的开启
      requestWaterMask: true, //水面效果的开启
    }),
  });
  // 设置默认相机视角
  // viewer.camera.setView({
  //   destination: Cesium.Cartesian3.fromDegrees(113.318977, 23.114155, 2000),//广州坐标
  //   // 方向，俯视和仰视的视角
  //   orientation: {
  //     heading: Cesium.Math.toRadians(90), //坐标系旋转90度
  //     pitch: Cesium.Math.toRadians(-45), //设置俯仰角度为-45度
  //   },
  // });
  // 设置默认相机视角
  viewer.camera.setView({
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888), //纽约的地理坐标
    orientation: {
      heading: 0.6,
      pitch: -0.66,
    },
  });

  let city = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) })
  );

  // 定义3d样式
  let heightStyle = new Cesium.Cesium3DTileStyle({
    color: {
      // 条件判断建筑物的颜色
      conditions: [
        ["${Height} >= 300", "rgba(45,0,75,0.5)"],
        ["${Height}>=200", "rgb(102,71,151)"],
        ["${Height}>=100", "rgba(170,162,204,0.5)"],
        ["${Height}>=50", "rgb(224,226,238)"],
        ["${Height}>=25", "rgb(252,230,200)"],
        ["${Height}>=10", "rgba(248,176,87,0.5)"],
        ["${Height}>=5", "rgb(198,106,11)"],
        ["true", "rgb(127,59,8)"],
      ],
    },
  });

  city.style = heightStyle;
});
</script>

<style scoped>
#cesiumContainer {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  position: absolute;
}
</style>