【Cesium教程】添加广告牌实体实现地点标记效果

1,134 阅读1分钟

本文已参与[新人创作礼]活动,一起开启掘金创作之路。

 地点标记通常可以用广告牌实体的方式来实现,如下图效果

直接上代码:

    // 添加广告牌实体
    var enetity = viewer.entities.add({
        name: '标点',
        position: Cesium.Cartesian3.fromDegrees(113.122717,23.028762,10),
        billboard:{
            image: '/images/normal_point_128.png',
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 0.5,
        }
    })

如果需要在标签上添加文字,如下图所示效果:

则只需要加上label属性即可。完整代码如下:

 // 添加广告牌实体
    var enetity = viewer.entities.add({
        name: '标点',
        position: Cesium.Cartesian3.fromDegrees(113.122717,23.028762,10),
        label: { //文字标签
          text: "文字标签文字标签文字标签",
          font: '500 30px Helvetica',// 15pt monospace
          scale: 0.5,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.WHITE,
          pixelOffset: new Cesium.Cartesian2(0, -75), //偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)
        },
        billboard:{
            image: '/images/normal_point_128.png',
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 0.5,
        }
    })