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

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

官网示例链接：https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512×256.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

2、创建tile

var wmsLayer = new ol.layer.Tile({
source: wmsSource,
});
3、加载到map中

map.addLayer(wmsLayer);
效果如下

完整代码；

<!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 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>

————————————————
版权声明：本文为CSDN博主「mylove10086」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014572215/article/details/109055508

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

相关文章

归档

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