cesium的路径显示(label,billboard,czml路径)

2022-12-08,,

实现功能:所经过游玩地点的标注,并通过线路动态显示游玩路线

var viewer = new Cesium.Viewer("cesiumContainer",{     baseLayerPicker:false,     imageryProvider:goo,     terrainProvider:new Cesium.createWorldTerrain()     });

#载入kml数据,并设置label及billboard样式 var kmlPromiese = new Cesium.KmlDataSource.load("./label.kml"); kmlPromiese.then(function(datasoruce){ viewer.dataSources.add(datasoruce); var entities = datasoruce.entities.values; for (var i = 0; i < entities.length; i++) { var entity = entities[i]; entity.billboard.show=true; //billboard广告牌的样式 entity.billboard.image="./billboard.jpg"; entity.billboard.scale=1.5; //原点相对于物体的垂直位置,有Top、Buttom、Baseline、Center,Api中有图例 entity.billboard.verticalOrigin =Cesium.VerticalOrigin.CENTER; //广告牌可显示的距离范围 entity.billboard.distanceDisplayCondition= new Cesium.DistanceDisplayCondition(0,10000); entity.label.show =true; //标签字体大小 entity.label.font="30px"; entity.label.showBackground=true; entity.label.backgroundColor =new Cesium.Color(1,0,0,0.5); entity.label.fillColor =new Cesium.Color(0,0,1,0.5); entity.label.outlineWidth=10; entity.label.outlineColor = new Cesium.Color(0,1,1,0.5); //entity的name即为点击entity弹出的infoxBox的标题 entity.name="这是一个新项目"; //位置,先求原始位置,cartesian比如(-2636040.9583333777, 4766650.9492283035, 3307150.865245503) var ent_cartesianPos = entity.position.getValue(Cesium.JulianDate.now()); //笛卡尔三维转至地理坐标,Cartographic(longitude, latitude, height),范围分布为弧度,弧度,米,height为above the ellipsoid //Cesium.Cartographic.fromCartesian(cartesian, ellipsoid, result),球体默认为 Ellipsoid.WGS84 //另一个常用方法Cesium.Cartographic.toCartesian(cartographic, ellipsoid, result) var entity_cartoPos = Cesium.Cartographic.fromCartesian(ent_cartesianPos); var longitute = Cesium.Math.toDegrees(entity_cartoPos.longitude).toFixed(3); var latitude = Cesium.Math.toDegrees(entity_cartoPos.latitude).toFixed(3); entity.name="白小宝旅游"+(i+1)+"处"; entity.description= "坐标地理位置为:"+"经度"+longitute+"度,纬度"+latitude+"度"+";游玩内容描述待编写"; //entity.description = "位置"+ent_cartesianPos; //alert(entity) ; } });

#鼠标点击billboard显示高亮,离开后恢复正常
//获取控制器实例
var
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); var previous_Entity=undefined; //调用setInputAction方法
handler.setInputAction(
function(movement){
//获取pick的object,如果使用click类型的鼠标操作,则相应的选择pick和pick.position
var pickOdv = viewer.scene.pick(movement.endPosition);
//if elese的简写
var pick_entity = (Cesium.defined(pickOdv)) ? pickOdv.id :undefined;
//移动到一个biilboard显示高亮,移出后,移动到下一个时候,先清空上一个的效果:
在这个{}外设置一个变量a,每次移动最后将实例赋予这个变量a,再下一次function的开始清空a的样式设置
if(Cesium.defined(previous_Entity)) { previous_Entity.billboard.scale=1; previous_Entity.billboard.color=Cesium.Color.WHITE; } if(Cesium.defined(pickOdv)){ pick_entity.billboard.scale=3; pick_entity.billboard.color= Cesium.Color.ORANGE; previous_Entity = pick_entity; } },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

#
载入移动设施,czml本身加载并不难,难的是做出这个caml数据,初步理解这个数据里面有样式、经过地理位置的时间的地理位置(cartesian格式) var dronePromise = new Cesium.CzmlDataSource.load('./Vehicle.czml'); dronePromise.then(function(dataSource) { viewer.dataSources.add(dataSource); }); viewer.camera.flyTo(dronePromise);
样式做的丑O(∩_∩)O~