首页 > 其他分享 >cesium三维模型加文字标签

cesium三维模型加文字标签

时间:2023-07-04 13:56:11浏览次数:30  
标签:文字 标签 模型 三维 label Cesium cesium new

给三维模型加文字标签,可以在找不到模型的时候双击标签,直接定位模型,但是模型是放在地球平面上的,它的中心点是底部中心点,label也显示在这个底部的中心点,想把这个label调整到合适的位置,可以使用 

eyeOffset 属性,设置文字的三维偏移,靠近还是远离眼睛,用的是z轴,负数表示靠近,正数表示远离,设置靠近眼睛的位置,可以让文字显示在模型的上方。

下图中,看不到模型,但是可以看到文字标签,双击文字标签,可以定位到模型

 

 下图中,由于文字靠前,所以文字不会被模型遮挡

 

entity label API

https://cesium.com/learn/cesiumjs/ref-doc/LabelGraphics.html

 

 

代码

const entity = viewer.entities.add({
      name: "密闭空间可燃气体监测仪",
      position: position,
      orientation: orientation,
      model: {
        uri: url,
        scale: 50,
      },
      label: { //文字标签
          text: '密闭空间可燃气体监测仪',
          font: '500 20px Helvetica',// 15pt monospace
          scale: 1,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.WHITE,
          // pixelOffset: new Cesium.Cartesian2(0, 0),   //偏移量
          eyeOffset: new Cesium.Cartesian3(0.0, 10.0, -15.0),
          // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          showBackground: true,
          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // disableDepthTestDistance: Number.POSITIVE_INFINITY,
          // backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0)   //背景顔色
      },
    });

 

标签:文字,标签,模型,三维,label,Cesium,cesium,new
From: https://www.cnblogs.com/LcxSummer/p/17525548.html

相关文章

  • cesium学习笔记1
    node.js安装Node.js下载安装及环境配置教程【超详细】_nodejs下载_WHF__的博客-CSDN博客进入官网地址下载安装包 https://nodejs.org/zh-cn/download/选择对应你系统的Node.js版本,这里我选择的是Windows系统、64位cesium安装......
  • 记录--多行标签超出展开折叠功能
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言 记录分享每一个日常开发项目中的实用小知识,不整那些虚头巴脑的框架理论与原理,之前分享过抽奖功能、签字功能等,有兴趣的可以看看本人以前的分享。 今天要分享的实用小知识是最近项目中遇到的标签相关的功......
  • 基于差速驱动移动基座的三维变型机器人轨迹优化
    在执行任务时,服务机器人的功能结构变化可能会限制其自主导航能力,从而影响其行动力。本文的研究,旨在解决复杂三维环境中可变形机器人的轨迹规划问题,特别是应用最为广泛的基于差速驱动移动基座的移动机器人的轨迹规划。这种全局轨迹优化方法是将机器人整个身体的轨迹建模为一个多项......
  • laytpl( Layui 的一款轻量 JavaScript 模板引擎)html标签点击事件传递多参
     <scripttype="text/html"id="aobjectvalue_temp"><spanclass="us-font-blue"style="cursor:pointer"onclick="seeinfo('{{d.aobjectkey}}','{{d.atype}}')">[资源详情]</spa......
  • a标签图片下载变成窗口打开问题处理
    import{saveAs}from'file-saver'downloadImage(url,fileName){   constvideoList=['mp4','avi','flv','mov']   letname=fileName   consturlTypeList=url.split('.')   c......
  • Django使用python的view创建a标签
    1、views文件deftestaa(request):#aa=[]foriinrange(1,10):aa='<ahref="">test</a>'aa='<ahref="http://www.baidu.com">百度链接</a></br>'#bb="<a......
  • 第10.3篇 html基础标签
    HTML一、HTML简介1.什么是HTMLHTML:HyperTextMarkupLanguage,超文本标记语言。作用:编写网页。2.写一个简单的HTML<html><head><title>pagetitle</title></head><body><fontcolor="red">hello,kitty&......
  • 矩形三维随机裂隙网络。 使用COMSOL with Matlab接口编程
    矩形三维随机裂隙网络。使用COMSOLwithMatlab接口编程。可以直接导入COMSOL中,无需CAD,无需提取数据,方便快捷可以直接计算。裂隙由matlab编程生成,能够生成两组不同产状的裂隙。裂隙长度的分布律可以为确定的裂隙长度,也可以为在一定范围内随机均匀分布的长度。注释十分详细,有运......
  • HTML5(三)H5新增标签
    H5之前,使用div容器元素进行页面定义布局```<divid="header"></div><divid="nav"></div><divid="article"><divid="section"></div></div><divid="aside"></div><d......
  • 【改进蚁群算法】 蚁群算法 Dijkstra算法 遗传算法 人工势场法实现二维 三维空间路径
    【改进蚁群算法】蚁群算法Dijkstra算法遗传算法人工势场法实现二维三维空间路径规划本程序为改进蚁群算法+Dijkstra算法+MAKLINK图理论实现的二维空间路径规划 算法实现:原创文章,转载请说明出处,资料来源:http://imgcs.cn/5c/636749258569.html1)基于MAKLINK图理论生成地图,并对......