参考链接：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下发布，
网页访问结果如下：
