zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    nginx原理及常用配置
    课程作业03-1
    Java动手动脑02
    Java课程作业02
    java课堂测试2
    Java验证码程序
    课程作业02-2
    课程作业02-1
    课程作业01
    《大道至简》第一章伪代码
  • 原文地址:https://www.cnblogs.com/mumu122GIS/p/12157739.html
Copyright © 2011-2022 走看看