數字孿生城市三維地圖簡介
ESMap 城市三維地圖提供了各種各樣的高精度、有趣又炫酷的三維模型，比如建築、樹木、車輛、人員等等，而且還支持各種各樣炫酷的動畫，比如模型的移動、旋轉、閃爍、發光等等。相信很多小伙伴已經迫不及待地想知道如何實現這些動畫，將這些動畫添加到自己的城市三維地圖中，下面就讓小編帶你來看看吧！
城市三維地圖初始化
任何炫酷的動畫效果都離不開地圖的依托，由於前面已經介紹過如何初始化 ESMap 城市三維地圖，這里就不過多贅述。如果你還不了解地圖初始化如何操作，可以查看這篇指南 ESMap 城市三維地圖開發指南（上） 或者前往 ESMap 城市三維地圖 SDK 開發文檔。
城市三維地圖三維模型創建
本文以小車模型為例，說明如何在地圖中創建三維模型和實現模型動畫。
- 新建一個三維模型圖層（由於數據加載、頁面渲染的問題，創建三維模型代碼要寫在地圖加載完成事件
map.on('loadComplete')之后）
var floorLayer = map.getBuildingById(0).getFloor(1);
var layer = new esmap.ESLayer(esmap.ESLayerType.MODEL3D);
- 創建一個三維模型標注實例
var url = './model/bus2/gongjiaoche.gltf';
var marker3d = new esmap.ES3DMarker({
x: x, //x坐標
y: y, //y坐標
id: 2018, //自定義id標識
name: "myTree", //自定義name
url: url, //模型的文件地址
size: 1, //尺寸
angle: 0, //旋轉角
height: 0, //高度
showLevel: 16, //地圖縮放等級達到多少時隱藏
spritify: false //是否跟隨地圖縮放更新大小
});
- 將三維模型實例添加到樓層對象
layer.addMarker(marker); //將標注添加到圖層上
floor.addLayer(layer);
最終創建的小車模型如下圖所示：
城市三維地圖三維模型動畫實現
模型移動
- 實現（其中
marker3d為前面創建的三維模型標注實例）
marker3d.moveTo({
x: 12683603.861957192, y: 2574670.255345741
})
- 效果展示
模型旋轉
- 實現
marker3d.rotateTo({
angle:30 //絕對值，角度
//time:0.6 //跳躍時間，一般省略
})
- 效果展示
模型跳躍
- 實現
marker3d.jump({
times:3, //次數
height:8 //高度
// time:1, //跳躍時間，一般省略
//delay:0 //延遲幾秒執行
})
- 效果展示
模型放大縮小
- 實現
marker3d.setScale(2);
marker3d.restoreScale();
- 效果展示
模型沿着路徑移動
- 實現
var points = [
{
x: 12683435.841512972,
y: 2557888.6579067316,
fnum: 1,
// offset:0
},
{
x: 12683433.708513774,
y: 2557872.0505466303,
fnum: 1,
// offset:0
}];
marker3d.movePath({
//time:10, //在指定時間完成移動。與speed參數二選一
speed: 10, //速度，設置此項則忽略time
loop: true, //是否循環執行
orientToPathDegree:0, //物體移動沿向路徑方向的角度
path: points, //路徑點集
offsetHeight: 0, //移動時的高度
followPosition:true,//第一人稱視角，跟隨移動位置
followScaleLevel:1,//第一人稱視角，跟隨縮放地圖大小
viewTiltAngle:map.maxPolarAngle,//第一人稱視角，地圖俯仰角
followAngle:true, //第一人稱視角，根據路徑來動態變換地圖角度
orientToPath:true, //物體移動時是否沿向路徑方向
angle:0, //物體移動沿向路徑方向的角度
complete: function() {
//動畫執行完成回調事件
},
onMoving: function(e) {
//路徑移動實時回調
//獲取模型移動中的實時位置
console.log(e)
},
});
- 效果展示
更多詳細的三維模型動畫實現，可以前往 ESMap 城市三維地圖 SDK 開發文檔 查看。
三維模型顯示、隱藏及刪除
- 三維模型隱藏
//隱藏圖層
layer.visible=false;
- 三維模型刪除
//樓層上根據名字刪除圖層
floorLayer.removeLayersByNames("name");
//樓層上根據類型刪除圖層
floorLayer.removeLayersByTypes(esmap.ESLayerType.MODEL3D);
總結
以上就是使用 ESMap 城市三維地圖實現炫酷的三維模型動畫的全部過程，想要體驗更多 ESMap 城市三維地圖的功能，歡迎前往 ESMap 在線開發。