Labels【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Labels.html&label=All

效果如下图所示：这里就不再录制效果， 具体请看代码中的注释，很详细了。字体我设置了我电脑上的一种字体。

示例代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

let labelListenerCallback;

function addLabel() {
  Sandcastle.declare(addLabel);
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: "费城",
    },
  });
}

function setFont() {
  Sandcastle.declare(setFont);
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: "费城",
      font: "24px 'Maple Mono Normal NF CN'",
      fillColor: Cesium.Color.SKYBLUE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    },
  });
}

function setProperties() {
  Sandcastle.declare(setProperties);
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222, 300000.0),
    label: {
      text: "费城",
    },
  });

  entity.label.scale = 2.0;
  entity.label.showBackground = true;
}

function offsetByDistance() {
  Sandcastle.declare(offsetByDistance);
  const image = new Image();
  image.onload = function () {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
      billboard: {
        position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
        scaleByDistance: new Cesium.NearFarScalar(1.5e2, 5.0, 1.5e7, 0.5),
        image: image,
      },
      label: {
        text: "位于缩放广告牌上方的标签",
        font: "20px sans-serif",
        showBackground: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        pixelOffset: new Cesium.Cartesian2(0.0, -image.height),
        pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
          1.5e2,
          3.0,
          1.5e7,
          0.5
        ),
      },
    });
  };
  image.src = "../images/facility.gif";
}

function fadeByDistance() {
  Sandcastle.declare(fadeByDistance);
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-73.94, 40.67),
    label: {
      text: "纽约",
      //150米时透明度为1.0,150000000米时透明度为0
      translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e8, 0.0),
    },
  });
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-84.39, 33.75),
    label: {
      text: "亚特兰大",
      //150000米时透明度为1.0,15000000米时透明度为0
      translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0),
    },
  });
}

function scaleByDistance() {
  Sandcastle.declare(scaleByDistance);

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: "费城",
      //150米时放大2倍，15000000米时缩小一半
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
    },
  });
}

function setRightToLeft() {
  Sandcastle.declare(setRightToLeft);
  Cesium.Label.enableRightToLeftDetection = true; //只需要在应用程序开始时设置一次。
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: "哦读左往右从请",
    },
  });
}

function animateLabel() {
  Sandcastle.declare(animateLabel);
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: "费城",
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 0,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    },
  });

  let outlineDelta = 0.1;
  let fontDelta = -1.0;
  let fontSize = 20.0;
  const minFontSize = 1.0;
  const maxFontSize = 48.0;

  //添加一个字体大小和轮廓变化的动画
  labelListenerCallback = viewer.scene.preUpdate.addEventListener(function (
    scene,
    time
  ) {
    entity.label.outlineWidth += outlineDelta;
    if (entity.label.outlineWidth >= 4.0 || entity.label.outlineWidth <= 0.0) {
      outlineDelta *= -1.0;
    }

    fontSize += fontDelta;
    if (fontSize >= maxFontSize || fontSize <= minFontSize) {
      fontDelta *= -1.0;
    }
    entity.label.font = `${fontSize}px Calibri`;
  });
}

Sandcastle.addToolbarMenu([
  {
    text: "添加标签",
    onselect: function () {
      addLabel();
      Sandcastle.highlight(addLabel);
    },
  },
  {
    text: "设置字体",
    onselect: function () {
      setFont();
      Sandcastle.highlight(setFont);
    },
  },
  {
    text: "设置属性",
    onselect: function () {
      setProperties();
      Sandcastle.highlight(setProperties);
    },
  },
  {
    text: "按(一定)距离偏移标签",
    onselect: function () {
      offsetByDistance();
      Sandcastle.highlight(offsetByDistance);
    },
  },
  {
    text: "按距离淡化标签",
    onselect: function () {
      fadeByDistance();
      Sandcastle.highlight(fadeByDistance);
    },
  },
  {
    text: "按距离缩放标签",
    onselect: function () {
      scaleByDistance();
      Sandcastle.highlight(scaleByDistance);
    },
  },
  {
    text: "设置标签，适用于右到左的语言",
    onselect: function () {
      setRightToLeft();
      Sandcastle.highlight(setRightToLeft);
    },
  },
  {
    text: "动画标签",
    onselect: function () {
      animateLabel();
      Sandcastle.highlight(animateLabel);
    },
  },
]);

Sandcastle.reset = function () {
  viewer.entities.removeAll();
  if (Cesium.defined(labelListenerCallback)) {
    labelListenerCallback();
  }
};