openlayers学习（二）加载geoserver发布的wms图层

要达到的效果显示geoserver中发布的wms图层，数据使用geoserver自带的示例数据。安装后geoserver后就有的数据

官网示例链接：https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512x256.html

1、创建源TileWMS

var wmsSource = new ol.source.TileWMS({
    url: 'http://localhost:8080/geoserver/tiger/wms',//端口号要改成自己的
    params: {
        'FORMAT': format,
        'VERSION': '1.1.1',
        tiled: true,
        "LAYERS": 'tiger:poi',//tiger--图层的名称空间，poi--图层名称
        "exceptions": 'application/vnd.ogc.se_inimage',
    },
    serverType: 'geoserver',//服务类型geoerver
    crossOrigin: 'anonymous',
});

上面使用的图层来自geoserver

openlayers学习（二）加载geoserver发布的wms图层

2、创建tile

var wmsLayer = new ol.layer.Tile({
    source: wmsSource,
});

3、加载到map中

map.addLayer(wmsLayer);

效果如下

openlayers学习（二）加载geoserver发布的wms图层

完整代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/openlayerv6.4.3/build/ol.js"></script>
    <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css">
    <style>
        .map {
            width: 100%;
            height: 600px;
        }

        a.skiplink {
            position: absolute;
            clip: rect(1px, 1px, 1px, 1px);
            padding: 0;
            border: 0;
            height: 1px;
            width: 1px;
            overflow: hidden;
        }

        a.skiplink:focus {
            clip: auto;
            height: auto;
            width: auto;
            background-color: #fff;
            padding: 0.3em;
        }

        #map:focus {
            outline: #4A74A8 solid 0.15em;
        }
    </style>
</head>
<script>
    var map;

    function init() {

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
            }) //加载谷歌影像地图
        });
        var format = 'image/png';
        var wmsSource = new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/tiger/wms',//端口号要改成自己的
            params: {
                'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "LAYERS": 'tiger:poi',
                "exceptions": 'application/vnd.ogc.se_inimage',
            },
            serverType: 'geoserver',
            crossOrigin: 'anonymous',
        });

        var wmsLayer = new ol.layer.Tile({
            source: wmsSource,
        });

        var view = new ol.View({
            center: [-74.0087, 40.7122],
            projection: 'EPSG:4326',
            zoom: 15
        });
        map = new ol.Map({
            layers: [rootLayer],
            target: 'map',
            view: view
        });
        map.addLayer(wmsLayer);
    }
</script>
<body οnlοad="init()">
<div id="map" class="map" tabindex="0"></div>
</body>
</html>

openlayers学习（二） 加载geoserver发布的wms图层

相关推荐

openlayers学习（二）加载geoserver发布的wms图层