description

Custom Material-Property based on Cesium.MaterialProperty interface, maybe you could get more information from this article Cesium:自定义MaterialProperty..

installation

npm install fade-material

or

yarn add fade-material

options

There are some options could be configured, the example is as following,

new FadeMaterialProperty({
            color: Cesium.Color.fromCssColorString("#30ECFF").withAlpha(0.5),
            center: {
              x: 0.5,
              y: 0.5
            },
            power: 1.0,
            stretch: 0
          })

More details:

• color: The Cesium.Color instance to fill polygon.
• center: The format of this param is like,this item which has been normalized between zero and one stands for the center coordinate of the polygon.

{
    x: 0.5,
    y: 0.5
},

• power: the intensity of emission.
• stretch: the gradient color smoothing algorithm which is an enum-value,and the value 1 is be advised.

1: Linear smoothing algorithm based on Normalization (default),
2: Logarithmic smoothing algorithm,
3: Quadratic function smoothing algorithm,
4: The combination of Logarithmic smoothing algorithm and Quadratic function smoothing algorithm,
any other non-zero value maybe cause the alpha-component of rgba to be used.

example

import FadeMaterialProperty from 'fade-material'

//create Cesium.Viewer
 const viewer = new Cesium.Viewer("container_id");
//prepare an array Cartesian3
 const positions = [
      {
        lng: 119.0,
        lat: 31.0,
      },
      {
        lng: 119.0,
        lat: 31.2,
      },
      {
        lng: 119.1,
        lat: 31.2,
      },
      {
        lng: 119.15,
        lat: 31.1,
      },
      {
        lng: 119.1,
        lat: 31.0,
      },
    ].map(({ lng, lat }) => Cesium.Cartesian3.fromDegrees(lng, lat));

//create Entity with polygon
const entity = new Cesium.Entity({
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(positions, []),
        material: 
          new FadeMaterialProperty({
            color: Cesium.Color.fromCssColorString("#30ECFF").withAlpha(0.5),
            center: {
              x: 0.5,
              y: 0.5
            },
            power: 1.0,
            stretch: 0
          })
      }
    });
// render entity
viewer.entities.add(entity);

preview