cesium 模型知识点.txt

痛定思痛。 2023-01-15 03:59 118阅读 0赞

cesium 模型知识点.txt

https://blog.csdn.net/weixin\_42193179/article/details/88050185  
分类专栏： cesium  
版权  
1.  
模型(tileset)是由瓦片(tile)组成的。  
瓦片(tile)是由构件(feature)构成的。  
即，从大到小从宏观到微观：模型(tileset) -> 瓦片(tile)-> 构件(feature)。  
比方说，一栋楼(模型)是由多个楼层(瓦片)组成的，每一层是由多个房间(构件)组成的。  
模型(瓦片的集合/tileset) > 瓦片(构件的集合/tiles) > 构件(貌似是模型中的最小构件单位/feature)。

2.  
加载模型及相关操作。cesiumLab vs marsgis  
cesiumLab代码：  
方式一、  
var longitude = 116.3920432054884;  
var latitude = 39.908812421212374;  
var height = 42.570401483462206;  
var heading = 0;  
var tileset = new Cesium.Cesium3DTileset(\{  
    url: 'http://localhost:9002/api/folder/8dcd7469fa524370833672fa4ea560ec/tileset.json'  
\});  
viewer.scene.primitives.add(tileset);  
tileset.readyPromise.then(function (argument) \{  
    var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);  
    var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);  
    var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));  
    Cesium.Matrix4.multiply(mat, rotationX, mat);  
    tileset.\_root.transform = mat;  
    viewer.camera.flyTo(\{destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)\});  
\});  
方式二、  
location: \{  
    longitude: 116.39123,  
    latitude: 39.90691,  
    height: 0  
\},  
heading: 0,  
scale: 1,  
range: 500,

