Cesium基础-（Entity）-（label）

8、label 标签

Label 在 Cesium 中表示一个可以在三维地球上显示的文本标签。它通常用于在特定位置显示信息，比如地名、地标名称或其他注释。Label 可以自定义样式、颜色、大小，并能根据距离视角动态调整显示效果。

以下是 Label 的主要属性和方法的表格表示：

属性

方法

静态方法

        addLabel(viewer) {
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0),
                point: {
                    color: Cesium.Color.RED,    //点位颜色
                    pixelSize: 10                //像素点大小
                },
                label: {
                    // 标签要显示的文本内容，这里添加了一些特殊字符来增加视觉效果
                    text: '✨✨✨ GISer世界 ✨✨✨',

                    // 设置标签的字体样式，这里使用粗体、32像素大小的无衬线字体
                    font: 'bold 32px sans-serif',

                    // 设置标签的样式为填充和轮廓，这意味着标签将有填充颜色和可见的轮廓
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,

                    // 设置标签的填充颜色，并设置一定的透明度（0.9）
                    fillColor: Cesium.Color.AQUA.withAlpha(0.9),

                    // 设置标签轮廓的宽度
                    outlineWidth: 3,

                    // 设置标签轮廓的颜色
                    outlineColor: Cesium.Color.BLACK,

                    // 设置标签的缩放比例，这里设置为1.0，即原始大小
                    scale: 1.0,

                    // 设置是否显示标签的背景，这里设置为true，显示背景
                    showBackground: true,

                    // 设置标签背景的颜色，并设置一定的透明度（0.5）
                    backgroundColor: Cesium.Color.DARKGRAY.withAlpha(0.5),

                    // 设置标签背景的内边距，影响背景框的大小
                    backgroundPadding: new Cesium.Cartesian2(10, 10),

                    // 设置标签的垂直原点，这里设置为底部
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

                    // 设置标签的水平原点，这里设置为居中
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

                    // 设置标签在屏幕空间中的像素偏移量，这里设置为(0, 0)，即无偏移
                    pixelOffset: new Cesium.Cartesian2(0, 0),

                    // 设置标签在视角坐标系中的偏移量，这里设置为(0, 0, 0)，即无偏移
                    eyeOffset: new Cesium.Cartesian3(0, 0, 0),

                    // 根据摄像机距离动态调整标签的透明度，这里设置在1.5e2米时为1.0（完全不透明），在1.5e7米时为0.5（半透明）
                    translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),

                    // 根据摄像机距离动态调整标签的像素偏移，这里设置在1.5e2米时为0像素偏移，在1.5e7米时为10像素偏移
                    pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 0.0, 1.5e7, 10.0),

                    // 根据摄像机距离动态调整标签的缩放比例，这里设置在1.5e2米时为1.0（原始大小），在1.5e7米时为0.5（缩小一半）
                    scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
                },
            });
        }

要在Vue代码环境中运行上述代码，你需要遵循以下步骤：

步骤一、安装Cesium依赖：

首先，确保你的项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤二、设置Vue项目：

确保你的Vue项目已经创建，并且可以正常运行。

步骤三、创建Cesium容器组件：

创建一个新的Vue组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumContainer.vue的文件。

1. 引入Cesium：在Vue组件中引入Cesium库：

   import * as Cesium from 'cesium/Cesium';
   

2. 设置Cesium Viewer：在Vue组件中设置Cesium Viewer，并添加一个ref来引用DOM元素：

   <template>
     <div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
   </template>
   
   <script>
   import * as Cesium from 'cesium/Cesium';
   
   export default {
     name: 'CesiumContainer',
     mounted() {
       this.initCesium();
     },
     methods: {
       initCesium() {
         // 初始化Cesium Viewer
         const viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
           // 可以在这里配置Cesium Viewer的选项
         });
   
         // 添加标签实体
         this.addLabel(viewer);
       },
       addLabel(viewer) {
         // ... 你的代码 ...
       }
     }
   }
   </script>
   

3. 添加标签实体：将上述addLabel函数的代码复制到Vue组件的methods中。

4. 修复CSS样式：确保CesiumContainer.vue组件的样式正确设置，以便Cesium Viewer可以正确显示。

5. 在Vue应用中使用Cesium容器组件：在你的Vue应用的父组件中引入并使用CesiumContainer组件。

6. 确保Cesium资源加载：Cesium需要加载大量的资源文件，确保你的项目配置了正确的路径或者使用了Cesium的CDN服务。

7. 处理跨域问题：如果你的图片资源不在同一个域下，你可能需要处理CORS（跨源资源共享）问题。

