cesium编程入门(九)实体 Entity

。_饼干妹妹 提交于 2020-05-01 07:07:44

cesium编程入门(九)实体 Entity

cesium编程入门(五)绘制形状提到过添加实体的方法,这一节聊一聊实体相关的一些内容:

先来看 Entity 的各个属性

  • id
    唯一标志,如果没设置,值就为一个默认给定的GUID
  • name
    名称,可以不唯一
  • availability
    可用性
  • show 可见性
  • description
    描述
  • position
    位置
  • orientation
    方向
  • viewFrom
    查看此对象的初始偏移量
  • parent
    父节点
  • properties
    与此实体关联的任意属性。
  • Graphics 相关的形状
    • box
    • corridor
    • cylinder
    • ellipse
    • ellipsoid
    • path
    • point
    • polygon
    • polyline
    • polylineVolume
    • rectangle
    • wall
    • billboard
    • label
    • model

第五篇中描述了部分形状,这里补充 标签,模型,广告牌

标签 label

文字标注,可以设置样式,文字内容,字体,偏移等等

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

模型 model

常见的模型有glTF 和glb

model : {
    uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
}

广告牌 billboard

一个最简单的广告牌一般就是图片,和显示大小

billboard : {
  image : 'http://localhost:81/images/2015/02-02/Philadelphia_Phillies.png',
  width : 64,
  height : 64
}

创建一个实体参考:

//方法一
var entity = new Entity({
    id : 'uniqueId'
});
viewer.entities.add(entity);

//方法一 简写
viewer.entities.add({
    id : 'uniqueId'
});

//方法二
var entity = viewer.entities.getOrCreateEntity('uniqueId');

查找实体的方法:

var entity = viewer.entities.getById('uniqueId');

移除实体的方法:

//方法一,先查后删
var entity = viewer.entities.getById('uniqueId');
viewer.entities.remove(entity) 
//方法二,直接删除
viewer.entities.removeById('uniqueId')
//方法三,删除所有
viewer.entities.removeAll()

实体集变化

function onChanged(collection, added, removed, changed){
  var msg = 'Added ids';
  for(var i = 0; i < added.length; i++) {
    msg += '\n' + added[i].id;
  }
  console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);

描述信息 官网示例

只需要修改entity 的description 属性就可以达到目的

var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
  name : 'Wyoming',
  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]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),
    outline : true,
    outlineColor : Cesium.Color.BLACK
  },
  description:'divID'//方法一
});

viewer.zoomTo(wyoming);

//方法二
wyoming.description = '\
<img\
  width="50%"\
  style="float:left; margin: 0 1em 1em 0;"\
  src="//cesiumjs.org/images/2015/02-02/Flag_of_Wyoming.svg"/>\
<p>\
  Wyoming is a state in the mountain region of the Western \
  United States.\
</p>\
<p>\
  Wyoming is the 10th most extensive, but the least populous \
  and the second least densely populated of the 50 United \
  States. The western two thirds of the state is covered mostly \
  with the mountain ranges and rangelands in the foothills of \
  the eastern Rocky Mountains, while the eastern third of the \
  state is high elevation prairie known as the High Plains. \
  Cheyenne is the capital and the most populous city in Wyoming, \
  with a population estimate of 62,448 in 2013.\
</p>\
<p>\
  Source: \
  <a style="color: WHITE"\
    target="_blank"\
    href="http://en.wikipedia.org/wiki/Wyoming">Wikpedia</a>\
</p>';

选中

scene 提供了两个方法来获取选中对象,参数都是两个(viewer, windowPosition)

  • pickEntity 获取最顶层的实体
  • drillPickEntities 获取当前位置的所有实体的集合(List)
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!