PolylineDashImageMaterial

CesiumJS
1 

const MaterialType = "PolylineDashImageMaterial";

function PolylineDashImageMaterialProperty(option) {


  if (option.url && typeof option.url === "string") {
    this.url = option.url;
  } else {
    throw new Error("url is not a string");
  }

  this._color = undefined;
  this._definitionChanged = new Cesium.Event();
  this._time = (new Date()).getTime();

  if (option.color && option.color instanceof Cesium.Color) {
    this.color = option.color;
  } else {
    this.color = Cesium.Color.RED.withAlpha(0.5)
  }

  if (option.duration && typeof option.duration === "number" && option.duration > 0) {
    this.duration = option.duration;
  } else {
    this.duration = 10;
  }

  if (option.repeatPixel && typeof option.repeatPixel === "number" && option.repeatPixel > 0) {
    this.repeatPixel = option.repeatPixel;
  } else {
    this.repeatPixel = 200;
  }

}



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

PolylineDashImageMaterialProperty.prototype.getType = () => {
  return MaterialType;
}

PolylineDashImageMaterialProperty.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 = this.url;
  result.repeatPixel = this.repeatPixel;
  result.time = (((new Date()).getTime() - this._time) % (this.duration * 1000)) / (this.duration * 1000);
  return result;
}

PolylineDashImageMaterialProperty.prototype.equals = (other) => {
  return this === other
}

Cesium.Material._materialCache.addMaterial(MaterialType, {
  fabric: {
    type: MaterialType,
    uniforms: {
      color: Cesium.Color.RED.withAlpha(0.5),
      image: Cesium.Material.DefaultImageId,
      time: 0.0,
      repeatPixel: 300
    },
    source:
      `
    in float v_polylineAngle;
    mat2 rotate(float rad) {
        float c = cos(rad);
        float s = sin(rad);
        return mat2(
            c, s,
            -s, c
        );
    }

    czm_material czm_getMaterial(czm_materialInput materialInput)
    {
          czm_material material = czm_getDefaultMaterial(materialInput);
          vec2 st = materialInput.st;

          vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;

          float pos_x = pos.x;

          float dashPosition = fract(pos_x / (repeatPixel * czm_pixelRatio));

          vec4 colorImage = texture(
            image,
            vec2(fract(dashPosition - time), fract(st.t))
          );

          material.alpha = colorImage.a;
          material.diffuse = color.rgb;

          return material;
    }
    `
  },
  translucent: () => {
    return true;
  }
});

const positions = [
  [118.8958776368, 31.9551742856, 37],
  [118.8952529569, 31.9556593492, 37],
  [118.895163408, 31.9555758481, 37],
  [118.8951946168, 31.95555155, 37]
]

viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(
      function () {
        let arr = []
        for (let i = 0; i < positions.length; i++) {
          arr.push(positions[i][0], positions[i][1], positions[i][2])
        }
        return arr
      }()
    ),
    width: 30,
    material: new PolylineDashImageMaterialProperty({
      url: "/img/arrow2.png",
      color: Cesium.Color.YELLOW,
      repeatPixel: 200,
      duration: 10
    }),
  },
});

viewer.zoomTo(viewer.entities)

PolylineDashImageMaterial

Hello everyone,When I zoom in the camera, the texture direction will change to the opposite.
Can someone help me answer this，thanks！

2

This is tracked in icon flip in custom polyline material · Issue #9576 · CesiumGS/cesium · GitHub , but unfortunately, that does not (yet) provide a solution.

3

All right, thanks for everything. Thank you.