cesium 加载geoserver 的 wms、wmts、wfs、wcs服务

geoserver版本：2.13.1

cesium版本：1.48

wms服务：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>wms</title>
    <script src="Cesium1.48/Cesium/Cesium.js"></script>
    <style>
        @import url(Cesium1.48/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        
        var viewer = new Cesium.Viewer('cesiumContainer', {
            shouldAnimate : true
        });
        viewer.scene.imageryLayers.removeAll();
        viewer.scene.imageryLayers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
            url : './Cesium1.48/Cesium/Assets/Textures/NaturalEarthII',
            fileExtension : 'jpg'
        }));    
        
        // Add a WMS imagery layer
        //'USGS Shaded Relief (via WMS)',
        var provider21 = new Cesium.WebMapServiceImageryProvider({
            url : 'https://basemap.nationalmap.gov/arcgis/services/USGSHydroCached/MapServer/WMSServer',
            layers : '0',
        })
        
        //viewer.imageryLayers.addImageryProvider(provider21); //加载arcgis server 发布的wms服务
        
        
        // Add a GEOSERVER WMS imagery layer
        var provider22 = new Cesium.WebMapServiceImageryProvider({
              url: 'http://localhost:8080/geoserver/nurc/wms',
              layers: 'nurc:Img_Sample',
              parameters: {
                  service : 'WMS',
                  format: 'image/png',
                  transparent: true,
              }
          });
        
        viewer.imageryLayers.addImageryProvider(provider22);//加载geoserver 发布的wms服务
</script> </body> </html>

wmts服务：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>wmts</title>
    <script src="Cesium1.48/Cesium/Cesium.js"></script>
    <style>
        @import url(Cesium1.48/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>    
        var viewer = new Cesium.Viewer('cesiumContainer', {
            shouldAnimate : true
        });
        viewer.scene.imageryLayers.removeAll();
        viewer.scene.imageryLayers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
            url : './Cesium1.48/Cesium/Assets/Textures/NaturalEarthII',
            fileExtension : 'jpg'
        }));

        // Add a WMTS imagery layer
        var provider = new Cesium.WebMapTileServiceImageryProvider({
            url : 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSHydroCached/MapServer/WMTS',
            layer : 'USGSHydroCached',
            style : 'default',
            format : 'image/png',
            tileMatrixSetID : 'default028mm',
            maximumLevel: 18,
            credit : 'U. S. Geological Survey'
        });
        //viewer.imageryLayers.addImageryProvider(provider);//加载arcgis server 发布的wmts服务
        
        // Add a geoserver  WMTS imagery layer    
        var url='http://localhost:8080/geoserver/gwc/rest/wmts/nurc:Img_Sample/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png';
        var image = new Cesium.WebMapTileServiceImageryProvider({
             url:url,
             layer:'nurc:Img_Sample',
             format: "image/jpeg",
             style:'raster',
             maximumLevel: 21,
             tileMatrixSetID:"EPSG:900913",
         });
         viewer.imageryLayers.addImageryProvider(image);//加载geoserver 发布的wmts服务
        
    </script>
</body>
</html>

wfs 服务：

按照geojson加载，只能显示，无法实现完整的 wfs 服务功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>wfs</title>
    <script src="Cesium1.48/Cesium/Cesium.js"></script>
    <script src="jquery.js"></script>
    <style>
        @import url(Cesium1.48/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #menu {
            position: absolute;
            top: 80px;
            left: 10px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="creditContainer" style="display: none;"></div>
    
    <script>

        var mbox = new Cesium.MapboxImageryProvider({
            mapId: 'mapbox.satellite'
        });

        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: mbox,
            creditContainer: "creditContainer",
            selectionIndicator: true,
            animation: false,
            baseLayerPicker: true,
            geocoder: false,
            timeline: false,
            sceneModePicker: true,
            navigationHelpButton: false,
            infoBox: true,
            fullscreenButton: true
        });
        
        viewer.scene.imageryLayers.removeAll();
        viewer.scene.imageryLayers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
            url : './Cesium1.48/Cesium/Assets/Textures/NaturalEarthII',
            fileExtension : 'jpg'
        }));
        
        
        
        var lat = -42; 
        var lon = 147;
        //设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(lon, lat, 600000)
        });
        
        //////////////////////////////////////////////////////////////////////////
        // Loading WFS
        //////////////////////////////////////////////////////////////////////////
        $.ajax({
               //点  坐标：曼哈顿
               url:"http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger:poi&maxFeatures=50&outputFormat=application%2Fjson",
               //线  坐标：var lat = -42;    var lon = 147;
               //url:"http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:tasmania_roads&maxFeatures=50&outputFormat=application%2Fjson",
               //面  坐标：   美国
               //url:"http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application%2Fjson",
               cache: false,
               async: true,
               success: function(data) {
                    var datasource=Cesium.GeoJsonDataSource.load(data);
                    viewer.dataSources.add(datasource);
               },
               error: function(data) {
                    alert("error");
               }
        });
        
        
        
    </script>
</body>
</html>

wcs服务：

按照图片加载，只能显示，无法实现完整的 wcs 服务功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>wcs_png</title>
    <script src="Cesium1.48/Cesium/Cesium.js"></script>
    <script src="jquery.js"></script>
    <style>
        @import url(Cesium1.48/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #menu {
            position: absolute;
            top: 80px;
            left: 10px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" class="fullSize"></div>
    
    <script>

        var viewer = new Cesium.Viewer('cesiumContainer');
        
        viewer.scene.imageryLayers.removeAll();
        viewer.scene.imageryLayers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
            url : './Cesium1.48/Cesium/Assets/Textures/NaturalEarthII',
            fileExtension : 'jpg'
        }));

        
        var rectangle=Cesium.Rectangle.fromDegrees(112,39,112.4,39.2);
        viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
            //服务器测试图片
            //url:"http://localhost:8089/demo_wcs/t.png",
            //geoserver 返回png
            url:"http://localhost:8080/geoserver/sf/wms?service=WMS&version=1.1.0&request=GetMap&layers=sf:sfdem&styles=&bbox=589980.0,4913700.0,609000.0,4928010.0&width=768&height=577&srs=EPSG:26713&format=image%2Fpng",
            //geoserver 返回geotiff   失败
            //url:"http://localhost:8080/geoserver/wcstest/wms?service=WMS&version=1.1.0&request=GetMap&layers=wcstest:shanghai&styles=&bbox=120.673828125,30.498046875,122.6953125,31.904296875&width=768&height=534&srs=EPSG:4326&format=image%2Fgeotiff",
            
            rectangle: rectangle
        }));
        var layers = viewer.imageryLayers;  
        //viewer._cesiumWidget._creditContainer.style.display="none";
        viewer.camera.setView({
            destination: Cesium.Rectangle.fromDegrees(112,39,112.4,39.2) //定位坐标点，建议使用谷歌地球坐标位置无偏差
        });



        
    </script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mumu122GIS/p/12157739.html