|
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.csdn.net/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. 单页面完整代码
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;
});
#cesiumContainer {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
position: absolute;
}
|