Cesium三维地球标注

1、三维地球上添加图层

    添加的图层会覆盖该区域的地图信息

//添加图层
var layers = viewer.scene.imageryLayers;
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : 'img/11.png',
    rectangle : Cesium.Rectangle.fromDegrees(-18, -18,18, 18)//矩形两个顶点的想经纬度值
}));

2、标注

    a、添加标注

        在viewer的实体对象中有add()方法,通过add()方法去添加标注,在add()中传入对象,确定标注的配置对象,标注样式可以是多种多样,下面举了点,广告牌,文本三种标注。

viewer.entities.add({
        id:id,
        name : name,
        position : Cesium.Cartesian3.fromDegrees(point.lng, point.lat),
         //点样式
        point : {
            pixelSize : 5,
            color : Cesium.Color.RED,
            outlineColor : Cesium.Color.WHITE,
            outlineWidth : 1
        },
         //立广告牌
         /*billboard :{
             image : 'img/11.png',
             show : true, // default
             width : 25, // default: undefined
             height : 25 // default: undefined
         },*/
         //字体标签样式
        label : {
            text : text,
            font : '14pt',
            color : Cesium.Color.RED,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth : 1,
            //垂直位置
            //verticalOrigin : Cesium.VerticalOrigin.BUTTON,
            //中心位置
            pixelOffset : new Cesium.Cartesian2(0, 20)
        }
    });

  b、添加的标注本身有默认事件:左键单击选中标注实体,双击镜头会直接跳转到标注地点。如果你不想要这种效果,你可以取消默认事件,自己定义。下面添加左键单击选取拾取,双击将相机飞到该实体上空一定高度中,具体步骤如下

    1、取消双击默认效果

viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

   2、自定义点击事件

function pickAndTrackObject(e) {
    //双击操作
     
}
function pickAndSelectObject(e) {
    //单击操作
    
}
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndSelectObject,Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndTrackObject,Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
3、根据屏幕坐标拾取实体坐标
//拾取实体
function pickEntity(viewer,position) {
    var picked=viewer.scene.pick(position);
    if(picked){
        var id=Cesium.defaultValue(picked.id,picked.primitive.id);
        if(id instanceof Cesium.Entity){
            return id;
        }
    }
    return undefined;
}
4、拾取到的实体坐标系为笛卡尔直角坐标系,将相机飞过去,需要操作经纬度坐标,中间需要转化坐标系
//将笛卡尔直角坐标系转化为经纬度坐标系
         var wgs84=viewer.scene.globe.ellipsoid.cartesianToCartographic(entity.position._value);
         //转化为经纬度
         var long=Cesium.Math.toDegrees(wgs84.longitude);
         var lat=Cesium.Math.toDegrees(wgs84.latitude); 

完整代码如下:

function pickAndTrackObject(e) {
    //双击操作
     var entity=pickEntity(viewer,e.position);
     if(entity){
         //将笛卡尔直角坐标系转化为经纬度坐标系
         var wgs84=viewer.scene.globe.ellipsoid.cartesianToCartographic(entity.position._value);
         //转化为经纬度
         var long=Cesium.Math.toDegrees(wgs84.longitude);
         var lat=Cesium.Math.toDegrees(wgs84.latitude);
         camera.flyTo( {
             destination : Cesium.Cartesian3.fromDegrees(long, lat, 2000 ),//使用WGS84
             orientation : {
                 heading : Cesium.Math.toRadians( 0 ),
                 pitch : Cesium.Math.toRadians( -90 ),
                 roll : Cesium.Math.toRadians( 0 )
             },
             duration : 3,//动画持续时间
             complete : function()//飞行完毕后执行的动作
             {
                 // addEntities();
                 canCont=true;
             },
             pitchAdjustHeight: -90, // 如果摄像机飞越高于该值,则调整俯仰俯仰的俯仰角度,并将地球保持在视口中。
             maximumHeight:5000 // 相机最大飞行高度
         } );
     }
}
function pickAndSelectObject(e) {
    //单击操作
    viewer.selectedEntity= pickEntity(viewer,e.position)
}
//拾取实体
function pickEntity(viewer,position) {
    var picked=viewer.scene.pick(position);
    if(picked){
        var id=Cesium.defaultValue(picked.id,picked.primitive.id);
        if(id instanceof Cesium.Entity){
            return id;
        }
    }
    return undefined;
}
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndSelectObject,Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(pickAndTrackObject,Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); 

猜你喜欢

转载自blog.csdn.net/zhou8023ddw/article/details/80811630