配置GeoServer并用Leaflet调用GeoServer中WMS地图服务(附图文教程和详细代码)
下载安装GeoServer
参考这个博主可对GeoServer进行安装,写的很详细:
https://blog.csdn.net/aLoudVoice_/article/details/105459531?
以导入shp数据为例
根据以上博主的操作步骤后,打开GeoServer,然后在浏览器中进入以下网址:
http://localhost:8080/geoserver/web/
登录账号密码,默认用户名为:admin,密码为:geoserver
登录后点击“工作区”:
点击“添加新的工作区”
配置一个新的工作区后点击“保存”:
点击“数据存储”后点击“添加新的数据存储”:
这里我们选择Shapefile:
新建矢量数据源,工作区要选择刚才为例创建的“spl_test”,设置好数据源名称,选择shp数据源的位置后点击保存:
然后点击“发布”:
然后按下图点击确定边框后点击保存:
然后就可以看到创建好的图层了:
点击“Layer Preview”后在对应的数据点击“OpenLayers”可以对刚才导入的数据进行预览:
预览效果如下:
Leaflet中加载WMS服务
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>leaflet Demo 2</title>
<style>
#map {
height: 900px;
}
</style>
<!-- css文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<!-- js文件 -->
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = new L.Map('map', {
center: new L.LatLng(39.86, 116.45),
zoom: 4,
zoomControl: false
});
L.control.zoom({zoomInTitle:"放大",zoomOutTitle:"缩小"}).addTo(map)
var baseLayers = {
"高德影像": L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
maxZoom: 18
}).addTo(map),
"OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}),
"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
maxZoom: 18
}),
"腾讯地图": L.tileLayer('http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0', {
maxZoom: 18
}),
};
var layerControl = L.control.layers(baseLayers, {}, {
position: 'topleft',
collapsed: true
}).addTo(map);
// 加载WMS
var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/spl_test/wms?", {
layers: 'Town',// 要加载的图层名
format: 'image/png',//返回的数据格式
transparent: true,
// crs: L.CRS.EPSG4326
});
console.log(map.getCenter());
map.addLayer(wmsLayer);
</script>
</body>
</html>
注:在加载WMS的url中,spl_test为创建的工作区;layers后的Town为工作区内的图层名,可在Layer Preview中可看到
运行结果图:
附:若想对其数据进行样式设置可在"style"中选择对应数据类型修改其颜色
由于导入的数据为面数据,点击上图中“polygon”后并修改颜色后运行代码结果图如下:
转载请注明出处