8. 调试和测试：运行你的Vue应用，并确保Cesium Viewer正确加载，并且标签实体正确显示。

要在React代码环境中运行上述addLabel函数，你需要按照以下步骤操作：

步骤 1: 安装Cesium

首先，确保你的React项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建React组件

创建一个新的React组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumViewer.js的文件。

步骤 3: 引入Cesium

在React组件中引入Cesium库：

import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

步骤 4: 设置Cesium Viewer

在React组件中设置Cesium Viewer，并添加一个ref来引用DOM元素：

import React, { useRef, useEffect } from 'react';
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';

const CesiumViewer = () => {
  const cesiumContainerRef = useRef(null);

  useEffect(() => {
    // 初始化Cesium Viewer
    const viewer = new Cesium.Viewer(cesiumContainerRef.current);

    // 添加标签实体
    addLabel(viewer);

    // 清理资源，组件卸载时销毁viewer
    return () => {
      viewer.destroy();
    };
  }, []);

  return (
    <div ref={cesiumContainerRef} style={{ width: '100%', height: '100vh' }} />
  );
};

export default CesiumViewer;

步骤 5: 定义addLabel函数

在同一个文件中定义addLabel函数：

const addLabel = (viewer) => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0),
    point: {
      color: Cesium.Color.RED, // 点位颜色
      pixelSize: 10, // 像素点大小
    },
    label: {
      // 标签要显示的文本内容，这里添加了一些特殊字符来增加视觉效果
      text: '✨✨✨ GISer世界 ✨✨✨',

      // 设置标签的字体样式，这里使用粗体、32像素大小的无衬线字体
      font: 'bold 32px sans-serif',

      // 设置标签的样式为填充和轮廓，这意味着标签将有填充颜色和可见的轮廓
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,

      // 设置标签的填充颜色，并设置一定的透明度（0.9）
      fillColor: Cesium.Color.AQUA.withAlpha(0.9),

      // 设置标签轮廓的宽度
      outlineWidth: 3,

      // 设置标签轮廓的颜色
      outlineColor: Cesium.Color.BLACK,

      // 设置标签的缩放比例，这里设置为1.0，即原始大小
      scale: 1.0,

      // 设置是否显示标签的背景，这里设置为true，显示背景
      showBackground: true,

      // 设置标签背景的颜色，并设置一定的透明度（0.5）
      backgroundColor: Cesium.Color.DARKGRAY.withAlpha(0.5),

      // 设置标签背景的内边距，影响背景框的大小
      backgroundPadding: new Cesium.Cartesian2(10, 10),

      // 设置标签的垂直原点，这里设置为底部
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

      // 设置标签的水平原点，这里设置为居中
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

      // 设置标签在屏幕空间中的像素偏移量，这里设置为(0, 0)，即无偏移
      pixelOffset: new Cesium.Cartesian2(0, 0),

      // 设置标签在视角坐标系中的偏移量，这里设置为(0, 0, 0)，即无偏移
      eyeOffset: new Cesium.Cartesian3(0, 0, 0),

      // 根据摄像机距离动态调整标签的透明度，这里设置在1.5e2米时为1.0（完全不透明），在1.5e7米时为0.5（半透明）
      translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),

      // 根据摄像机距离动态调整标签的像素偏移，这里设置在1.5e2米时为0像素偏移，在1.5e7米时为10像素偏移
      pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 0.0, 1.5e7, 10.0),

      // 根据摄像机距离动态调整标签的缩放比例，这里设置在1.5e2米时为1.0（原始大小），在1.5e7米时为0.5（缩小一半）
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
    },
  });
};

步骤 6: 使用CesiumViewer组件

在你的React应用中的任何地方引入并使用CesiumViewer组件：

import React from 'react';
import ReactDOM from 'react-dom';
import CesiumViewer from './CesiumViewer';

ReactDOM.render(
  <React.StrictMode>
    <CesiumViewer />
  </React.StrictMode>,
  document.getElementById('root')
);

步骤 7: 确保Cesium资源加载

Cesium需要加载大量的资源文件，确保你的项目配置了正确的路径或者使用了Cesium的CDN服务。

步骤 8: 调试和测试

运行你的React应用，并确保Cesium Viewer正确加载，并且标签实体正确显示。

这样，你就可以在React环境中运行addLabel函数，并在Cesium Viewer中显示带有样式的标签了。

欢迎关注我的博客及B站：

博客：

https://blog.csdn.net/weixin_44857463/article/details/129157708

B站：

https://space.bilibili.com/610654927?spm_id_from=..0.0

点击蓝字  关注我们

扫码关注

我们一起学习！