二、Cesium添加天地图以及其他实体

一、初始化配置项

options = {
    // Start in Columbus Viewer
    animation: false, //动画
    fullscreenButton: false, //全屏按钮
    // sceneMode: this.Cesium.SceneMode.COLUMBUS_VIEW, //初始场景模式
    baseLayerPicker: false, //图层选择
    geocoder: false, //搜索-地理编码器
    homeButton: false, //初始位置-主页按钮
    infoBox: true, //点击后的信息框
    sceneModePicker: false, //场景模式，二维三维切换
    timeline: false, //时间轴
    navigationHelpButton: false, //导航帮助按钮
    creditContainer: "credit", //id为credit的容器，需要自定义
}

 viewer.imageryLayers.removeAll(); // 移除所有默认图层

二、添加天地图

 /**添加天地图 */
  addTDT() {
    let TDT_IMG_C =
      "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
      "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
      "&style=default&format=tiles&tk=" +
      this.token;

    //标注
    let TDT_CIA_C =
      "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
      "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
      "&style=default&format=tiles&tk=" +
      this.token;

    const imageryProviderImg = new this.Cesium.WebMapTileServiceImageryProvider(
      {
        url: TDT_IMG_C,
        layer: "tdtImg_c",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: this.subdomains,
        tilingScheme: new this.Cesium.GeographicTilingScheme(),
        tileMatrixLabels: this.tileMatrixLabels,
        maximumLevel: 14,
        show: true,
      }
    );
    // const that = this;
    const imageryProviderCia = new this.Cesium.WebMapTileServiceImageryProvider(
      {
        url: TDT_CIA_C,
        layer: "tdtImg_c",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: this.subdomains,
        tilingScheme: new this.Cesium.GeographicTilingScheme(),
        tileMatrixLabels: this.tileMatrixLabels,
        maximumLevel: 14,
        show: true,
        /*  defaultNightAlpha: function (x, y) {
      // 在不规则范围内加载图层数据，其他地方透明,level, time
      var isInExtent = that.checkPointInExtent(
        x,
        y,
        this.irregularExtent
      );
      return isInExtent ? 1.0 : 0.0;
    }, */
        // rectangle,
      }
    );

    let img_c = new this.Cesium.ImageryLayer(imageryProviderImg, {});
    let cia_c = new this.Cesium.ImageryLayer(imageryProviderCia, {});

    this.viewerInstance.imageryLayers.add(img_c);
    this.viewerInstance.imageryLayers.add(cia_c);
  }

三、点

    const pointSource = new this.Cesium.Entity({
      id: "pointEntity",
      position: this.Cesium.Cartesian3.fromDegrees(112, 32.03883, 0.0),
      point: {
        color: this.Cesium.Color.RED,
        pixelSize: 10,
      },
    });
    // 添加点
    this.viewerInstance.entities.add(pointSource);

四、线

    const polylineSource = new this.Cesium.Entity({
      id: "polylineEntity",
      polyline: {
        positions: this.Cesium.Cartesian3.fromDegreesArray([
          112, 32, 112.3, 32.5,
        ]),
        material: this.Cesium.Color.GREEN,
        width: 10,
      },
    });
    // 添加线
    this.viewerInstance.entities.add(polylineSource);

五、面

    const polygonSource = new this.Cesium.Entity({
      id: "polygonEntity",
      polygon: {
        hierarchy: this.Cesium.Cartesian3.fromDegreesArray([
          112.58777, 32.03883, 113.72777, 34.07883, 113.40777, 32.01883,
        ]),
        material: this.Cesium.Color.BLUE.withAlpha(0.6),
      },
    });
    // 添加面
    this.viewerInstance.entities.add(polygonSource);

六、正方体

    const box = new this.Cesium.Entity({
      name: "Cube",
      position: this.Cesium.Cartesian3.fromDegrees(112, 32.03883, 0),
      box: {
        dimensions: new this.Cesium.Cartesian3(10000.0, 10000.0, 10000.0),
        material: this.Cesium.Color.RED.withAlpha(0.5),
      },
    });
    this.viewerInstance.entities.add(box);

七、圆锥体

 this.viewerInstance..entities.add({
      position: this.Cesium.Cartesian3.fromDegrees(112.0, 32.0, 200000.0),
      cylinder: {
        length: 400000.0,//高度
        topRadius: 0.0,//bottomRadius设置成与bottomRadius一样就是圆柱体
        bottomRadius: 200000.0,//圆柱体底部半径
        material: this.Cesium.Color.fromRandom({ alpha: 1.0 }),//颜色随机
      },
    });

参考cesium案例

相关代码

Cesium.Math.setRandomNumberSeed(1234);

const viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
const entities = viewer.entities;

let i;
let height;
let positions;
const stripeMaterial = new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE.withAlpha(0.5),
  oddColor: Cesium.Color.BLUE.withAlpha(0.5),//
  repeat: 5.0//蓝白相间五条
});
//多边形
entities.add({
  rectangle: {//矩形
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0),
    outline: false,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 40,
    stRotation: Cesium.Math.toRadians(45),//材质(背景)倾斜或旋转
    material: stripeMaterial,//材质
  },
});

//不规则多边形，未倾斜或旋转
entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -107.0,
        27.0,
        -107.0,
        22.0,
        -102.0,
        23.0,
        -97.0,
        21.0,
        -97.0,
        25.0,
      ])
    ),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 40000,
    material: stripeMaterial,//材质
  },
});
//椭圆
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.0, 25.0),
  ellipse: {
    semiMinorAxis: 300000.0,//短半轴
    semiMajorAxis: 500000.0,//长半轴
    rotation: Cesium.Math.toRadians(-40.0),//区别于stRotation
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(22),//材质(背景)倾斜或旋转
    material: stripeMaterial,//材质
  },
});
//短半轴和长半轴一样长，是圆吗？
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0),
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 250000.0,
    rotation: Cesium.Math.toRadians(-40.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(90),
    material: stripeMaterial,
  },
});
//带高度的矩形
entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      -118.0,
      38.0,
      -116.0,
      40.0
    ),
    extrudedHeight: 500000.0,
    outline: true,
    outlineColor: Cesium.Color.RED,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),//随机色
  },
});
//带高度带轮廓的椭圆体
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0),
  ellipse: {
    semiMinorAxis: 100000.0,
    semiMajorAxis: 200000.0,
    height: 100000.0,
    extrudedHeight: 200000.0,
    rotation: Cesium.Math.toRadians(90.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//带高度带轮廓的多边形
entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0,
        30.0,
        -115.0,
        30.0,
        -117.1,
        31.1,
        -118.0,
        33.0,
      ])
    ),
    height: 300000.0,
    extrudedHeight: 700000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//圆柱体 -topRadius和bottomRadius相等
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
  cylinder: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0,
        30.0,
        -115.0,
        30.0,
        -117.1,
        31.1,
        -118.0,
        33.0,
      ])
    ),
    length: 200000.0,
    topRadius: 150000.0,
    bottomRadius: 150000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

for (i = 0; i < 5; ++i) {
  height = 100000.0 + 200000.0 * i;
  //带轮廓的正方体
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
    box: {
      dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
//带轮廓的椭球体
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),//椭圆体半径
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
//带轮廓半径一样的椭球体
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),//椭圆体半径,三个一样为圆球
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}
//墙
entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -95.0,
      50.0,
      -85.0,
      50.0,
      -75.0,
      50.0,
    ]),
    maximumHeights: [500000, 1000000, 500000],//最大高度的一条线
    minimumHeights: [0, 500000, 0],//最小高度的一条线
    outline: true,
    outlineColor: Cesium.Color.LIGHTGRAY,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});
//无轮廓的矩形
entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -85.0, 40.0),
    material: stripeMaterial,
  },
});
//回字形
entities.add({
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        -109.0,
        30.0,
        -95.0,
        30.0,
        -95.0,
        40.0,
        -109.0,
        40.0,
      ]),
      holes: [//多边形中的孔
        {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -107.0,
            31.0,
            -107.0,
            39.0,
            -97.0,
            39.0,
            -97.0,
            31.0,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                -105.0,
                33.0,
                -99.0,
                33.0,
                -99.0,
                37.0,
                -105.0,
                37.0,
              ]),
              holes: [
                {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -103.0,
                    34.0,
                    -101.0,
                    34.0,
                    -101.0,
                    36.0,
                    -103.0,
                    36.0,
                  ]),
                },
              ],
            },
          ],
        },
      ],
    },
    material: stripeMaterial,
  },
});
//椭圆
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.0, 35.0),
  ellipse: {
    semiMinorAxis: 200000.0,
    semiMajorAxis: 500000.0,
    rotation: Cesium.Math.toRadians(30.0),
    material: stripeMaterial,
  },
});
//椭圆-长半轴短半轴相等
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-72.0, 35.0),
  ellipse: {
    semiMinorAxis: 200000.0,
    semiMajorAxis: 200000.0,
    rotation: Cesium.Math.toRadians(30.0),
    material: stripeMaterial,
  },
});
//长方体
entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      -110.0,
      38.0,
      -107.0,
      40.0
    ),
    height: 700000.0,//起始高度
    extrudedHeight: 1000000.0,//截止高度
    rotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//带高度无轮廓的椭圆体
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0),
  ellipse: {
    semiMinorAxis: 100000.0,
    semiMajorAxis: 200000.0,
    height: 300000.0,
    extrudedHeight: 700000.0,
    rotation: Cesium.Math.toRadians(-40.0),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//带高度无轮廓的多边形
entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -113.0,
        30.0,
        -110.0,
        30.0,
        -110.0,
        33.0,
        -111.5,
        31.0,
        -113.0,
        33.0,
      ])
    ),
    extrudedHeight: 300000.0,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//圆锥体，顶部的半径topRadius为零的圆柱体
