参考链接：https://space.bilibili.com/597185371/channel/collectiondetail?sid=1650498

利用Geoserver发布地图服务，服务类型WMS。

采用Cesium调用wms服务，源码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <script src="./Build/CesiumUnminified/Cesium.js"></script>
    <style>
      @import url(./Build/CesiumUnminified/Widgets/widgets.css);
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
    Cesium.Ion.defaultAccessToken='你的Token';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        timeline:false,
        animation:false,
        vrButton:true,
        sceneModePicker:false,
        infoBox:true,
        scene3DOnly:true,
        terrainProvider: Cesium.createWorldTerrain()
      });
     viewer._cesiumWidget._creditContainer.style.display = "none";
     var imageryProvider = new Cesium.WebMapServiceImageryProvider({
        url : 'http://127.0.0.1:8180/geoserver/NtuWrokspace/wms?',
        layers : 'NtuWrokspace:省界_region', // WMS图层名称
        parameters : {
           transparent : true, // 设置为透明背景
           format: "image/png",
           srs: "EPSG:4326",
        }
     });

    // 创建一个ImageryLayer实例，将ImageryProvider添加到场景中
    var imageryLayer = new Cesium.ImageryLayer(imageryProvider);
    viewer.imageryLayers.add(imageryLayer);
    viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
        // Fly to tileset
        viewer.flyTo(tileset);

        // Tell the home button not to do anything
        commandInfo.cancel = true;
    });
    </script>
  </body>
</html>

由于Geoserver采样tomcat Web服务器，如果采样node.js发布网页，产生跨域调用，F12看到报错：

Demo02.html:1 Access to XMLHttpRequest at ‘http://127.0.0.1:8180/geoserver/NtuWrokspace/wms?transparent=true&format=image%2Fpng&srs=EPSG%3A4326&service=WMS&version=1.1.1&request=GetMap&styles=&layers=NtuWrokspace%3A%E7%9C%81%E7%95%8C_region&bbox=-180%2C-90%2C0%2C90&width=256&height=256‘ from origin ‘http://127.0.0.1:8080‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

把网络源码都放到tomcat下发布，

网页访问结果如下：

因为开启了infoBox属性为true，所以可以直接显示属性查询框。