Cesium 案例（三） Web Map Service(WMS) Washington DC 2017 Wall

WMS

Cesium.Ion.defaultAccessToken = "token";

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

      // Add a WMS imagery layer

      const layer = new Cesium.ImageryLayer(

        new Cesium.WebMapServiceImageryProvider({

          //提供由 Web 地图服务 (WMS) 服务器托管的平铺图像。

          url: "https://nationalmap.gov.au/proxy/http://geoserver.nationalmap.nicta.com.au/geotopo_250k/ows",

          layers: "Hydrography:bores",

          //获取 WMS 图层的名称，以逗号分隔。

          parameters: {

            transparent: true,

            format: "image/png",

          },

          //在 GetMap URL 中传递给 WMS 服务器的附加参数。

        })

      );

      viewer.imageryLayers.add(layer);

      // Start off looking at Australia.

      viewer.camera.setView({

        //设置相机位置、方向和变换。

        destination: Cesium.Rectangle.fromDegrees(

          114.591,

          -45.837,

          148.97,

          -5.73

        ),//摄像机在 WGS84（世界）坐标中的最终位置，或从自上而下视图可见的矩形。

      });

Washington DC 2017 

  // viewer.flyTo(layer); flyTo(target,options)将相机飞到提供的实体、实体或数据源。

      //如果数据源仍在加载过程中或可视化仍在加载中，则此方法在执行飞行之前等待数据准备好。

 

WALL

      const redWall = viewer.entities.add({

        name: "Red wall at height",

        wall: {

          positions: Cesium.Cartesian3.fromDegreesArrayHeights([

            //给定一个经度、纬度和高度值数组，其中经度和纬度以度为单位，返回一个笛卡尔位置数组。

            -115.0,

            44.0, 200000.0, -90.0, 44.0, 200000.0,

          ]),

          minimumHeights: [100000.0, 100000.0],

          //获取或设置指定要用于墙底部而不是地球表面的高度数组的属性。

          //如果已定义，则数组的长度必须与 Wall#positions 相同。

          material: Cesium.Color.RED,

        },

      });

      const greenWall = viewer.entities.add({

        name: "Green wall from surface with outline",

        wall: {

          positions: Cesium.Cartesian3.fromDegreesArrayHeights([

            -107.0, 43.0, 100000.0, -97.0, 43.0, 100000.0, -97.0, 40.0,

            100000.0, -107.0, 40.0, 100000.0, -107.0, 43.0, 100000.0,

          ]),

          material: Cesium.Color.GREEN,

          outline: true,

        },

      });

      const blueWall = viewer.entities.add({

        name: "Blue wall with sawtooth heights and outline",

        wall: {

          positions: Cesium.Cartesian3.fromDegreesArray([

            -115.0, 50.0, -112.5, 50.0, -110.0, 50.0, -107.5, 50.0, -105.0,

            50.0, -102.5, 50.0, -100.0, 50.0, -97.5, 50.0, -95.0, 50.0, -92.5,

            50.0, -90.0, 50.0,

          ]),

          maximumHeights: [

            100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000,

            100000, 200000, 100000,

          ],

          //获取或设置指定要用于墙顶部而不是每个位置的高度的高度数组的属性。

          //如果已定义，则数组的长度必须与 Wall#positions 相同。

          minimumHeights: [

            0, 100000, 0, 100000, 0, 100000, 0, 100000, 0, 100000, 0,

          ],

          material: Cesium.Color.BLUE.withAlpha(0.5),

          outline: true, //获取或设置指定墙是否为轮廓的属性

          outlineColor: Cesium.Color.PINK,

        },

      });

      viewer.zoomTo(viewer.entities);