第六天：空间数据可视化

得不到派大星
479 阅读7分钟

添加实体的api

（1）面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，
具有很大的灵活性，需要具有图形学编程的知识
（2）高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性
的可视化对象，其底层使用Primitive API

    new Cesium.Entity ( options )
    实体实例将多种形式的可视化聚集到这个高级对象中。可以手动创建它们并将其添加到 Viewer.entities中
    
options属性列表
id                                         可选此对象的唯一标识符。如果未提供，则将生成GUID
name                                       可选显示给用户的可读名称。它不必是唯一的
availability                               可选与此对象相关联的可用性（如果有）
show                                       可选一个布尔值，指示是否显示实体及其子代
description                                可选一个字符串属性，用于为此实体指定HTML描述
position                                   可选指定实体位置的属性 
orientation                                可选指定实体方向的属性 
viewFrom                                   可选用于查看该对象的建议初始偏移量
parent                                     可选与该实体关联的父实体           
billboard                                  可选与该实体相关联的广告牌
box                                        可选与该实体关联的框
corridor                                   可选与该实体关联的走廊
cylinder                                   可选与该实体关联的圆柱体
ellipse                                    可选与该实体关联的椭圆
ellipsoid                                  可选与该实体关联的椭球
label                                      可选与该实体关联的options.label
model                                      可选与该实体关联的模型
path                                       可选与该实体关联的路径
plane                                      可选与该实体关联的平面
point                                      可选与该实体关联的点
polygon                                    可选与该实体关联的多边形
polyline                                   可选与该实体关联的折线
properties                                 可选与该实体关联的任意属性
polylineVolume                             可选与该实体相关联的polylineVolume
rectangle                                  可选与该实体关联的矩形
wall                                       可选与该实体关联的墙

添加点/标签/图标/线

let point = viewer.entities.add({
    name:'point',
    position:Cesium.cartesian3(x, y, z)，      // 笛卡尔坐标
    // position:Cesium.cartesian3.fromDegrees(lon, lat, alt) // 经纬度转笛卡尔坐标
    
    // 添加点
    point:{
        pixelSize:5,   //像素大小 
        color:Cesium.Color.ORANGE, 
        outlineColor:Cesium.Color.WHITE,
        outlineWidth:2,
        heightReference:5,       // 指定高度相对的高度
        scaleByDistance:new Cesium.NearFarScalar( 10, 2, 500, 0.4), //随距离改变大小
        translucencyByDistance:new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.2), //随距离改变透明度
        distanceDisplayCondition:new Cesium.DistanceDisplayCondition(0.0, 2000) // 2000米内显示 ，2000米外不显示 
        disableDepthTestDistance:Number.POSITIVE_INFINITY // 为数字时是多少高度内不会被 遮挡，Number.POSITIVE_INFINITY则永远不会被遮挡
    }，
    
    // 添加文字标签
    label:{
        text:'Bank' ,  // 添加的文字
        font:'14pt monospace', // 文字字体 
        style:Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor:Cesium.Color.ORANGE,  
        heightReference:5,       // 指定高度相对的高度
        outlineWidth:2,    // 此标签的填充颜色
        outlineColor:Cesium.Color.WHITE,
        scale : 1，
        show:true,
        backgroundColor:Cesium.Color.BLACK, // 标签背景色
        showBackground:true,
        verticalOrigin:Cesium.VerticalOrigin.BOTTOM, //垂直方向上标签的位置
        pixelOffset:new Cesium.Cartesian2(0， -9) , // 偏移量
        scaleByDistance:new Cesium.NearFarScalar( 10, 2, 500, 0.4), //随距离改变大小
        translucencyByDistance:new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.2), //随距离改变透明度
        distanceDisplayCondition:new Cesium.DistanceDisplayCondition(2000, 3000) // 2000到3000米内显示 
        disableDepthTestDistance:Number.POSITIVE_INFINITY // 为数字时是多少高度内不会被 遮挡，Number.POSITIVE_INFINITY则永远不会被遮挡
    }
    
    // 添加图标
    billboard:{
        image:'',
        width:30,
        height:30,
        rotation:20, //旋转角度 
        scale : 1，
        verticalOrigin:Cesium.VerticalOrigin.BOTTOM, //垂直方向上标签的位置
        pixelOffset:new Cesium.Cartesian2(0， -9) , // 偏移量
        scaleByDistance:new Cesium.NearFarScalar( 10, 2, 500, 0.4), //随距离改变大小
        translucencyByDistance:new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.2), //随距离改变透明度
        distanceDisplayCondition:new Cesium.DistanceDisplayCondition(2000, 3000) // 2000到3000米内显示 
        disableDepthTestDistance:Number.POSITIVE_INFINITY // 为数字时是多少高度内不会被 遮挡，Number.POSITIVE_INFINITY则永远不会被遮挡
    }
    
    // 添加线
    polyline:{
        position:Cesium.Cartesian3.fromDegreesArray(
            [120, 30, 110, 10]  // 不带高程的经纬度数组
        )，
        width:2,
        material:Cesium.Color.BLUE,
        zIndex:10,
        show:true,
        loop: false,      //是否将线段添加到最后一行和第一行位置之间以使此行成为循环
    }
})

