526互联

ol 加载geoserver wms wmts mvt

发布时间 2023-07-26 15:13:25作者: 小鱼写代码的过往
  1. ol 加载geoserver wms
    1. 代码如下
    2. <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>geoserver-wms</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        var projection4326 = new ol.proj.Projection({
            // code: 'EPSG:4490',
            code: 'EPSG:4326',
            units: 'degrees',
        });

        var defaultView = new ol.View({
            projection: projection4326,
            center: [113.3939, 22.977],
            //new ol.proj.fromLonLat([114.15, 22.65]),
            zoom: 10
        });



        //wms 服务
        let testlyr = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: "http://localhost:8880/geoserver/gwc/service/wms",
                params: {
                    'FORMAT': 'image/png',
                    'VERSION': '1.0.0',
                    tiled: true,
                    style: "",
                    layers: 'postgis:ceshi0606',
                }
            })
        })

    
        //底图
        let tileOSM = new ol.layer.Tile({
          //source: new OSM()
          source: new ol.source.OSM()
        });

        var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'degrees'
                })
            ]),
            layers: [testlyr],
            target: 'map',
            view: defaultView
        });
    </script>
</html>
      View Code

       

  2. ol 加载geoserver wmts
    1. 代码如下
    2. <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>geoserver-wmts</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        var projection4326 = new ol.proj.Projection({
            // code: 'EPSG:4490',
            code: 'EPSG:4326',
            units: 'degrees',
            extent: [-180, -90, 180, 90]
        });
        var projection4326 = ol.proj.get('EPSG:4326');

        var defaultView = new ol.View({
            projection: projection4326,
            center: [113.3939, 22.977],
            //new ol.proj.fromLonLat([114.15, 22.65]),
            zoom: 10
        });


        
        


        //wmts 服务    
        const projectionExtent = projection4326.getExtent();
        //console.log(ol.extent.getTopLeft(projectionExtent));  //[-180, 90]
        const size = ol.extent.getWidth(projectionExtent) / 256;
        // const resolutions = new Array(19);
        const matrixIds = new Array(19);
        for (let z = 0; z < 19; ++z) {
            // resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = "EPSG:4326:" + z;
        }
        
        let resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
          0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625,
          6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5,
          4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
          2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
        
        var wmtsSource = new ol.source.WMTS({
            url: 'http://localhost:8880/geoserver/gwc/service/wmts',
            layer: "postgis:ceshi0606",
            matrixSet: 'EPSG:4326',
            format: 'image/png', // 默认：'image/jpeg'    
            projection: projection4326,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds,
            }),
            style: '',
            wrapX: true,
        });
        var wmtsService = new ol.layer.Tile({
            source: wmtsSource
        });
        
        
        var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'degrees'
                })
            ]),
            layers: [wmtsService],
            target: 'map',
            view: defaultView
        });
    </script>
</html>
      View Code

       

  3. ol 加载geoserver mvt
    1. 代码如下
    2. <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>geoserver-mvt</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        var projection4326 = new ol.proj.Projection({
            // code: 'EPSG:4490',
            code: 'EPSG:4326',
            units: 'degrees',
            extent: [-180, -90, 180, 90]
        });
        var projection4326 = ol.proj.get('EPSG:4326');

        var defaultView = new ol.View({
            projection: projection4326,
            center: [113.3939, 22.977],
            //new ol.proj.fromLonLat([114.15, 22.65]),
            zoom: 10
        });



        //mvt 服务    
        const projectionExtent = projection4326.getExtent();
        //console.log(ol.extent.getTopLeft(projectionExtent));  //[-180, 90]
        const size = ol.extent.getWidth(projectionExtent) / 256;
        // const resolutions = new Array(19);
        const matrixIds = new Array(19);
        for (let z = 0; z < 19; ++z) {
            // resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = "EPSG:4326:" + z;
        }

        let resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
            0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625,
            6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5,
            4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
            2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7
        ];

        //加载geoserver mvt
        var gridsetName = 'EPSG:4326'
        var params = {
            'REQUEST': 'GetTile',
            'SERVICE': 'WMTS',
            'VERSION': '1.0.0',
            'LAYER': 'postgis:ceshi0606',
            'STYLE': '',
            'TILEMATRIX': gridsetName + ':{z}',
            'TILEMATRIXSET': gridsetName,
            'FORMAT': 'application/vnd.mapbox-vector-tile',
            'TILECOL': '{x}',
            'TILEROW': '{y}'
        }

        function urlConstruct() {
            let url = "http://localhost:8880/geoserver/gwc/service/wmts" + '?';
            for (let param in this.params) {
                url = url + param + '=' + this.params[param] + '&';
            }
            url = url.slice(0, -1);
            return url;
        }

        //mvt
        var mvtvectorLayer = new ol.layer.VectorTile({
            source: new ol.source.VectorTile({
                format: new ol.format.MVT(),
                projection: projection4326,
                tilePixelRatio: 1,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
                url:urlConstruct(),
                //url: "http://localhost:8880/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=postgis:ceshi0606&STYLE=&FORMAT=application/vnd.mapbox-vector-tile&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&TILECOL={x}&TILEROW={y}"
            })
        })

        var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'degrees'
                })
            ]),
            layers: [mvtvectorLayer],
            target: 'map',
            view: defaultView
        });
    </script>
</html>
      View Code