CZML Reference Properties【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=CZML%20Reference%20Properties.html&label=All

效果如下图：字体修改为我自己电脑上安装的字体。

示例代码如下：

const czml = [
  {
    id: "document",
    name: "CZML Reference Properties",
    version: "1.0",
  },
  {
    id: "position-reference",
    position: {
      cartographicDegrees: [-110.0, 50.0, 0],
    },
  },
  {
    id: "fillColor-reference",
    name: "Referencing Position",
    description:
      "<p>For more examples of reference properties, see CZML Polygon - Interpolating References.</p>",
    billboard: {
      image:
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACvSURBVDhPrZDRDcMgDAU9GqN0lIzijw6SUbJJygUeNQgSqepJTyHG91LVVpwDdfxM3T9TSl1EXZvDwii471fivK73cBFFQNTT/d2KoGpfGOpSIkhUpgUMxq9DFEsWv4IXhlyCnhBFnZcFEEuYqbiUlNwWgMTdrZ3JbQFoEVG53rd8ztG9aPJMnBUQf/VFraBJeWnLS0RfjbKyLJA8FkT5seDYS1Qwyv8t0B/5C2ZmH2/eTGNNBgMmAAAAAElFTkSuQmCC",
      scale: 1.5,
    },
    label: {
      //白色字体，粉红色的轮廓
      fillColor: {
        rgba: [255, 255, 255, 255],
      },
      font: "13pt Lucida Console",
      horizontalOrigin: "LEFT",
      outlineColor: {
        rgba: [150, 0, 150, 255],
      },
      outlineWidth: 3,
      pixelOffset: {
        cartesian2: [20, 0],
      },
      style: "FILL_AND_OUTLINE",
      text: "引用上面对象的位置属性",
    },
    position: {
      //这里的位置通过上个对象的id引用其位置坐标
      reference: "position-reference#position",
    },
  },
  {
    id: "polygon",
    name: "Referencing Fill Color",
    description:
      "<p>For more examples of reference properties, see CZML Polygon - Interpolating References.</p>",
    label: {
      fillColor: {
        rgba: [255, 255, 255, 255],
      },
      //这里修改为我电脑上自己安装的三方字体
      font: "13pt Maple Mono Normal NF CN",
      horizontalOrigin: "LEFT",
      pixelOffset: {
        cartesian2: [20, 0],
      },
      style: "FILL_AND_OUTLINE",
      text: "引用上面对象的轮廓颜色作为填充颜色",
    },
    position: {
      cartographicDegrees: [-105, 35, 0],
    },
    polygon: {
      positions: {
        cartographicDegrees: [
          -115.0, 37.0, 0, 
          -115.0, 32.0, 0, 
          -107.0, 33.0, 0, 
          -102.0, 31.0, 0,
          -102.0, 35.0, 0,
        ],
      },
      height: 0,
      material: {
        solidColor: {
          color: {
            //引用上面对象的轮廓颜色作为这里的填充色
            reference: "fillColor-reference#label.outlineColor",
          },
        },
      },
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer");
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));