拓展文字标签属性

1>  style 选值
    Cesium.LabelStyle.FILL               填写标签的文本，但不要勾勒轮廓
    Cesium.LabelStyle.FILL_AND_OUTLINE   填写并勾勒标签文本
    Cesium.LabelStyle.OUTLINE            勾勒标签的文本，但不要填写
    
2>  verticalOrigin  // 相对于对象的原点的垂直位置
    Cesium.VerticalOrigin.BASELINE       如果对象包含文本，则原点位于文本的基线，否则原点位于对象的底部
    Cesium.VerticalOrigin.BOTTOM         原点位于对象的底部
    Cesium.VerticalOrigin.CENTER         原点位于 BASELINE 和 TOP 之间的垂直中心
    Cesium.VerticalOrigin.TOP            原点在对象的顶部
3>  HorizontalOrigin  // 相对于对象的原点的水平位置
    Cesium.HorizontalOrigin.CENTER       原点位于对象的水平中心
    Cesium.HorizontalOrigin.LEFT         原点在对象的左侧
    Cesium.HorizontalOrigin.RIGHT        原点在对象的右侧

添加多边形

let Polygon = viewer.entities.add({
    name : '绿色拉伸多边形',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
                                                        -100.0, 42.0,
                                                        -104.0, 40.0]),
        extrudedHeight: 500000.0,   //为0则为贴地的图形，带高程则为立体
        material : Cesium.Color.GREEN
    }
    
    // 每个顶点具有不同拉伸高度的橘色多边形
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-108.0, 25.0, 100000,
             -100.0, 25.0, 100000,
             -100.0, 30.0, 100000,
             -108.0, 30.0, 300000]),
        extrudedHeight: 0,
        perPositionHeight : true,
        material : Cesium.Color.ORANGE,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
    
    // 具有挖空效果的蓝色多边形
    polygon : {
        hierarchy : {
            positions : Cesium.Cartesian3.fromDegreesArray(
                [-99.0, 30.0,
                 -85.0, 30.0,
                 -85.0, 40.0,
                 -99.0, 40.0]),
            holes : [{
                positions : Cesium.Cartesian3.fromDegreesArray([
                    -97.0, 31.0,
                    -97.0, 39.0,
                    -87.0, 39.0,
                    -87.0, 31.0
                ]),
                holes : [{
                    positions : Cesium.Cartesian3.fromDegreesArray([
                        -95.0, 33.0,
                        -89.0, 33.0,
                        -89.0, 37.0,
                        -95.0, 37.0
                    ]),
                    holes : [{
                        positions : Cesium.Cartesian3.fromDegreesArray([
                            -93.0, 34.0,
                            -91.0, 34.0,
                            -91.0, 36.0,
                            -93.0, 36.0
                        ])
                    }]
                }]
            }]
        },
        material : Cesium.Color.BLUE,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
})

添加多线段

let redLine = viewer.entities.add({
    name : '沿着地球表面的红线',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray(
            [-75, 35,
             -125, 35]),
        width : 5,
        material : Cesium.Color.RED
    }
})

let glowingLine = viewer.entities.add({
    name : '具有发光效果的线',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray(
            [-75, 37, -125, 37]
        ),
        width : 10,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.2,
            color : Cesium.Color.BLUE
        })
    }
})

let orangeOutlined = viewer.entities.add({
    name : '具有一定高度的线',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-75, 39, 250000,-125, 39, 250000]
        ),
        width : 5,
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.ORANGE,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
})

let yellowLine = viewer.entities.add({
    name : '不贴着地表的线',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-75, 43, 500000,-125, 43, 500000]
        ),
        width : 3,
        followSurface : false,  //是否贴着地表
        material : Cesium.Color.PURPLE
    }
})

