cesium-polyline-primitive

coplanar-real3d-space-polygon.js

const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;

const positions = [
  new Cesium.Cartesian3(1000, 500, 100),
  new Cesium.Cartesian3(1000, -500, 0),
  new Cesium.Cartesian3(-1000, -500, 0),
  new Cesium.Cartesian3(-1000, 500, 100),
];
const polygonGeometry = Cesium.CoplanarPolygonGeometry.fromPositions({
  vertexFormat: Cesium.VertexFormat.ALL,
  positions,
});

const polygonInstance = new Cesium.GeometryInstance({
  geometry: polygonGeometry,
});

const center = Cesium.Cartesian3.fromDegrees(114, 22.8, 500);
scene.primitives.add(
  new Cesium.Primitive({
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(center),
    geometryInstances: polygonInstance,
    appearance: new Cesium.MaterialAppearance({
      material: Cesium.Material.fromType("Checkerboard"),
      materialSupport:
        Cesium.MaterialAppearance.MaterialSupport.TEXTURED,
    }),
  })
); 

misc.ts

import { 
  Cartesian3, 
  Color,
  ColorGeometryInstanceAttribute,
  GeometryInstance,
  GroundPolylineGeometry,
  GroundPolylinePrimitive,
  Material,
  PerInstanceColorAppearance,
  PolylineGeometry,
  PolylineMaterialAppearance,
  Primitive,
  SphereGeometry,
  Transforms,
  type Viewer,
} from 'cesium'

/**
 * 绘制基准点
 * @param position 
 * @param radius
 * @param color 
 * @returns 
 */
const makeSphere = (position: number[], radius = 1, color = Color.LIGHTCYAN) => {
  const sphere = new SphereGeometry({
    vertexFormat: PerInstanceColorAppearance.VERTEX_FORMAT,
    radius: radius,
  })
  const height = position[2] || 0
  const center = Cartesian3.fromDegrees(position[0], position[1], height)
  const sphereInstance = new GeometryInstance({
    geometry: sphere,
    attributes: {
      color: ColorGeometryInstanceAttribute.fromColor(color),
    }
  })
  return new Primitive({
    modelMatrix: Transforms.eastNorthUpToFixedFrame(center),
    geometryInstances: sphereInstance,
    appearance: new PerInstanceColorAppearance()
  })
}

/**
 * 绘制垂直线
 * @param position 
 */
const makeVerticalLine = (position: number[]) => {
  const height = position[2] || 0
  const line = new PolylineGeometry({
    positions: [
      Cartesian3.fromDegrees(position[0], position[1], height),
      Cartesian3.fromDegrees(position[0], position[1], 0),
    ],
    width: 1,
    vertexFormat: PolylineMaterialAppearance.VERTEX_FORMAT,
  })
  const instance = new GeometryInstance({
    geometry: line,
  })
  return new Primitive({
    geometryInstances: instance,
    appearance: new PolylineMaterialAppearance({
      material: Material.fromType("PolylineDash", {
        color: Color.AZURE,
      })
    })
  })
}

/**
 * 绘制地面交叉线 - 沿经纬度方向
 * @param position 
 */
const makeCrossLines = (position: number[]) => {
  const lon = position[0]
  const lat = position[1]
  const lonLine = new GroundPolylineGeometry({
    positions: [
      Cartesian3.fromDegrees(lon, lat - 1),
      Cartesian3.fromDegrees(lon, lat),
      Cartesian3.fromDegrees(lon, lat + 1),
    ],
    width: 1.5,
  })
  const latLine = new GroundPolylineGeometry({
    positions: [
      Cartesian3.fromDegrees(lon - 1, lat),
      Cartesian3.fromDegrees(lon, lat),
      Cartesian3.fromDegrees(lon + 1, lat),
    ],
    width: 1.5,
  })
  const lonInstance = new GeometryInstance({
    geometry: lonLine,
  })
  const latInstance = new GeometryInstance({
    geometry: latLine
  })
  return new GroundPolylinePrimitive({
    geometryInstances: [lonInstance, latInstance],
    appearance: new PolylineMaterialAppearance({
      material: Material.fromType("PolylineDash", {
        color: Color.DEEPSKYBLUE,
      })
    })
  })
}

/**
 * 为某个坐标点绘制辅助线
 * @param viewer 
 * @param position 
 * @returns 
 */
export const addPositioningHelper = (viewer: Viewer, position: number[]) => {
  const poi = makeSphere(position, 1, Color.RED)
  const leadLine = makeVerticalLine(position)
  const crossLines = makeCrossLines(position)

  viewer.scene.primitives.add(poi)
  viewer.scene.primitives.add(leadLine)
  viewer.scene.groundPrimitives.add(crossLines)

  return {
    poi,
    leadLine,
    crossLines,
  }
}

none-arctype-polyline-enu.js

// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;

// Example 2: Draw a polyline with per vertex colors
const positions = [
  new Cesium.Cartesian3(0, 0.01, 0),
  new Cesium.Cartesian3(150, 0.01, 400),
];
const center = Cesium.Cartesian3.fromDegrees(114, 22.5, 6000);
viewer.entities.add({
  position: center,
  ellipsoid: {
    fill: true,
    radii: new Cesium.Cartesian3(100,100,100),
    material: Cesium.Color.CYAN.withAlpha(0.6),
  },
});
const geom = new Cesium.PolylineGeometry({
  positions: positions,
  width: 3.0,
  arcType: Cesium.ArcType.NONE,
  vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
  colors: [Cesium.Color.RED, Cesium.Color.ORANGE],
  colorsPerVertex: true,
});
scene.primitives.add(
  new Cesium.Primitive({
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(center),
    geometryInstances: new Cesium.GeometryInstance({
      geometry: geom,
    }),
    appearance: new Cesium.PolylineColorAppearance(),
  })
);

polygon-custom-st.js

// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;

// Example 1: Small textured polygon.
let positions = Cesium.Cartesian3.fromDegreesArray([
  -117.4,
  37.4,
  -117.4,
  37,
  -117.2,
  37.1,
  -117.0,
  37,
  -117.0,
  37.4,
]);
let textureCoordinates = {
  positions: [
    new Cesium.Cartesian2(0, 1),
    new Cesium.Cartesian2(0, 0),
    new Cesium.Cartesian2(0.5, 0),
    new Cesium.Cartesian2(1, 0),
    new Cesium.Cartesian2(1, 1),
  ],
};
const smallFlatInstance = new Cesium.GeometryInstance({
  geometry: Cesium.PolygonGeometry.fromPositions({
    positions: positions,
    vertexFormat:
      Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat,
    textureCoordinates: textureCoordinates,
  }),
});

scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: [
      smallFlatInstance,
    ],
    appearance: new Cesium.MaterialAppearance({
      material: new Cesium.Material({
        fabric: {
          type: "Image",
          uniforms: {
            image: "../images/Cesium_Logo_Color.jpg",
          },
        },
      }),
      materialSupport:
        Cesium.MaterialAppearance.MaterialSupport.TEXTURED,
      translucent: false,
    }),
  })
);