Cesium学习笔记——调用Geoserver发布的wms服务

太一吾鱼水 / 2023-08-24 / 原文

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <!-- Use correct character set. -->
 5     <meta charset="utf-8" />
 6     <!-- Tell IE to use the latest, best version. -->
 7     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 8     <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
 9     <meta
10       name="viewport"
11       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
12     />
13     <title>Hello World!</title>
14     <script src="./Build/CesiumUnminified/Cesium.js"></script>
15     <style>
16       @import url(./Build/CesiumUnminified/Widgets/widgets.css);
17       html,
18       body,
19       #cesiumContainer {
20         width: 100%;
21         height: 100%;
22         margin: 0;
23         padding: 0;
24         overflow: hidden;
25       }
26     </style>
27   </head>
28   <body>
29     <div id="cesiumContainer"></div>
30     <script>
31     Cesium.Ion.defaultAccessToken='你的Token';
32     var viewer = new Cesium.Viewer('cesiumContainer', {
33         timeline:false,
34         animation:false,
35         vrButton:true,
36         sceneModePicker:false,
37         infoBox:true,
38         scene3DOnly:true,
39         terrainProvider: Cesium.createWorldTerrain()
40       });
41      viewer._cesiumWidget._creditContainer.style.display = "none"; 
42      var imageryProvider = new Cesium.WebMapServiceImageryProvider({
43         url : 'http://127.0.0.1:8180/geoserver/NtuWrokspace/wms?',
44         layers : 'NtuWrokspace:省界_region', // WMS图层名称
45         parameters : {
46            transparent : true, // 设置为透明背景
47            format: "image/png",
48            srs: "EPSG:4326",
49         }
50      });
51  
52     // 创建一个ImageryLayer实例，将ImageryProvider添加到场景中
53     var imageryLayer = new Cesium.ImageryLayer(imageryProvider);
54     viewer.imageryLayers.add(imageryLayer);
55     viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
56         // Fly to tileset
57         viewer.flyTo(tileset);
58 
59         // Tell the home button not to do anything
60         commandInfo.cancel = true;
61     });
62     </script>
63   </body>
64 </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下发布，