OpenLayers之OGC服务加载
阅读原文时间:2023年07月08日阅读:3
  • 手动构造 GetCapabilities、GetMap 的操作链接,并在浏览器里发送HTTP 请求;利用 OpenLayers 进行 WMS 服务加载;

  • 手动构造 GetCapabilities、GetTile 的操作链接,并在浏览器里发送HTTP 请求;利用 OpenLayers 进行 WMTS 服务加载;

  • 手动构造 GetCapabilities、DescribeFeatureType、GetFeature 的操作链接,并在浏览器里发送 HTTP 请求;利用 OpenLayers 进行 WFS 服务加载以及

    加载时添加过滤条件。

2.1 利用TileWMS加载WMS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">
    <script src="./v6.5.0-dist/ol.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        #map {
            height: 100%;
            width: 100%;
            margin: 0%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>

        var projection = ol.proj.get('EPSG:4326');//地图投影坐标系
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2,
            }),
            layers: [
                new ol.layer.Tile({ source: new ol.source.OSM() })]
        });

        var wmsLayer = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'https://ahocevar.com/geoserver/wms',
                params: { 'LAYERS': 'topp:states' }
            })
        });
        map.addLayer(wmsLayer)
        var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
        map.addControl(mousePositionControl);

    </script>
</body>

</html>

2.2 利用ImageWMS加载WMS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">
    <script src="./v6.5.0-dist/ol.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        #map {
            height: 100%;
            width: 100%;
            margin: 0%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>

        var projection = ol.proj.get('EPSG:4326');//地图投影坐标系

        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2,
            }),
            layers: [
                new ol.layer.Tile({ source: new ol.source.OSM() })]
        });

        var wmsLayer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'usa:states' }
            })
        });

        map.addLayer(wmsLayer)
        var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
        map.addControl(mousePositionControl);

    </script>
</body>

</html>

2.3 加载WMTS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">
    <script src="./v6.5.0-dist/ol.js"></script>
    <style>
        html,
        body,
        div {
            height: 100%;
            width: 100%;
            margin: 0%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent();
        var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = [];
        for (var z = 2; z < 19; ++z) {
            resolutions[z] = size / Math.pow(2, z);
        }
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        url: "http://t{0-6}.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
                        name: "中国矢量1-4级",
                        layer: "vec",
                        style: "default",
                        matrixSet: "c",
                        format: "tiles",
                        wrapX: true,
                        tileGrid: new ol.tilegrid.WMTS({
                            origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions,
                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                        })
                    }),
                }),
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        name: "中国矢量注记1-4级",
                        url: "http://t{0-6}.tianditu.gov.cn/cva_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
                        layer: "cva",
                        style: "default",
                        matrixSet: "c",
                        format: "tiles",
                        wrapX: true,
                        tileGrid: new ol.tilegrid.WMTS({
                            origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions,
                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                        })
                    }),
                })
            ],
            target: "map",
            view: new ol.View({
                center: [120.14805, 30.26971], projection: projection,
                zoom: 3,
                maxZoom: 17, minZoom: 1
            })
        });

    </script>
</body>

</html>

2.4 利用其它格式加载WFS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">
    <script src="./v6.5.0-dist/ol.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        #map {
            height: 100%;
            width: 100%;
            margin: 0%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>

        var projection = ol.proj.get('EPSG:3857');//地图投影坐标系
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [-8908887.277395891, 5381918.072437216],
                zoom: 12,
            }),
            layers: [
                new ol.layer.Tile({ source: new ol.source.OSM() })]
        });

        var vectorSource = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0,0,255,1.0)',
                    width: 2,
                }),
            }),
        });

        var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function (extent) {
                return (
                    "https://ahocevar.com/geoserver/wfs?service=WFS&" +
                    "version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
                    "outputFormat=application/json&srsname=EPSG:3857&" +
                    "bbox=" +
                    extent.join(',') + ',EPSG:3857'
                );
            },
            strategy: ol.loadingstrategy.bboxStrategy,
        });
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0,255,1.0)', width: 2,
                }),
            }),
        });

        map.addLayer(vector)
        var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
        map.addControl(mousePositionControl);

    </script>
</body>

</html>

2.5 利用ol.format.WFS加载WFS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">
    <script src="./v6.5.0-dist/ol.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        #map {
            height: 100%;
            width: 100%;
            margin: 0%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>

        var projection = ol.proj.get('EPSG:3857');//地图投影坐标系
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [-8908887.277395891, 5381918.072437216],
                zoom: 12,
            }),
            layers: [
                new ol.layer.Tile({ source: new ol.source.OSM() })]
        });

        var vectorSource = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0,0,255,1.0)',
                    width: 2,
                }),
            }),
        });

        // generate a GetFeature request
        var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:3857',
            featureNS: 'http://openstreemap.org',
            featurePrefix: 'osm',
            featureTypes: ['water_areas'],
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
                ol.format.filter.like('name', 'Mississippi*'),
                ol.format.filter.equalTo('waterway', 'riverbank')),
        });

        // then post the request and add the received features to a layer
        fetch(' https://ahocevar.com/geoserver/wfs', {
            method: 'POST',
            body: new XMLSerializer().serializeToString(featureRequest),
        })
            .then(function (response) { return response.json(); })
            .then(function (json) {
                var features = new ol.format.GeoJSON().readFeatures(json);
                vectorSource.addFeatures(features);
                map.getView().fit(vectorSource.getExtent());
            });

        map.addLayer(vector)
        var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
        map.addControl(mousePositionControl);

    </script>
</body>

</html>

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章