Openlayers4加载WMS地图

78 阅读 0 评论 52 点赞

我是靠谱客的博主超帅咖啡，最近开发中收集的这篇文章主要介绍Openlayers4加载WMS地图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

openlayer4加载WMS

由于新项目中，用采用了Openlayers4，因此，在这里说一下Openlayer4加载WMS地图服务的方法。
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>