Cesium添加billboard圖片和gif標點


1.圖片標點

this.viewer.entities.add({
   
     
     
        name: '監測設備',
        position: Cesium.Cartesian3.fromDegrees(lng, lat, 6),
        label: {
   
     
     
          //文字標簽
          text: '監測設備',
          font: '14pt monospace',
          style: Cesium.LabelStyle.FILL,
          outlineWidth: 2,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部來計算標簽的位置
          pixelOffset: new Cesium.Cartesian2(0, -9), //偏移量
        },
        point: {
   
     
     
          color: Cesium.Color.RED, //點位顏色
          pixelSize: 10, //像素點大小
        },
        billboard: {
   
     
     
          //圖標
          image: require('../../assets/img/sx.png'),
          width: 78,
          height: 135,
          scale: 0.9,
          pixelOffset: new Cesium.Cartesian2(0, -30),
        },
})

2.gif標點

//html
 <img
      id="pointgif"
      style="position: absolute; width: 5%; height: 10%; z-index: 2"
      src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1057147160,1175866418&fm=26&gp=0.jpg"
    />
//js
    var htmlOverlay = document.getElementById('pointgif')
      var scratch = new Cesium.Cartesian2()
      this.viewer.scene.preRender.addEventListener(() => {
   
     
     
        var position = Cesium.Cartesian3.fromDegrees(
          114.3138316176749,
          30.56647299848209,
          0
        )
        var canvasPosition = this.viewer.scene.cartesianToCanvasCoordinates(
          position,
          scratch
        )
        if (Cesium.defined(canvasPosition)) {
   
     
     
          htmlOverlay.style.top = canvasPosition.y + 'px'
          htmlOverlay.style.left = canvasPosition.x + 'px'
        }
      })


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM