首页 > 其他分享 >Cesium加载广告牌(二)

Cesium加载广告牌(二)

时间:2023-04-21 14:57:09浏览次数:36  
标签:Cartesian2 30000 广告牌 Cesium new VerticalOrigin 加载

Cesium加载广告牌(二)

在上一篇中已经添加了添加了广告牌实体,如果要获取更好的显示效果和其他需求,需要进行更多的设置。这里再介绍一些广告牌的常用属性。

horizontalOrigin:广告牌相对原点的水平位置。有三种属性:Cesium.HorizontalOrigin.CENTERCesium.HorizontalOrigin.LEFTCesium.HorizontalOrigin.RIGHT。注意这里必须大写。

verticalOrigin:广告牌相对原点的垂直位置。有四种属性:Cesium.VerticalOrigin.CENTERCesium.VerticalOrigin.BOTTOMCesium.VerticalOrigin.BASELINECesium.VerticalOrigin.TOP

scale:广告牌的尺寸。是Number类型,默认值为1。

pixelOffset:广告牌的像素偏移量,是Cartesian2类型。

通过前三种属性,可以对广告牌进行位置和大小方面的微调,而不用修改广告牌的当前位置。如果需要进行更近一步的自定义位置,可以使用pixelOffset。示例如下:

let bill = new Cesium.Entity({
    position: new Cesium.Cartesian3.fromDegrees(120.62521517, 31.42803100),
    billboard: {
        image: "./img/laboratory.png",
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        scale: 1,       
        pixelOffset: new Cesium.Cartesian2(0, -70),//注意这里需要使用Cartesian2
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
    }
})

如果需要更贴近现实,需要实现近大远小的效果,需要设置另一个重要属性:scaleByDistance。字面意思是跟随距离的尺寸。这个属性来实现根据摄像机的距离改变实体的scale(缩放比)。
scaleByDistance的类型为NearFarScalar,在Cesium中为new Cesium.NearFarScalar(near, nearValue, far, farValue)。这里的四个参数类型均是Number
new Cesium.NearFarScalar(30000, 1, 45000, 0.4)为例,含义为含义就是在摄像头和Billboard之间的距离在30000-45000之间的时候,Billboard的Scale比例按照1->0之间的插值来缩放。当摄像头和Billboard之间距离小于30000的时候,就按照30000时候的值1处理(这里如果不是1,而是0.5,那小于30000时候的比例就是0.5了)。而当大于45000的时候,就会按照0.4(其实就是8000对应的比例值)缩放。

let bill = new Cesium.Entity({
    position: new Cesium.Cartesian3.fromDegrees(120.62521517, 31.42803100),
    billboard: {
        image: "./img/laboratory.png",
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        scale: 1,       
        scaleByDistance:new Cesium.NearFarScalar(30000, 1, 45000, 0.4),
        pixelOffset: new Cesium.Cartesian2(0, -70),//注意这里需要使用Cartesian2
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
    }
})

标签:Cartesian2,30000,广告牌,Cesium,new,VerticalOrigin,加载
From: https://www.cnblogs.com/DTCLOUD/p/17340324.html

相关文章

  • gdb 加载动态库方法
    当GDB无法显示so动态库的信息或者显示信息有误时,通常是由于库搜索路径错误导致的,可使用setsysroot、setsolib-absolute-prefix、setsolib-search-path来指定库搜索路径。1.setsysroot与setsolib-absolute-prefix是同一条命令,实际上,setsysroot是setsolib-absolute-pref......
  • Cesium加载广告牌(一)
    Cesium加载广告牌(一)在Cesium开发中需要加载图标等操作,这时候就需要使用Cesium中添加广告牌的功能,这里需要用到一个很重要的属性方法Entity()。在官方文档中,Entity的解释为:将多种形式的可视化实体聚合到单个高级对象中。它们可以手动创建并添加到Viewer实体中,也可以由数据源(如Czm......
  • 微信小程序加载第三方字体
    一、加载本地字体做小程序项目时,有时为了提升页面展示效果,会引入一些第三方字体,引入方式如下代码片段/*直接在app.css引入*/@font-face{font-family:"alifont";//是你封装的名字src:url('./static/css/subset-AlibabaPuHuiTiR.ttf')format('truetype');//你......
  • pyinstaller 打包时第三方模块与图片资源加载
    打包命令pyinstaller--onefile--windowed**.py 修改**.spec文件pathex=['/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/ddddocr'],datas=[('./images','images'),('/Library/Frameworks/Python.fram......
  • ONVIF网络摄像头(IPC)客户端开发—RTSP RTCP RTP加载H264视频流
    前言:RTSP,RTCP,RTP一般是一起使用,在FFmpeg和live555这些库中,它们为了更好的适用性,所以实现起来非常复杂,直接查看FFmpeg和Live555源代码来熟悉这些协议非常吃力,这里将它们独立出来实现,以便更好的理解协议。本文主要介绍RTSP,RTCP,RTP加载H264数据流。说明:(1)大华IPC摄像头作为服......
  • ONVIF网络摄像头(IPC)客户端开发—RTSP RTCP RTP加载AAC音频流
    前言:RTSP,RTCP,RTP一般是一起使用,在FFmpeg和live555这些库中,它们为了更好的适用性,所以实现起来非常复杂,直接查看FFmpeg和Live555源代码来熟悉这些协议非常吃力,这里将它们独立出来实现,以便更好的理解协议。本文主要介绍RTSP,RTCP,RTP加载AAC音频流。说明:(1)大华IPC摄像头作为服......
  • tomcat启动时,加载类
    有时候在开发Web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法。可以采用在WEB-INF/web.xml中添加一个监听程序(ServletContextListener配置......
  • ArcGIS API for JavaScript 4.x加载GeoServer发布的WMTS服务
    前言 以前用OpenLayers加载GeoServer我记得很简单,现在用ArcGISAPI加载捣鼓了一天没搞好,第二天早上来参考一篇文章搞好了,我这纯属记录下。背景 客户没有ArcGISServer的许可,所以就只能用GeoServer发布或者离线切片,先研究下GeoServer,后面如果心情好再研究下离线切片。......
  • 无界微前端(wujie):element-ui 弹框内使用select组件,弹出框位置异常解决方案 (主程序加载
    https://wujie-micro.github.io/doc/guide/ element-ui弹框内使用select组件,弹出框位置异常解决方案第一步:在子应用中: 以上3步就好啦!!!是不是很简单这个框架坑很多,希望对大家有帮助!!! ......
  • Cesium中Camera的常用方法
    08-Cesium中Camera的常用方法camera是viewer.scene中的属性,用来控制当前的可见域。viewer.camera是快捷写法,访问的是viewer.scene.camera,所以调用时这两种写法都行。介绍三种常用的view.carmera方法。(1)setViewCamera根据视图位置直接定位。constposition=Cesium.Cartesia......