add3dtiles: function() \{  
    this.tileset = new Cesium.Cesium3DTileset(\{  
        url: this.url  
    \});  
    var self = this;  
    this.viewer.scene.primitives.add(this.tileset);  
    var infowindow = this.$refs.infowindow;  
    this.tileset.readyPromise.then(function(tileset) \{  
        //获得模型的包围盒大小  
        self.range = tileset.boundingSphere.radius;  
        //如果tileset自带世界矩阵矩阵，那么计算放置的经纬度和heading  
        var mat = Cesium.Matrix4.fromArray(tileset.\_root.transform);  
        //原来的矩阵的逆  
        self.orginMatrixInverse = Cesium.Matrix4.inverse(mat, new Cesium.Matrix4());

var pos = Cesium.Matrix4.getTranslation(mat, new Cesium.Cartesian3());  
        var wpos = Cesium.Cartographic.fromCartesian(pos);  
        if (wpos) \{  
            self.location.longitude = Cesium.Math.toDegrees(wpos.longitude);  
            self.location.latitude = Cesium.Math.toDegrees(wpos.latitude);  
            self.location.height = wpos.height;

//取旋转矩阵  
            var rotmat = Cesium.Matrix4.getRotation(mat, new Cesium.Matrix3());  
            //默认的旋转矩阵  
            var defrotmat = Cesium.Matrix4.getRotation(Cesium.Transforms.eastNorthUpToFixedFrame(pos), new Cesium.Matrix3());

//计算rotmat 的x轴，在defrotmat 上 旋转  
            var xaxis = Cesium.Matrix3.getColumn(defrotmat, 0, new Cesium.Cartesian3());  
            var yaxis = Cesium.Matrix3.getColumn(defrotmat, 1, new Cesium.Cartesian3());  
            var zaxis = Cesium.Matrix3.getColumn(defrotmat, 2, new Cesium.Cartesian3());

var dir = Cesium.Matrix3.getColumn(rotmat, 0, new Cesium.Cartesian3());

dir = Cesium.Cartesian3.cross(dir, zaxis, dir);  
            dir = Cesium.Cartesian3.cross(zaxis, dir, dir);  
            dir = Cesium.Cartesian3.normalize(dir, dir);

var heading = Cesium.Cartesian3.angleBetween(xaxis, dir);  
            var ay = Cesium.Cartesian3.angleBetween(yaxis, dir);  
            if (ay > Math.PI \* 0.5) \{  
                heading = 2 \* Math.PI - heading;  
            \}  
            this.heading = Cesium.Math.toDegrees(heading);

self.initEditor();  
        \}  
        //如果tileset不带世界矩阵，那么更新  
        else \{  
            //self.initEditor();  
            // self.inputPos();  
        \}

self.locate();  
    \}).otherwise(function(err) \{  
        infowindow.info("3dtiles加载失败:" + err);  
    \});  
\},  
locate: function() \{  
    if (this.tileset.boundingSphere) \{  
        this.viewer.camera.flyToBoundingSphere(this.tileset.boundingSphere);  
    \} else \{  
        this.viewer.camera.flyTo(\{  
            destination: Cesium.Cartesian3.fromDegrees(this.location.longitude, this.location.latitude, this.location.height + 1000)  
        \});  
    \}  
\},  
resetStyle: function() \{  
    if (this.tileset) \{  
        this.tileset.style = undefined;  
    \}  
\},  
locateNode: function(nodeid, nodesphere) \{  
    if (nodesphere\[3\] <= 0)  
        return;  
    //飞行过去  
    console.log(nodesphere);  
    var center = new Cesium.Cartesian3(nodesphere\[0\], nodesphere\[1\], nodesphere\[2\]);

if (this.orginMatrixInverse && this.tileset.\_root.transform) \{  
        var mat = Cesium.Matrix4.multiply(this.tileset.\_root.transform, this.orginMatrixInverse, new Cesium.Matrix4());  
        center = Cesium.Matrix4.multiplyByPoint(mat, center, new Cesium.Cartesian3());  
    \}

marsgis代码：  
showModel: function (t) \{  
    null != this.tileset && (viewer.scene.primitives.remove(this.tileset), this.tileset = null), this.tileset = new Cesium.Cesium3DTileset(\{  
        url: t,  
        maximumScreenSpaceError: 1  
    \}), this.viewer.scene.primitives.add(this.tileset);  
    var i = this;  
    this.tileset.readyPromise.then(function (e) \{  
        console.log("e:", e);  
        console.log("e.\_root:", e.\_root);  
        console.log("e.\_root.transform:", e.\_root.transform);  
        // e.\_root.transform: c \{0: -0.890646599990569, 1: -0.454696199594014, 2: 0, 3: 0, 4: 0.28540106310396, 5: -0.559035872114604, 6: 0.778476156904111, 7: 0, 8: -0.353970150018852, 9: 0.693347142320371, 10: 0.627674177525097, 11: 0, 12: -2254681.9484696, 13: 4416409.93097713, 14: 3998093.165514, 15: 1\}  
        e.\_root && e.\_root.transform && (i.orginMatrixInverse = Cesium.Matrix4.inverse(e.\_root.transform, new Cesium.Matrix4)), i.location = mars3d.util.tileset.getCenter(e, !0), (i.location.z < -1e3 || 1e4 < i.location.z) && (i.location.z = 0), i.toView(), i.editor.update(\{  
            position: Cesium.Cartesian3.fromDegrees(i.location.x, i.location.y, i.location.z),  
            heading: Cesium.Math.toRadians(i.location.heading),  
            range: .9 \* e.boundingSphere.radius,  
            scale: 1  
        \}), i.tileset.\_root.transform = i.editor.modelMatrix(), i.locate(), showSceneTree(t)  
    \}).otherwise(function (e) \{  
        throw e  
    \}), $("\#viewReset").hide()  
\},  
locate: function () \{  
    this.tileset.boundingSphere ? this.viewer.camera.flyToBoundingSphere(this.tileset.boundingSphere) : this.viewer.camera.flyTo(\{destination: Cesium.Cartesian3.fromDegrees(this.location.x, this.location.y, this.location.z + 1e3)\})  
\}

function resetStyle() \{  
    workModel.tileset.style = void 0  
\}

3.移除模型  
// 移除视图中的模型。  
// viewer.scene.primitives.removeAll();  
// viewer.scene.primitives.remove(this.tileset);

4.  
bim分层时的样式设置方法：  
var style = new Cesium.Cesium3DTileStyle();  
// 用自定义函数重写颜色表达式。  
style.color = \{  
    // 评估颜色。此处feature, result，会自动传参，无需自己操心。  
    evaluateColor : function(feature, result) \{  
        // 此函数貌似是多进程执行，效率极高。  
        // 上下两种方式均可。  
        // return  Cesium.Color.TRANSPARENT;  
        return Cesium.Color.clone(Cesium.Color.WHITE, result);  
    \}  
\};

示例函数如下：  
showOneFloor: function(floorName) \{  
    /\*此函数用于，设置模型样式，只展示当前层(floorName)。\*/  
    if (this.tileset) \{  
        var self = this;  
        // 以下要获取当前层的样式，并把当前模型设置成该样式。  
        $.ajax(\{  
            // 类似这样："./data/3dtiles/bimYIYUAN/floorsNodesStyle/16F.json"  
            url: this.url.slice(0,this.url.lastIndexOf('/')+1) + "floorsNodes/" + floorName + ".json",  
            dataType: 'json',  
            data: \{ x: new Date() \},  
            success: function(floor) \{  
                // floor，当前层的信息，包括层名及其子节点id。  
                var style = new Cesium.Cesium3DTileStyle();  
                // 用自定义函数重写颜色表达式。  
                style.color = \{  
                    // 评估颜色。此处feature, result，会自动传参，无需自己操心。  
                    evaluateColor : function(feature, result) \{  
                        var featureId = feature.getProperty("id");  
                        if(!(featureId in floor.childrenNodesIds))\{  
                            // 上下两种方式均可。  
                            // 非当前层的feature的样式。  
                            // return  Cesium.Color.TRANSPARENT;  
                            return Cesium.Color.clone(Cesium.Color.TRANSPARENT, result);  
                        \}  
                        else \{  
                            // 当前层的feature的样式。  
                            // return  Cesium.Color.WHITE;  
                            return Cesium.Color.clone(Cesium.Color.WHITE, result);  
                        \}  
                    \}  
                \};  
                // 设置当前模型的样式。  
                self.tileset.style = style;  
            \}  
        \});  
    \}  
\},

5.  
展示全部模型:  
showCompleteModel: function() \{  
    /\*此函数用于，重置模型到原始样式，即展示整个模型。\*/  
    if (this.tileset) \{  
        this.tileset.style = undefined;  
        this.layerWork.centerAt(1);  
    \}  
\}  
  
原文链接：https://blog.csdn.net/weixin\_42193179/article/details/88050185