cesium-entity篇

entity种类:

Boxes：

代码：

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
    }
});

box的全部属性在cesium api中查询 BoxGraphics

示例：

Circles and Ellipses

代码

var redEllipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    name : 'Red ellipse on surface',
    ellipse : {
        semiMinorAxis : 250000.0,
        semiMajorAxis : 400000.0,
        material : Cesium.Color.RED.withAlpha(0.5)
    }
});

ellipse的全部属性在cesium api中查询 EllipseGraphics

示例

Corridor

代码

var redCorridor = viewer.entities.add({
    name : 'Red corridor on surface with rounded corners',
    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)
    }
});

corridor的全部属性在cesium api中查询 CorridorGraphics

示例

Cylinder and 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.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.DARK_GREEN
    }
});

cylinder的全部属性在cesium api中查询 CylinderGraphics

示例

Polygons

代码

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -107.0, 33.0,
                                                        -102.0, 31.0,
                                                        -102.0, 35.0]),
        material : Cesium.Color.RED
    }
});

polygon的全部属性在cesium api中查询 PolygonGraphics

示例

Polylines

代码

var redLine = viewer.entities.add({
    name : 'Red line on terrain',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 5,
        material : Cesium.Color.RED,
        clampToGround : true
    }
});

polyline的全部属性在cesium api中查询 PolylineGraphics

示例

Polyline Volumes

代码

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
    }
});

polylineVolume的全部属性在cesium api中查询 PolylineVolumeGraphics

示例

Rectangles

代码

var redRectangle = viewer.entities.add({
    name : 'Red translucent rectangle',
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
        material : Cesium.Color.RED.withAlpha(0.5)
    }
});

rectangle的全部属性在cesium api中查询 RectangleGraphics

示例

Spheres and 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
    }
});

ellipsoid的全部属性在cesium api中查询 EllipsoidGraphics

示例

Walls

代码

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
    }
});

wall的全部属性在cesium api中查询WallGraphics

示例

注：当需要把形状挤压成一个体，需要设置extrudedHeight属性，假设给polygon设置高度（height）为1000，那么这个多边形面将会距离地球表面1000米，再设置extrudedHeight为2000，就会形成一个从高度1000开始到高度2000结束的一个多边形体，多边形体实际高度为1000，如果没有高度（height）属性但是设置了extrudedHeight为2000，就会默认高度（height）为0形成一个从高度0开始到高度2000结束的一个多边形体，多边形体实际高度为2000。

设置材质、边框

所有几何形状都使用同一套属性控制其外观，fill属性是一个布尔值，用于指定内部是否填充，outline属性控制是否勾勒出形状的边缘。当fill设置为true时，material属性决定了模型的显示效果（填充的材质或颜色），目前，Entity形状和体积支持colors，images，checkerboard（棋盘），stripe（条纹），and grid（网格）。

填充颜色举例：

XXX.material = Cesium.Color.BLUE.withAlpha(0.5)

填充image举例：

XXX.material='XXX.jpg'

填充checkerboard（棋盘）举例：

XXX.material = new Cesium.CheckerboardMaterialProperty({
    evenColor : Cesium.Color.WHITE,//棋盘上的第一种颜色 
    oddColor : Cesium.Color.BLACK,//棋盘上的第二种颜色
    repeat : new Cesium.Cartesian2(4, 4)//Cartesian2 指定横向和纵向瓷砖的重复次数
});

填充stripe（条纹）举例：

XXX.material = new Cesium.StripeMaterialProperty({
    evenColor : Cesium.Color.WHITE, //条带第一个颜色
    oddColor : Cesium.Color.BLACK, //条带第二个颜色
    repeat : 32, //重复次数
    offset:0, //偏移量
    //条纹方向 Cesium.StripeOrientation.HORIZONTAL 或者 VERTICAL 
    orientation:Cesium.StripeOrientation.HORIZONTAL 
});

填充grid（网格）举例：

XXX.material = new Cesium.GridMaterialProperty({
    color : Cesium.Color.YELLOW,
    cellAlpha : 0.2, //每个格子的alpha值（不透明度）
    lineCount : new Cesium.Cartesian2(8, 8),//指定沿每个轴的格网线的数量
    lineThickness : new Cesium.Cartesian2(2.0, 2.0),//指定沿每个轴的格网线的粗细
    lineOffset:0 //指定沿每个轴的格网线的偏移量。
});

outLines举例：

outline不具有相应的材质，而是依赖于两个单独的outlineColor和outlineWidth属性。outlineWidth只适用于非Windows系统，如Android，iOS，Linux和OS X。在Windows系统中，outlines宽度总是为1。这是由于在Windows上，所有三个主要浏览器引擎中实现WebGL的限制。

ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

Polylines举例：

var entity = viewer.entities.add({
    polyline : {
    positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,-77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});

Polyline Outline举例：

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth : 3,
    outlineColor : Cesium.Color.BLACK
});

