zoukankan      html  css  js  c++  java
  • 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'),
               78,
              height: 135,
              scale: 0.9,
              pixelOffset: new Cesium.Cartesian2(0, -30),
            },
    })
    

    2.gif标点

    //html
     <img
          id="pointgif"
          style="position: absolute;  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'
            }
          })
    
  • 相关阅读:
    HDU 1221 Rectangle and Circle 考虑很多情况,good题
    HDU 1223 打表 + 大数
    17984 FFF团的怒火
    17978 倒不了的塔 注意题目
    .. HDU
    17972 Golden gun的巧克力
    9718 整数因子分解(必做) 分治法
    51NOD 1201 整数划分
    Amazon Rekognition 人脸识别
    AWS Config
  • 原文地址:https://www.cnblogs.com/hustshu/p/15245371.html
Copyright © 2011-2022 走看看