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'
            }
          })
    
  • 相关阅读:
    mac系统下 Homebrew 使用
    mac上安装nginx
    DOMContentLoaded 和 Load 事件 区别(待补充)
    JavaScript运行机制
    理解js事件循环(event loop)
    理解js闭包
    nginx 知识点
    014_mac下的端口查看
    003_如何正确的进入容器
    002_docker构建zookeeper环境
  • 原文地址:https://www.cnblogs.com/hustshu/p/15245371.html
Copyright © 2011-2022 走看看