多段线体 (Polyline Volumes) 这个要反攻

function computeCircle(radius) {
    var positions = [];
    for (var i = 0; i < 360; i++) {
        var radians = Cesium.Math.toRadians(i);
        positions.push(new Cesium.Cartesian2(
            radius * Math.cos(radians), radius * Math.sin(radians)));
    }
    return positions;
}
 
function computeStar(arms, rOuter, rInner) {
    var angle = Math.PI / arms;
    var length = 2 * arms;
    var positions = new Array(length);
    for (var i = 0; i < length; i++) {
        var r = (i % 2) === 0 ? rOuter : rInner;
        positions[i] = new Cesium.Cartesian2(
            Math.cos(i * angle) * r, Math.sin(i * angle) * r);
    }
    return positions;
}
 
var redTube = viewer.entities.add({
    name : 'Red tube with rounded corners',
    polylineVolume : {
        positions : Cesium.Cartesian3.fromDegreesArray(
            [-85.0, 32.0,
             -85.0, 36.0,
             -89.0, 36.0]),
        shape : computeCircle(60000.0),
        material : Cesium.Color.RED
    }
});
 
var greenBox = viewer.entities.add({
    name : 'Green box with beveled corners and outline',
    polylineVolume : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-90.0, 32.0, 0.0,
             -90.0, 36.0, 100000.0,
             -94.0, 36.0, 0.0]),
        shape :[new Cesium.Cartesian2(-50000, -50000),
                new Cesium.Cartesian2(50000, -50000),
                new Cesium.Cartesian2(50000, 50000),
                new Cesium.Cartesian2(-50000, 50000)],
        cornerType : Cesium.CornerType.BEVELED,
        material : Cesium.Color.GREEN,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});
 
var blueStar = viewer.entities.add({
    name : 'Blue star with mitered corners and outline',
    polylineVolume : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-95.0, 32.0, 0.0,
             -95.0, 36.0, 100000.0,
             -99.0, 36.0, 200000.0]),
        shape : computeStar(7, 70000, 50000),
        cornerType : Cesium.CornerType.MITERED,
        material : Cesium.Color.BLUE,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
})

立方体

var blueBox = viewer.entities.add({
    name : 'Blue box',
     //中心的位置
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        //长宽高
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.BLUE
    }
})
 
var redBox = viewer.entities.add({
    name : 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED,
        outline : true, //显示轮廓
        outlineColor : Cesium.Color.BLACK
    }
})
 
var outlineOnly = viewer.entities.add({
    name : 'Yellow box outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        fill : false,  //不显示填充
        outline : true,
        outlineColor : Cesium.Color.YELLOW
    }
})

圆和椭圆 (Circles Ellipses)

//浮空的绿色圆形
var greenCircle = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
    name : 'Green circle at height',
    ellipse : {
        semiMinorAxis : 300000.0,
        semiMajorAxis : 300000.0,
        height: 200000.0, //浮空
        material : Cesium.Color.GREEN
    }
});
//红色椭圆形，位于地表，带轮廓
var redEllipse = viewer.entities.add({
    //不带高度
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    name : 'Red ellipse on surface with outline',
    ellipse : {
        semiMinorAxis : 250000.0,
        semiMajorAxis : 400000.0,
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.RED
    }
});
//蓝色椭圆柱，旋转了角度
var blueEllipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
    name : 'Blue translucent, rotated, and extruded ellipse',
    ellipse : {
        semiMinorAxis : 150000.0,
        semiMajorAxis : 300000.0,
        extrudedHeight : 200000.0,  //拉伸
        rotation : Cesium.Math.toRadians(45), //旋转
        material : Cesium.Color.BLUE.withAlpha(0.7),
        outline : true
    }
})

走廊(Corridor)

var redCorridor = viewer.entities.add({
    name : 'Red corridor on surface with rounded corners and outline',
    corridor : {
        positions : Cesium.Cartesian3.fromDegreesArray([
                                                        -100.0, 40.0,
                                                        -105.0, 40.0,
                                                        -105.0, 35.0
                                                    ]),
                                                    width : 200000.0,
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.RED
    }
});
 
