【CesiumJS-2】自定义地图图层与加载地形服务

基于vue3+vite的CesiumJS学习与使用

实现效果 

Cesium加载地图图层

  viewer.value = new Cesium.Viewer("cesiumContainer", {
    baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
      url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      minimumLevel: 1,
      maximumLevel: 18
    })),
  });

或者

  let imgLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    minimumLevel: 1,
    maximumLevel: 18
  }));
  viewer.value.imageryLayers.add(imgLayer);

Cesium加载地形服务

1. terrainProvider加载地形

  viewer.value = new Cesium.Viewer("cesiumContainer", {
    baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
      url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      minimumLevel: 1,
      maximumLevel: 18
    })),
    // 地形服务
    terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {requestWaterMask: true, requestVertexNormals: true}),
  });

或者

  try {
    const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(
      1,
      {
        // 水流动效果
        requestWaterMask: true,
        // 山 沟 立体效果
        requestVertexNormals: true,
      }
    );
    viewer.value.terrainProvider = terrainProvider;
  } catch (error) {
    console.log(`Failed to add world imagery:${error}`);
  }

fromIonAssetId：使用的是cesium自带的地形；如果要使用自己的地形数据，改为fromUrl；

await Cesium.CesiumTerrainProvider.fromUrl("xxxx数据地址", {requestWaterMask: true, requestVertexNormals: true})

2. terrain加载地形服务

  viewer.value = new Cesium.Viewer("cesiumContainer", {
    baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
      url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      minimumLevel: 1,
      maximumLevel: 18
    })),
    // 地形服务
    terrain: new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1,{requestWaterMask: true, requestVertexNormals: true}))
  });

或者

  const terrain = new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1, {requestVertexNormals: true, requestWaterMask: true}));
  viewer.value.scene.setTerrain(terrain);

fromIonAssetId：使用的是cesium自带的地形；如果要使用自己的地形数据，改为fromUrl；

new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromUrl("xxxx地形数据地址",{requestVertexNormals: true, requestWaterMask: true}))