cesium(添加文字图片标注)

承接上文.页面中已经可以看到cesium渲染出来的地球了.由于添加了定位到初始位置,现在页面上显示了初始位置以及周边的地图.我的项目中需要对地图中的一些地点进行标注,以下记录如何在cesium中添加文字及图片标注.

//此处以经纬度的position为例.position:[116.46557109900392, 39.914397511080246]
addMarker(position) {
      const Cesium = this.cesium;
      let entity ;
        entity = {
          name: "point",
          id:``,//由于后期需要对标注进行动态添加与清除,故此处对每一个标注添加了id,方便后续查找.如无此需求,可不设置.默认生成id.
          show:true,
          position: Cesium.Cartesian3.fromDegrees(position[0],position[1]),
          //通过页面点击获取的位置信息,可以直接使用
          //position:position,
          //此处设置文本标注
          label:new Cesium.LabelGraphics({
            text:"",//设置文本内容
            font: "12px",
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            fillColor: Cesium.Color.RED,
            outlineWidth: 4,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
            pixelOffset: new Cesium.Cartesian2(0, 20), // 偏移量
          }),
          //此处设置图片标注
          billboard:{//注意:billboard !!!不是驼峰的billBoard!!!踩坑...
            image:require(""),//此处可以添加用于做标志的图片
            width:48,//设置图片宽高
            height:55,
            show: true,
            scale: 2.0,//调整图标的大小
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 确保基于图片底部定位
          }
        }
        this._viewer.entities.add(entity);
    }