多坐标线面对象

约 957 字大约 3 分钟

2024-09-23

流动线，如何改变方向

目前无参数控制，由坐标方向决定；坐标是个数组，进行倒序操作即可；

线对象某个点位显示的很细或者显示异常

解决办法，按需选择：

可设置贴地参数 clampToGround 为 true;
设置 granularity 参数,如果项目内坐标再固定区域大小可以固定一个数值，否则建议像下面一样计算得到值。

const graphic = new mars3d.graphic.PolylineEntity({
  positions: points,
  style: {
    width: 5,
    color: "#ffff00",
    granularity: mars3d.PolyUtil.getGranularity(points, 300),
  },
});
map.graphicLayer.addGraphic(graphic);

polyline 线的宽度设置成固定值，如 30 米

polyline 的宽度是像素单位，目前不支持米

polyline 线如何设置成渐变色

const graphic = new mars3d.graphic.PolylinePrimitive({
  positions,
  style: {
    width: 5,
    materialType: mars3d.MaterialType.LineFlow,
    materialOptions: {
      image: "//data.mars3d.cn/img/textures/line-color-yellow.png",
      speed: 0, // 重点，静态的
    },
  },
});
graphicLayer.addGraphic(graphic);

polygon 面怎么设置渐变

目前有 2 种实现方式

图片材质：贴图片材质实现，图片可以利用其他第 3 方库根据业务数据生成。
自定义材质：直接写 shader（需要懂 webgl），自定义材质来实现

如何沿着一条弯曲的线计算线上面的坐标

比如说顺着弯曲的线添加文本

可以把文字拆成一个字对应一个 Label 对象，对象的点位根据线来计算或固化好。

function addDemoGraphic5(graphicLayer) {
  const graphic = new mars3d.graphic.PolylineEntity({
    positions: [
      [117.313682, 31.7416, 10.85],
      [117.311934, 31.774753, 19.71],
      [117.305473, 31.800304, 23.86],
    ],
    style: {
      width: 5,
      materialType: mars3d.MaterialType.PolylineDash,
      materialOptions: {
        color: Cesium.Color.BLUE,
        gapColor: Cesium.Color.YELLOW,
        dashPattern: 0b1111000000,
      },
    },
    attr: { remark: "示例5" },
  });
  graphicLayer.addGraphic(graphic);

  addSplitLabel({
    positions: graphic.positionsShow,
    text: "合肥火星科技有限公司",
    step: 200,
  });
}

function addSplitLabel(options) {
  const {positions} = options;
  const len = positions.length;
  const text = options.text.split(""); // 文本
  const step = options.step ?? 100; // 间隔 米

  let allDistance = 0;
  for (let i = 1; i < len; i++) {
    const distance = Cesium.Cartesian3.distance(positions[i - 1], positions[i]);
    positions[i]._distance = distance;
    allDistance += distance;
  }
  let startDistance = (allDistance - (text.length - 1) * step) / 2;
  let thisDistance = 0;

  function getTextPoint(pt1, pt2) {
    const temp = startDistance - thisDistance;
    if (temp > 0) {
      const newpt = mars3d.PointUtil.getOnLinePointByLen(pt1, pt2, temp);
      textPoints.push(newpt);
      startDistance += step;
    } else if (temp === 0) {
      textPoints.push(pt2);
      startDistance += step;
    }
  }

  const textPoints = [];
  for (let i = 1; i < len; i++) {
    const pt1 = positions[i - 1];
    const pt2 = positions[i];
    const distance = pt2._distance;
    while (
      thisDistance + distance >= startDistance &&
      textPoints.length < text.length
    ) {
      getTextPoint(pt1, pt2);
    }
    if (textPoints.length >= text.length) {
      break;
    }
    thisDistance += distance;
  }

  textPoints.forEach((position, index) => {
    const graphic = new mars3d.graphic.LabelEntity({
      position,
      style: {
        text: text[index],
        font_size: 46, // 字号放大一倍
        scale: 0.5, // scale传0.5
        font_family: "楷体",
        color: "#00ffff",
        outline: true,
        outlineColor: "#000000",
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
    });
    graphicLayer.addGraphic(graphic);
  });
}