entities.add({
  position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0),
  cylinder: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0,
        30.0,
        -115.0,
        30.0,
        -117.1,
        31.1,
        -118.0,
        33.0,
      ])
    ),
    length: 400000.0,
    topRadius: 0.0,
    bottomRadius: 200000.0,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

for (i = 0; i < 5; ++i) {
  height = 200000.0 * i;
//含有起始高度的长半轴短半轴相等的椭圆
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0),
    ellipse: {
      semiMinorAxis: 200000.0,
      semiMajorAxis: 200000.0,
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
//含有起始高度的矩形
  entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        -67.0,
        27.0,
        -63.0,
        32.0
      ),
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}

for (i = 0; i < 5; ++i) {
  height = 100000.0 + 200000.0 * i;
  //不带轮廓的正方体
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-108.0, 45.0, height),
    box: {
      dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
      material: Cesium.Color.fromRandom({ alpha: 1.0 }),
    },
  });
//不带轮廓的椭球体
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-104.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
      material: Cesium.Color.fromRandom({ alpha: 1.0 }),
    },
  });
//不带轮廓半径一样的椭球体
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-100.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
      material: Cesium.Color.fromRandom({ alpha: 1.0 }),
    },
  });
}

positions = [];
for (i = 0; i < 40; ++i) {
  positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 15.0));
}
//发光
entities.add({
  polyline: {
    positions: positions,
    width: 10.0,
    material: new Cesium.PolylineGlowMaterialProperty({
      color: Cesium.Color.DEEPSKYBLUE,
      glowPower: 0.25,
    }),
  },
});

positions = [];
for (i = 0; i < 40; ++i) {
  positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 9.0));
}
//黑白围墙
entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -90.0,
      43.0,
      100000.0,
      -87.5,
      45.0,
      100000.0,
      -85.0,
      43.0,
      100000.0,
      -87.5,
      41.0,
      100000.0,
      -90.0,
      43.0,
      100000.0,
    ]),
    material: new Cesium.CheckerboardMaterialProperty({
      repeat: new Cesium.Cartesian2(20.0, 6.0),
    }),
  },
});
//无起始高度无高度走廊
entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0,
      45.0,
      -125.0,
      50.0,
      -125.0,
      55.0,
    ]),
    width: 100000,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//带起始高度带高度走廊
entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0,
      45.0,
      -125.0,
      50.0,
      -125.0,
      55.0,
    ]),
    width: 100000,
    height: 300000,
    extrudedHeight: 400000,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});
//有起始无高度走廊
entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0,
      45.0,
      -125.0,
      50.0,
      -125.0,
      55.0,
    ]),
    width: 100000,
    height: 700000,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});
//星形
function starPositions(arms, rOuter, rInner) {
  const angle = Math.PI / arms;
  const pos = [];
  for (let i = 0; i < 2 * arms; i++) {
    const r = i % 2 === 0 ? rOuter : rInner;
    const p = new Cesium.Cartesian2(
      Math.cos(i * angle) * r,
      Math.sin(i * angle) * r
    );
    pos.push(p);
  }
  return pos;
}
//折线体
entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -102.0,
      15.0,
      100000.0,
      -105.0,
      20.0,
      200000.0,
      -110.0,
      20.0,
      100000.0,
    ]),
    shape: starPositions(7, 30000.0, 20000.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 1,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//折线体
entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -102.0,
      15.0,
      -105.0,
      20.0,
      -110.0,
      20.0,
    ]),
    shape: starPositions(7, 30000.0, 20000.0),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});
//圆形
function computeCircle(radius) {
  const positions = [];
  for (let i = 0; i < 360; i++) {
    const radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians)
      )
    );
  }
  return positions;
}
//折线图
entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -104.0,
      13.0,
      -107.0,
      18.0,
      -112.0,
      18.0,
    ]),
    shape: computeCircle(40000.0),
    material: Cesium.Color.WHITE,
  },
});

viewer.zoomTo(viewer.entities);

注意

• 使用zoomTo参数为Entity需要添加到地图才会生效