cesium展示部分地图

中心点为半径的范围

// Use clipping planes to selectively hide parts of the globe surface.

const viewer = new Cesium.Viewer("cesiumContainer", {
  skyAtmosphere: false,
  shouldAnimate: true,
  terrainProvider: Cesium.createWorldTerrain(),
  scene3DOnly: true,
});
const globe = viewer.scene.globe;

// For tracking state when switching exampleTypes
let clippingPlanesEnabled = true;
let edgeStylingEnabled = false;

  // Pick a position at the Grand Canyon
  const position = Cesium.Cartographic.toCartesian(
    new Cesium.Cartographic.fromDegrees(116.2665534, 39.0939345, 100)
  );
  const distance = 20000.0;
  const boundingSphere = new Cesium.BoundingSphere(position, distance);

  globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
    planes: [
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(1.0, 0.0, 0.0),
        distance
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(-1.0, 0.0, 0.0),
        distance
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(0.0, 1.0, 0.0),
        distance
      ),
      new Cesium.ClippingPlane(
        new Cesium.Cartesian3(0.0, -1.0, 0.0),
        distance
      ),
    ],
    unionClippingRegions: true,
    edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
    edgeColor: Cesium.Color.WHITE,
    enabled: clippingPlanesEnabled,
  });
  globe.backFaceCulling = false;
  globe.showSkirts = false;

  viewer.camera.viewBoundingSphere(
    boundingSphere,
    new Cesium.HeadingPitchRange(0.5, -0.5, boundingSphere.radius * 5.0)
  );
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.2665534, 39.0939345),
    billboard: {
      image: "../images/whiteShapes.png",
      imageSubRegion: new Cesium.BoundingRectangle(49, 43, 18, 18),
      color: Cesium.Color.LIME,
    },
  });

const redEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.2665534, 39.0939345),
  name: "Red ellipse on surface",
  ellipse: {
    semiMinorAxis: 20000.0,
    semiMajorAxis: 30000.0,
    material: Cesium.Color.RED.withAlpha(1),
  },
});
viewer.flyTo(redEllipse);

经纬度范围

const viewer = new Cesium.Viewer("cesiumContainer", {
  skyAtmosphere: false,
});
viewer.scene.moon.show = false;
viewer.scene.fog.enabled = false;
viewer.scene.sun.show = false;
viewer.scene.skyBox.show = false;
var coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(113.72363,37.587596,116.140623,39.189179);

viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;

const redEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(113.72363,37.587596),
  name: "Red ellipse on surface",
  ellipse: {
    semiMinorAxis: 250.0,
    semiMajorAxis: 250.0,
    material: Cesium.Color.RED.withAlpha(1),
  },
});
viewer.flyTo(redEllipse);