var greenCorridor = viewer.entities.add({
    name : 'Green corridor at height with mitered corners',
    corridor : {
        positions : Cesium.Cartesian3.fromDegreesArray(
        [    -90.0, 40.0,
             -95.0, 40.0,
             -95.0, 35.0
        ]),
        height: 100000.0,
        width : 200000.0,
        cornerType: Cesium.CornerType.MITERED,
        material : Cesium.Color.GREEN
    }
});
 
var blueCorridor = viewer.entities.add({
    name : 'Blue extruded corridor with beveled corners and outline',
    corridor : {
        positions : Cesium.Cartesian3.fromDegreesArray(
        [    80.0, 40.0,
             -85.0, 40.0,
             -85.0, 35.0
        ]),
        height : 200000.0,
        extrudedHeight : 100000.0,
        width : 200000.0,
        cornerType: Cesium.CornerType.BEVELED,
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLUE
    }
})

圆柱和圆锥(Cylinder Cones)

var greenCylinder = viewer.entities.add({
    name : 'Green cylinder with black outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
    cylinder : { //圆柱
        length : 400000.0,
        topRadius : 200000.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.GREEN,
        outline : true,
        outlineColor : Cesium.Color.DARK_GREEN
    }
});
 
var redCone = viewer.entities.add({
    name : 'Red cone',
    position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
    cylinder : {//圆锥
        length : 400000.0,
        topRadius : 0.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.RED
    }
})

矩形(Rectangles)


var redRectangle = viewer.entities.add({
    name : 'Red translucent rectangle with outline',
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.RED
    }
});
//绿色旋转、拉伸的矩形
var greenRectangle = viewer.entities.add({
    name : 'Green translucent, rotated, and extruded rectangle',
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
        material : Cesium.Color.GREEN.withAlpha(0.5),
        rotation : Cesium.Math.toRadians(45),
        extrudedHeight : 300000.0,
        height : 100000.0,
        outline : true,
        outlineColor : Cesium.Color.GREEN
    }
})

球和椭球(Spheres Ellipsoids)

var blueEllipsoid = viewer.entities.add({
    name : 'Blue ellipsoid',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    ellipsoid : {
        //可以指定三个轴的半径
        radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
        material : Cesium.Color.BLUE
    }
});
 
var redSphere = viewer.entities.add({
    name : 'Red sphere with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    ellipsoid : {
        //正球体
        radii : new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
        material : Cesium.Color.RED,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});
 
var outlineOnly = viewer.entities.add({
    name : 'Yellow ellipsoid outline',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
    ellipsoid : {
        radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
        fill : false,
        outline : true,
        outlineColor : Cesium.Color.YELLOW,
        slicePartitions : 24, //横向切割线
        stackPartitions : 36  //纵向切割线
    }
})

墙体

//东西方向的横墙
var redWall = viewer.entities.add({
    name : 'Red wall at height',
    wall : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
             [-115.0, 44.0, 200000.0,//坐标点
              -90.0, 44.0, 200000.0]
        ),
        minimumHeights : [100000.0, 100000.0], //按坐标点的最小高度数组
        material : Cesium.Color.RED
    }
});
//四边围墙
var greenWall = viewer.entities.add({
    name : 'Green wall from surface with outline',
    wall : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(
            [-107.0, 43.0, 100000.0,
             -97.0, 43.0, 100000.0,
             -97.0, 40.0, 100000.0,
             -107.0, 40.0, 100000.0,
             -107.0, 43.0, 100000.0]),
        material : Cesium.Color.GREEN,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});
//曲折的墙
var blueWall = viewer.entities.add({
    name : 'Blue wall with sawtooth heights and outline',
    wall : {
        //坐标点，不指定高度
        positions : Cesium.Cartesian3.fromDegreesArray(
            [-115.0, 50.0,
             -112.5, 50.0,
             -110.0, 50.0,
             -107.5, 50.0,
             -105.0, 50.0,
             -102.5, 50.0,
             -100.0, 50.0,
             -97.5, 50.0,
             -95.0, 50.0,
             -92.5, 50.0,
             -90.0, 50.0]),
        maximumHeights : [ //上高
            100000, 200000, 100000, 200000, 100000, 200000, 
            100000, 200000, 100000, 200000, 100000],
        minimumHeights : [  //下高
            0, 100000,  0, 100000, 0, 100000, 0, 100000, 0,
            100000, 0],
        material : Cesium.Color.BLUE,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
})

trackedEntity方法可以一直保持实体居中

1.  wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
1.  viewer.trackedEntity = wyoming;
avatar
文章
阅读
粉丝