Cesium通过AJAX加载并渲染Json文件保存数据

最新推荐文章于 2024-08-10 08:45:10 发布

Alice爱俪丝

最新推荐文章于 2024-08-10 08:45:10 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript Cesium webGIS 文章标签： Cesium Json Ajax Javascript

本文链接：https://blog.csdn.net/qq_18144905/article/details/81938666

版权

JavaScript 同时被 3 个专栏收录

52 篇文章 2 订阅

订阅专栏

Cesium

27 篇文章 16 订阅

订阅专栏

webGIS

25 篇文章 2 订阅

订阅专栏

var buding_info_entity = viewer.entities.add(new Cesium.Entity());
//*******************************添加pin标注***************************************//
function add_pin_fun(p_position,text){
    var pinBuilder = new Cesium.PinBuilder();    
    
    var questionPin = viewer_g.entities.add({
        parent :buding_info_entity,
        name : 'mark',
        position : Cesium.Cartesian3.fromDegrees(p_position[0],p_position[1],p_position[2]),
        billboard : {
            image : pinBuilder.fromText(text, Cesium.Color.fromBytes(  0, 0,0, 200 )  , 188).toDataURL(),
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            scale: 2, // default: 1.0
            //color: Cesium.Color.LIME, // default: WHITE
            //rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
            alignedAxis: Cesium.Cartesian3.ZERO, // default
            width: 40, // default: undefined
            height: 40 ,// default: undefined
            pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e1, 1.0, 1.5e2, 0.01)
        }
    });
    //buding_info_entity.add(questionPin);
}
//*******************************添加Lable标注***************************************//
function add_lable_fun(p_position,text){
    var color = Cesium.Color.YELLOW;
    var surfacePosition = Cesium.Cartesian3.fromDegrees(p_position[0],p_position[1],p_position[2]);
    var heightPosition = Cesium.Cartesian3.fromDegrees(p_position[0],p_position[1],100+p_position[2]*5);

    //WebGL Globe only contains lines, so that's the only graphics we create.
    var polyline = new Cesium.PolylineGraphics();
    polyline.material = new Cesium.ColorMaterialProperty(color);
    polyline.width = new Cesium.ConstantProperty(2);
    polyline.followSurface = new Cesium.ConstantProperty(false);
    polyline.positions = new Cesium.ConstantProperty([surfacePosition, heightPosition]);

    var  unitMarkerbuildingEntity = viewer.entities.add({   
        parent :buding_info_entity,    
        position: Cesium.Cartesian3.fromDegrees(p_position[0],p_position[1],100+p_position[2]*5),
        polyline : polyline,
        label: {
            text: text,
            font: '16px sans-serif',
            fillColor: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            backgroundColor:Cesium.Color.fromBytes( 17, 57, 101, 230 ),
            showBackground: true,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            pixelOffset: new Cesium.Cartesian2(0.0, 0),
            pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e1, 1.0, 1.5e4, 0.1)
        }

    });
    //buding_info_entity.add(unitMarkerbuildingEntity);
}
//*******************************添加path标注***************************************//
function add_path_fun(exit){
    var color = Cesium.Color.GREEN;
    var surfacePosition = Cesium.Cartesian3.fromDegrees(exit[0],exit[1],exit[2]);
    var heightPosition = Cesium.Cartesian3.fromDegrees(exit[3],exit[4],exit[5]);
    var polyline = new Cesium.PolylineGraphics();
    polyline.material = new Cesium.PolylineArrowMaterialProperty(color);
    
    polyline.width = new Cesium.ConstantProperty(30);
    polyline.followSurface = new Cesium.ConstantProperty(false);
    polyline.positions = new Cesium.ConstantProperty([surfacePosition, heightPosition]);

    var  unitMarkerbuildingEntity = viewer.entities.add({ 
        parent :buding_info_entity,       
        polyline : polyline,   

    });
    //buding_info_entity.add(unitMarkerbuildingEntity);
}
 //*******************************加载json，添加场馆建筑标注***************************************//	
 function mark_building(url) {
    //buding_info_entity.removeAll();
    $.ajax({
        url: url,
        async: true,
        success: function (data) {
            $.each(data, function(i, marks) {	
                                
                $.each(marks.exit, function(i, obj) {
                add_path_fun(obj);
                });
                $.each(marks.position, function(i, obj) {	
                    if(marks.type =="guan"){
                        var text = "功能："+marks.dis.function +"\n可容纳人数："+ marks.dis.num;
                        add_lable_fun(obj,text);
                        
                    }else{
                        add_pin_fun(obj,marks.name);
                    }  
            });
            });
        },
        dataType: "json"
    }); 
}
//*************************
mark_building("./data/buiding_info.json");
buding_info_entity.show = true;