cesium czml 3d模型动画

该方法可实现百度上拾取的经纬度,在你cesium自定义3d tiles瓦片场景中,添加3d (gltf)模型贴地行走动画,3d(gltf)上面可以有标牌显示模型名字

  //starLng(起始点经度), startLat(起始点纬度), endLng(结束点经度), endLat(结束点纬度)

*地图坐标转换参考文章https://www.jianshu.com/p/2ec37020041e

function addCarModel(starLng, startLat, endLng, endLat) {

var sa1 = bd09togcj02(starLng, startLat);    //转换拿到的百度经度为火星坐标        

var sa2 = gcj02towgs84(sa1[0], sa1[1]);      //转换拿到的百度纬度为火星坐标

var ea1 = bd09togcj02(endLng, endLat);     //转换拿到的火星经度为wgs-84坐标

var ea2 = gcj02towgs84(ea1[0], ea1[1]);     //转换拿到的火星纬度为wgs-84坐标

var pos1 = Cesium.Cartesian3.fromDegrees(sa2[0], sa2[1]);   

var pos2 = Cesium.Cartesian3.fromDegrees(ea2[0], ea2[1]);      

var carCzml = [{

id: "document",

version: "1.0",

clock: {

interval: "2018-07-19T15:18:00Z/2018-07-19T15:18:30Z",

currentTime: "2018-07-19T15:18:00Z",

// multiplier: 5,

// range: "LOOP_STOP",

// step: "SYSTEM_CLOCK_MULTIPLIER"

}

},

{

id: "car1",

model: {

gltf: "img/car03.glb",

scale: 6.0,

minimumPixelSize: 168,

maximumScale: 200000,

},

label: {

text: "汽车001",

fillColor: {

rgba: [255, 254, 249, 255],

},

font: "14pt Lucida Console",

horizontalOrigin: "LEFT",

pixelOffset: {

cartesian2: [-30, -64],

},

show: true,

style: "FILL",

showBackground: true,

backgroundColor: {

rgba: [252, 12, 0, 200],

}

},

position: {

interpolationAlgorithm: "LINEAR",

forwardExtrapolationType: "HOLD",

cartesian: [

"2018-07-19T15:18:00Z", pos1.x, pos1.y, pos1.z,

"2018-07-19T15:18:30Z", pos2.x, pos2.y, pos2.z

]

}

},

{

id: "Polyline",

polyline: {

positions: {

cartesian: [

pos1.x, pos1.y, pos1.z,

pos2.x, pos2.y, pos2.z

]

},

material: {

polylineOutline: {

color: {

rgba: [255, 255, 0, 255]

},

outlineColor: {

rgba: [0, 0, 0, 255]

},

outlineWidth: 2

}

},

width: 10,

clampToGround: true

}

}

];

var scene = viewer.scene;

var clock = viewer.clock;

var entity;

var positionProperty;

// czml加载到场景中

var carModel = viewer.dataSources.add(Cesium.CzmlDataSource.load(carCzml)).then(function(dataSource) {

entity = dataSource.entities.getById("car1");

positionProperty = entity.position;

entity.orientation = new Cesium.VelocityOrientationProperty(entity.position);  

});

if (scene.clampToHeightSupported) {

  tiles.initialTilesLoaded.addEventListener(start);    //tiles为自定义3d场景瓦片

} else {

  window.alert("浏览器不支持贴地!");

}

function start() {

  clock.shouldAnimate = true;

  var objectsToExclude = [entity];

  scene.postRender.addEventListener(function () {

    var position = positionProperty.getValue(clock.currentTime);

    entity.position = scene.clampToHeight(position, objectsToExclude);

  });

}

return carModel;

}



你可能感兴趣的:(cesium czml 3d模型动画)