import {
  Cartesian3,
  Color,
  PolylineArrowMaterialProperty,
  PolylineDashMaterialProperty,
} from "cesium";
import { Fragment } from "react";
import { Entity, PolylineGraphics } from "resium";

function WaterVaporPath() {
  return (
    <Fragment>
      <Entity>
        <PolylineGraphics
          positions={Cartesian3.fromDegreesArrayHeights([
            103, 46, 0, 93, 38, 0,
          ])}
          width={10}
          material={
            new PolylineDashMaterialProperty({
              color: Color.fromCssColorString("#406ec5"),
              dashLength: 20,
            })
          }
        />
      </Entity>
      <Entity>
        <PolylineGraphics
          positions={Cartesian3.fromDegreesArrayHeights([
            93, 38, 0, 93, 37.9, 0,
          ])}
          width={30}
          material={
            new PolylineArrowMaterialProperty(
              Color.fromCssColorString("#406ec5")
            )
          }
        />
      </Entity>
    </Fragment>
  );
}

export default WaterVaporPath;