【cesium加载影像-地形】

geoserver 发布的tif

geoserver 链接: geoserver发布

var imageryProvider = new Cesium.WebMapServiceImageryProvider({
            // 这里是你的 geoserver服务点击查看图层的 url
            // url: 'http://localhost:5501/geoserver/work/wms?',
            url: '/geoserver/work/wms?',  // 这里改为代理地址
            // 这里是自定义的图层名称
            layers: 'work:yingDeMap',  // 要对应说 geoserver 图层
            parameters: {
                // service: 'WMS',
                format: 'image/png',
                transparent: true,
                // style : 'raster',
            },
        });
        // 图层添加
      viewer.imageryLayers.addImageryProvider(imageryProvider);

1.初始cesium添加影像

   //获取所有影像
    const layers = viewer.imageryLayers._layers;
    console.log('影像');
    console.log(layers);
    var baseLayer = viewer.scene.imageryLayers.get(1);
    viewer.imageryLayers.remove(baseLayer);

使用 UrlTemplateImageryProvider 和 ArcGisMapServerImageryProvider

1. 本地影像瓦片

  var viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        // url: "http://localhost:456/static/Map/result/{z}/{x}/{y}.png",
        url: "./result/{z}/{x}/{y}.png",
        }),
     });

2. 网络加载url

     // 1.加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
   imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
                }),

//or
    imageryProvider : new Cesium.UrlTemplateImageryProvider({
      url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
              layer: "tdtVecBasicLayer",
              style: "default",
              format: "image/png",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
              }),
//or
    // 2.加载百度高德地图（加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图或者其他互联网地图的接口，只需要将这段替换上面的天地图就行）
    imageryProvider : new Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                layer: "tdtVecBasicLayer",
                style: "default",
                format: "image/png",
                tileMatrixSetID: "GoogleMapsCompatible",
                show: false
               })

2.添加影像

1. 图层添加

    // 影像提供者
  var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://elevation3d.arcgis.com/arcgis/rest/services/World_Imagery/MapServer",
    })
    // 图层添加
    const layer =  viewer.imageryLayers.addImageryProvider(imageryProvider);
    // 或者
    const layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.ArcGisMapServerImageryProvider({
        url: "https://elevation3d.arcgis.com/arcgis/rest/services/World_Imagery/MapServer",
    })
    )
    // 移除影像
    viewer.imageryLayers.remove(layer);

2. 图层移除

   viewer.imageryLayers.remove(layer);
    viewer.imageryLayers.removeAll();

3.地形提供

     // 天地图地形
     terrainProvider: new Cesium.CesiumTerrainProvider({
          url: "http://data.mars3d.cn/terrain",
              }),
              

// 设置新的地形提供者
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    url: "http://example.com/terrain",
});

// 移除地形提供者
viewer.terrainProvider = undefined;