基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼
這個(gè)地方是想實(shí)現(xiàn)一個(gè)什么效果呢?就是使用 cesium 在地圖上添加一個(gè)3D模型,然后實(shí)現(xiàn)拖拽效果。
添加基站模型
然后這篇博文介紹的主要不是添加模型,但是也簡(jiǎn)單把代碼直接粘貼過來吧,就不詳細(xì)說了。
// 添加基站模型 function addSite() { let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0); // 設(shè)置模型方向 let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), 0, 0); let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll); // 添加模型 let model = viewer.entities.add({ id: 'site', // 模型id position: position, // 模型位置 orientation: orientation, // 模型方向 model: { uri: './models/siteModel/scene.gltf', // 模型路徑,自己換成自己的模型 scale: 1, show: true, // 模型是否可見 }, description: '基站模型' // 添加模型描述 }); viewer.trackedEntity = model; // 視角切換到模型 }
上邊的代碼就完成了在界面上添加模型功能。
拖拽
其實(shí)拖拽就是給這個(gè)cesium加一個(gè)監(jiān)聽事件。
比如說這個(gè)拖拽的簡(jiǎn)單邏輯分析哈:
1、鼠標(biāo)按下事件,如果有模型的話,可以給模型設(shè)置一個(gè)顏色,知道按下選中的是哪個(gè)模型。
2、然后再監(jiān)聽鼠標(biāo)拖拽事件,獲取鼠標(biāo)拖拽的位置,賦值給模型。
3、鼠標(biāo)抬起事件,結(jié)束鼠標(biāo)移動(dòng)事件,然后把顏色改回去。
// 注冊(cè)事件 function setHandler() { handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 注冊(cè)鼠標(biāo)按下事件 handler.setInputAction((e) => { const pick = viewer.scene.pick(e.position); if (!Cesium.defined(pick)) { return; };// 如果點(diǎn)擊空白區(qū)域,則不往下執(zhí)行 viewer.scene.screenSpaceCameraController.enableRotate = false;// 將相機(jī)鎖定,不然后續(xù)移動(dòng)實(shí)體時(shí)相機(jī)也會(huì)動(dòng) pick.id.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED, 1) //設(shè)置顏色 // 注冊(cè)鼠標(biāo)拖拽事件 viewer.screenSpaceEventHandler.setInputAction((arg) => {// 為viewer綁定MOUSE_MOVE事件監(jiān)聽器(執(zhí)行函數(shù),監(jiān)聽的事件) const position = arg.endPosition;// arg有startPosition與endPosition兩個(gè)屬性,即移動(dòng)前后的位置信息:Cartesian2對(duì)象 const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);//將Cartesian2轉(zhuǎn)為Cartesian3 pick.id.position._value = cartesian }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 綁定鼠標(biāo)抬起事件 viewer.screenSpaceEventHandler.setInputAction(({ position }) => {//為viewer綁定LEFT_UP事件監(jiān)聽器(執(zhí)行函數(shù),監(jiān)聽的事件) viewer.scene.screenSpaceCameraController.enableRotate = true;// 取消相機(jī)鎖定 pick.id.model.color = null //設(shè)置顏色 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 解除viewer的MOUSE_MOVE事件監(jiān)聽器 }, Cesium.ScreenSpaceEventType.LEFT_UP) }, Cesium.ScreenSpaceEventType.LEFT_DOWN); }
完成了這就,就是這么的簡(jiǎn)單。
到此這篇關(guān)于基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼的文章就介紹到這了,更多相關(guān)Cesium拖拽3D模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見HTML5 Canvas特效濾鏡,并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js,程序源代碼如下,感興趣的朋友可以參考下哈2013-06-06JavaScript Window窗口對(duì)象屬性和使用方法
這篇文章主要介紹了JavaScript Window窗口對(duì)象屬性和使用方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01uni-app操作數(shù)據(jù)庫的三種方法總結(jié)
數(shù)據(jù)庫操作的,可以采用多方案,下面這篇文章主要給大家介紹了關(guān)于uni-app操作數(shù)據(jù)庫的三種方法,文中通過實(shí)例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(一)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03javascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05