cesium 添加model及其增刪改

cesium添加模型非常簡單,通過其Cesium.model.接口觉渴,可以添加基于GLTF的模型介劫,這里我們通過Cesium.Model.fromGltf()方法。來添加我們的模型案淋。測試模型都是用網(wǎng)上的座韵,3dmax的需要導(dǎo)出成fbx之后,通過win10自帶的3d模型查看器加入到地圖上的哎迄。


API接口

我們用不到所有的只需要添加進(jìn)來

var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                    url : Model_URL,
                    scale : Model_Scale,
                    heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
                    color:Cesium.Color.fromCssColorString('#ffffff'),

                }));

其中URL是模型的地址回右,scale是模型的尺寸,heightReference是模型高度的參考漱挚。color是模型的顏色(顏色會與材質(zhì)融合)
接下來我們要把它添加到地圖上我們指定的地點(diǎn)翔烁。

function update3dtilesMaxtrix(model,params) {
            //旋轉(zhuǎn)
            var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
            var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
            var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
            var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
            var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
            var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
            //平移
            var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
            var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            //旋轉(zhuǎn)、平移矩陣相乘
            Cesium.Matrix4.multiply(m, rotationX, m);
            Cesium.Matrix4.multiply(m, rotationY, m);
            Cesium.Matrix4.multiply(m, rotationZ, m);
            //賦值給model
            model.modelMatrix = m;
        }

由于我們直接添加的primitives旨涝,所以我們可以直接修改model的投影矩陣蹬屹,來直接放置到我們需要的地圖上。我們可以點(diǎn)擊地球來獲取我們需要的位置白华。

var handler1 = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        handler1.setInputAction(function (movement) {
            cancelfocus();
            if(addModel == true){
                let ray = viewer.camera.getPickRay(movement.position);
                let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var lat = Cesium.Math.toDegrees(cartographic.latitude);
                var lng = Cesium.Math.toDegrees(cartographic.longitude);
                var alt1 = cartographic.height;

                var params= {
                    tx: lng,  //模型中心X軸坐標(biāo)(經(jīng)度慨默,單位:十進(jìn)制度)
                    ty: lat,    //模型中心Y軸坐標(biāo)(緯度,單位:十進(jìn)制度)
                    tz: alt1,    //模型中心Z軸坐標(biāo)(高程弧腥,單位:米)
                    rx: 0,    //X軸(經(jīng)度)方向旋轉(zhuǎn)角度(單位:度)
                    ry: 0,    //Y軸(緯度)方向旋轉(zhuǎn)角度(單位:度)
                    rz: 0      //Z軸(高程)方向旋轉(zhuǎn)角度(單位:度)
                };

                var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                    url : Model_URL,
                    scale : Model_Scale,
                    heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
                    color:Cesium.Color.fromCssColorString('#ffffff'),

                }));
                model.type = "model";
                model.tx = lng;
                model.ty = lat;
                model.tz = alt1;
                model.rx = 0;
                model.ry = 0;
                model.rz = 0;
                update3dtilesMaxtrix(model,params);

                addModel = false;
            }
       }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

這樣我們就可以成功的將模型添加到我們點(diǎn)擊在地球上的位置了厦取,或者我們還可以移動我們的model只需在鼠標(biāo)事件中獲取我們需要的位置坐標(biāo)就行了,注意我們再將其添加到模型高度上時(shí)管搪,他是將自身也會算入其中虾攻,會導(dǎo)致越來越高(除非快速移動到另外一個(gè)模型上)铡买。但是如果根據(jù)
地形就不會有這個(gè)問題。但是就無法添加到模型上去(取舍看自己需求)霎箍。所以我添加的時(shí)候因?yàn)椴粫x中model所以是獲取模型的高度奇钞,之后進(jìn)行平移時(shí),也是獲取的模型高度漂坏,但是不改變自身model的模型高度景埃,高度獲取的就是添加時(shí)存入到model里的高度。

let ray = this.viewer.camera.getPickRay(movement.endPosition);//movement是屏幕坐標(biāo)
            let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);//獲取在地球上的點(diǎn)
            console.log(cartesian);

            if(typeof pointDraged.primitive.type =="undefined"){
                return;
            }

            var cartesian2 = viewer.scene.pickPosition(movement.endPosition);//獲取鼠標(biāo)點(diǎn)擊上模型的坐標(biāo)
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var ellipsoid = viewer.scene.globe.ellipsoid;
            var a1 = ellipsoid.cartesianToCartographic(cartesian);
            var lat = Cesium.Math.toDegrees(cartographic.latitude);
            var lng = Cesium.Math.toDegrees(cartographic.longitude);
            var alt1 = cartographic.height;

這樣在通過上面的修改model矩陣代碼就能夠?qū)ode進(jìn)行移動了顶别。
刪除model我是通過監(jiān)聽鍵盤的退格事件來完成的谷徙。

function getFlagForKeyCode(keyCode) {
        switch (keyCode) {
            case 8:
                if(typeof SelModel != "undefine"){
                    viewer.scene.primitives.remove(SelModel);
                    SelModel = "";
                }
                return "Backspace";
            default:
                return undefined;
        }
    }
    document.addEventListener('keydown', function (e) {
        var flagName = getFlagForKeyCode(e.keyCode);
    }, false);
    document.addEventListener("keyup", function (e) {
        var flagName = getFlagForKeyCode(e.keyCode);
    }, false);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市驯绎,隨后出現(xiàn)的幾起案子蒂胞,更是在濱河造成了極大的恐慌,老刑警劉巖条篷,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蛤织,居然都是意外死亡赴叹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進(jìn)店門指蚜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來乞巧,“玉大人,你說我怎么就攤上這事摊鸡≌烂剑” “怎么了?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵免猾,是天一觀的道長是辕。 經(jīng)常有香客問我,道長猎提,這世上最難降的妖魔是什么获三? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮锨苏,結(jié)果婚禮上疙教,老公的妹妹穿的比我還像新娘。我一直安慰自己伞租,他們只是感情好贞谓,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著葵诈,像睡著了一般裸弦。 火紅的嫁衣襯著肌膚如雪祟同。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天烁兰,我揣著相機(jī)與錄音耐亏,去河邊找鬼。 笑死沪斟,一個(gè)胖子當(dāng)著我的面吹牛广辰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播主之,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼择吊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了槽奕?” 一聲冷哼從身側(cè)響起几睛,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎粤攒,沒想到半個(gè)月后所森,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡夯接,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年焕济,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盔几。...
    茶點(diǎn)故事閱讀 39,739評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晴弃,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逊拍,到底是詐尸還是另有隱情上鞠,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布芯丧,位于F島的核電站芍阎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏缨恒。R本人自食惡果不足惜能曾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肿轨。 院中可真熱鬧寿冕,春花似錦、人聲如沸椒袍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驹暑。三九已至玫恳,卻和暖如春辨赐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背京办。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工掀序, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惭婿。 一個(gè)月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓不恭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親财饥。 傳聞我的和親對象是個(gè)殘疾皇子换吧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內(nèi)容