Openlayers4加载WMS地图

前面介绍过Openlayers2加载地图的方法。但是Openlayers2现在已经算很老的版本，只有在老项目中可能还在用到。最新的Openlayers已经升级到了Openlayers5。

WMS图层可以看做是一张张PNG图片按照网格平铺在地图上的一幅图，一般用做地图的底图。WMS地图服务可以使用Geoserver来进行发布。使用openlayers配合Geoserver是实现前端地图展示最常见的操作方法。基本代码如下：

var map,wmsLayer;
function initMap(){
    wmsLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://localhost:8080/geoserver/chinaNS/wms",
            params:{
                'LAYERS': "chinaNS:china",
                'TILED': true
            },
            transition: 0 
        })
    });

    var view = new ol.View({
        center: [108.7,35.8],
        zoom: 4,
        projection: "EPSG:4326"
    });
    
    var zoom = new ol.control.Zoom();
    map = new ol.Map({
        target: 'map',
        controls: [zoom],
        view: view,
        layers: [wmsLayer,vectorLayer]
    });
}

在上面代码中，涉及到了openlayers4中ol.layer.Tile、ol.source.TileWMS、ol.View、ol.control.Zoom、ol.Map等几个类。以下一一介绍：

ol.layer.Tile API
从类名上可以看出这个类首先是个图层，ol.layer.Tile类即代表瓦片图层。地图可以理解为由多个图层上下叠加起来而成的。在ol中，除了ol.layer.Tile，还有如ol.layer.Vector、ol.layer.Image等等其它的图层类。
ol.source.TileWMS API
WMS服务瓦片图层数据源，在上面代码中：
url参数：指定了WMS服务地址
params参数：layers指定了geoserver中的工作空间名和图层名
transition：透明度，0为透明。
ol.View API
视图，用于控制地图的显示范围、中心点、分辨率等等。
ol.control.Zoom API
缩放控件
ol.Map API
地图容器，一个地图对象最少应该包含一个视图、一个以上的图层及目标容器。
示例的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/js/ol4/v4.6.5-dist/ol.css" rel="stylesheet">
    <link href="/js/bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/js/jquery-2.0.0/jquery.min.js"></script>
    <script src="/js/ol4/v4.6.5-dist/ol.js"></script>
    <style>
        html,body,#map{
            width: 100%;
            height: 600px;
            border: 0ch;
            background-color:#151515
        }
    </style>
</head>
<body>
    <div id = 'map'></div>
    <script src="/js/ol_work/map-init.js"></script>
    <script>
        $(document).ready(function(){
            initMap();
        })
    </script>
</body>
</html>

Openlayers4加载WMS地图

猜你喜欢