Polyline Glow举例：

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,//用于指定发光强度，以总线宽的百分比表示
    color : Cesium.Color.BLUE,
    taperPower:1 //锥型效果强度 默认为1 取值0-1
});

跟踪entity

//如果需要定位后再设置跟踪entity 一定要在then方法里使用，要不跟踪不生效
viewer.zoomTo(XXentity).then(()=>{
    //设置跟踪必须有position属性
    XXentity.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
    //设置跟踪
    viewer.trackedEntity = XXentity;
    //设置取消跟踪
    viewer.trackedEntity = undefined;
});

管理entity

添加实体

var entity = new Cesium.Entity({
   id : 'entity的id'
});
viewer.entities.add(entity);

var entity = new Cesium.Entity();
entity.name = 'entityName';
var polygon = new Cesium.PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5));
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
polygon.hierarchy = Cesium.Cartesian3.fromDegreesArray([
            -109.080842,45.002073,
            -105.91517,45.002073,
            -104.058488,44.996596,
            -104.053011,43.002989,
            -104.053011,41.003906,
            -105.728954,40.998429,
            -107.919731,41.003906,
            -109.04798,40.998429,
            -111.047063,40.998429,
            -111.047063,42.000709,
            -111.047063,44.476286,
            -111.05254,45.002073]);
entity.polygon = polygon;
viewer.entities.add(entity);

通过id获取entity

var entity = viewer.entities.getById('entity的id');

获取实体，不存在就创建

var entity = viewer.entities.getOrCreateEntity('entity的id');

更新entity，当需要一次更新大量的实体时，排队更改并在最后触发事件，性能更好，所以需要用到EntityCollection的collectionChanged Event

//在定义viewer完成后，加如下方法，当entity发生added, removed, updated等事件时会触发下面方法
//每更改一次就会调用一次，如果加三个实体，输出 id是1，id是2，id是3
function onChanged(collection, added, removed, changed){
    var msg = 'id是';
    for(var i = 0; i < added.length; i++) {
        msg += '\n' + added[i].id;
    }
    console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);
//在添加第一个实体之前调用viewer.entities.suspendEvents();暂时挂起
//在添加最后一个实体之后调用viewer.entities.resumeEvents();恢复
//那上面的监听就会输出  id是1 2 3

拾取entity

//绑定点击事件
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
    pickEntity(event.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

//scene.pick只能获取一个对象，且获取的是最顶部的对象。如果拾取点没有对象，则为undefined
function pickEntity(windowPosition) {
    var picked = viewer.scene.pick(windowPosition);
    if (Cesium.defined(picked)) {
        var id = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (id instanceof Cesium.Entity) {
            return id;
        }
    }
    return undefined;
};

//drillPick和Pick不同，Pick只能拾取一个对象，而drillPick可以拾取多个对象
//且drillPick可以设置limit 参数，limit参数可以控制获取几个对象，超出的就不获取了
function drillPickEntities(windowPosition) {
    var i;
    var entity;
    var picked;
    var pickedPrimitives = viewer.scene.drillPick(windowPosition);
    var length = pickedPrimitives.length;
    var result = [];
    var hash = {};
    for (i = 0; i < length; i++) {
        picked = pickedPrimitives[i];
        entity = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (entity instanceof Cesium.Entity && !Cesium.defined(hash[entity.id])) {
            result.push(entity);
            hash[entity.id] = true;
        }
    }
    return result;
};

兴趣点Points, Billboards, and Labels

var viewer = new Cesium.Viewer('cesiumContainer');
var citizensBankPark = viewer.entities.add({
    name : 'Citizens Bank Park',
    position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
    point : {
        pixelSize : 5,
        color : Cesium.Color.RED,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 2
    },
    label : {
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        pixelOffset : new Cesium.Cartesian2(0, -9)
    }
});

var citizensBankPark = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
    billboard : {
        image : 'http://localhost:81/images/2015/02-02/Philadelphia_Phillies.png',
        width : 64,
        height : 64
    },
    label : {
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.TOP,
        pixelOffset : new Cesium.Cartesian2(0, 32)
    }
});

3D Models

var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
        uri : 'http://localhost:8011/mapdata/gltf/sample/CesiumAir/Cesium_Air.gltf'
    }
});
viewer.trackedEntity = entity;

heading（方位角），pitch（倾角），和roll（滚动）等来控制模型

var center = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45);
var pitch = Cesium.Math.toRadians(15);
var roll = Cesium.Math.toRadians(0);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var quaternion = Cesium.Transforms.headingPitchRollQuaternion(center, hpr);

var entity = viewer.entities.add({
    position :center,
    model : {
        uri : 'http://localhost:8011/mapdata/gltf/sample/CesiumAir/Cesium_Air.gltf'
    },
    orientation : quaternion,
});

本作品采用知识共享署名 4.0 国际许可协议进行许可

cesium-entity篇

Polyline Outline举例：

Polyline Glow举例：

文章评论