cesium自定义材质问题

Question

我在PolylineTrailMaterialProperty.js文件中自定义了cesium的材质，添加了贴图。但是效果不太理想，因为部分线段由于长短不一，贴图被贴到材质上后被严重拉伸导致看起来有的部分很长有的部分很短。
有没有办法让贴图不被拉伸而是等比例的显示或者降低拉伸的程度

// let Cesium = require('./static/Cesium/Cesium.js')

const PolylineTrailLinkMaterialProperty = (function () {
  // 动态线材质
  function PolylineTrailLinkMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = new Date().getTime();
  }

  Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      },
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      },
    },
    color: Cesium.createPropertyDescriptor("color"),
  });

  PolylineTrailLinkMaterialProperty.prototype.getType = function () {
    return "PolylineTrailLink";
  };

  PolylineTrailLinkMaterialProperty.prototype.getValue = function (
    time,
    result
  ) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(
      this._color,
      time,
      Cesium.Color.WHITE,
      result.color
    );
    result.image = Cesium.Material.PolylineTrailLinkImage;
    result.time =
      ((new Date().getTime() - this._time) % this.duration) / this.duration;
    return result;
  };

  PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    return (
      this === other ||
      (other instanceof PolylineTrailLinkMaterialProperty &&
        Cesium.Property.equals(this._color, other._color))
    );
  };

  Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
  Cesium.Material.PolylineTrailLinkType = "PolylineTrailLink";
  Cesium.Material.PolylineTrailLinkImage = require("./assets/material12.png"); //材质图片
  Cesium.Material.PolylineTrailLinkSource =
    "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
    czm_material material = czm_getDefaultMaterial(materialInput);\n\
    vec2 st = materialInput.st;\n\
    vec4 colorImage = texture2D(image, vec

Answer 1

由人工智能和答主提供，可以参考如下，如果回答的不正确，及时评论区回复，我追加回答，谢谢。

你可以尝试使用Cesium的scaleAndTranslate函数来调整贴图的大小和位置，以使其适应不同的线段长度。以下是一个示例：

// 获取贴图的宽度和高度
var imageWidth = Cesium.Material.PolylineTrailLinkImage.width;
var imageHeight = Cesium.Material.PolylineTrailLinkImage.height;

// 计算缩放比例
var scaleX = imageWidth / lineSegmentLength;
var scaleY = imageHeight / lineSegmentLength;

// 使用scaleAndTranslate调整贴图大小和位置
result.image = Cesium.Material.PolylineTrailLinkImage.scaleAndTranslate({
    x: -0.5 * scaleX,
    y: -0.5 * scaleY,
    z: 0,
    width: scaleX,
    height: scaleY
});

这样，贴图将根据线段的长度进行缩放，而不会拉伸或压缩。你可以根据实际情况调整缩放比例和偏移量。