Openlayers2图层加载（一）WMS图层
Openlayers+Geoserver来实现前端地图开发，是常见的一种地图开发操作方式。以下简单介绍
js代码
function loadWMSLayer(){
var map,baseLayer
map = new OpenLayers.Map("map");
baseLayer = new OpenLayers.Layer.WMS(
"basic",
"http://localhost:8080/geoserver/chinaNS/wms",
{
layers:"chinaNS:shengjie"
},
{isBaseLayer:true}
);
map.addLayer(baseLayer);
map.setCenter(new OpenLayers.LonLat(108, 34), 4);
}
其中：
map对象为地图的容器，baseLayer为图层。
baisc，为给这个WMS图层一个名字；
layers参数指定你要加载的图层，chinaNS是Geoserver中的工作空间名，shengjie是图层名；
isBaseLayer指定这个图层是作为map对象的底图（一个map可以加载很多图层，但是底图只能设置一个）。
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="/css/map.css" rel="stylesheet">
<script src="/jquery-2.0.0/jquery.min.js"></script>
<style>
#map{
outline: 0.5px solid lightslategray;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h2>WMS图层</h2>
<div id="map"></div>
<script src="../openlayers2/lib/OpenLayers.js"></script>
<script src="../js/ol2/eg/wms.js"></script>
<script>
$(document).ready(function(){
loadWMSLayer();
})
</script>
</body>
</html>
顺便贴下wms图层采用的样式
* {
stroke: #BDBDBD;
stroke-width: 0.5;
fill: #FAFAFA;
}
图层样式采用CSS来写，比起sld样式，简洁方便。要想Geoserver支持css样式，需要安装geoserver的扩展，后面再写。
结果
转载自：https://blog.csdn.net/u012413551/article/details/84144660
