加载3dTiles

一、创建服务器（看第一篇笔记）

二、加载建筑物

在Cesium中建筑物信息的加载需要自己添加数据到Cesium ion中然后使用的，为了测试Cesime封装了几个数据，我们已纽约的一个岛为例。

1、将视角定位在纽约上空

// 坐标设置在纽约，这样会有默认的3dTiles数据
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
viewer.scene.camera.setView({
    destination: initialPosition,
    orientation: initialOrientation,
    endTransform: Cesium.Matrix4.IDENTITY
});

2、加载建筑物

/ 加载3DTiles数据，纽约进行封装了
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(5741)}))

3、更改建筑物样式

// 设置建筑物的样式
var heightStyle = new Cesium.Cesium3DTileStyle({
color:{
    conditions:[
    ["${height} >= 300","rgba(45,0,75,0.5)"],
    ["${height} >= 200","rgb(102,71,151)"],
    ["${height} >= 100","rgb(170,162,204)"],
    ["${height} >= 50","rgb(224,226,238)"],
    ["${height} >= 25","rgb(252,230,200)"],
    ["${height} >= 10","rgb(248,176,87)"],
    ["${height} >= 5","rgb(198,106,11)"],
    ["true","rgb(102,71,151)"]
    ]
    }
});

// 将默认样式改为自定义样式
city.style = heightStyle;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="Build/Cesium/Cesium.js"></script>
        <link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <style>
            body{
                border: 0px;
                margin: 0px;        
            }
            #cesiumContainer {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
        <script>
            //加载谷歌中国卫星影像，谷歌地球商业版，需要翻墙，报跨域资源请求错误
            var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"; 
            var Google = new Cesium.UrlTemplateImageryProvider({url:url})
            
            //Viewer第一个参数容器就是需要上面的div容器承载
            var viewer = new Cesium.Viewer('cesiumContainer',{
              // 将图层选择的控件关掉，才能添加其他影像数据
              baselLayerPicker:false,
              imageryProvider:Google
            });

            // 坐标设置在纽约，这样会有默认的3dTiles数据
            var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
            var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
            viewer.scene.camera.setView({
                destination: initialPosition,
                orientation: initialOrientation,
                endTransform: Cesium.Matrix4.IDENTITY
            });

            
            // 加载3DTiles数据，纽约进行封装了
            var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(5741)}))
            
         
            // 设置建筑物的样式
            var heightStyle = new Cesium.Cesium3DTileStyle({
                color:{
                    conditions:[
                      ["${height} >= 300","rgba(45,0,75,0.5)"],
                      ["${height} >= 200","rgb(102,71,151)"],
                      ["${height} >= 100","rgb(170,162,204)"],
                      ["${height} >= 50","rgb(224,226,238)"],
                      ["${height} >= 25","rgb(252,230,200)"],
                      ["${height} >= 10","rgb(248,176,87)"],
                      ["${height} >= 5","rgb(198,106,11)"],
                      ["true","rgb(102,71,151)"]
                    ]
                }
            });

            // 将默认样式改为自定义样式
            city.style = heightStyle;
            
        </script>
    </body>
</html>

猜你喜欢