如何在leaflet里面 展示geoserver图层?
先搭建geoserver服务,启动服务
写一个html页面展示地图,
地图用高德地图
调用geoserver 接口 展示图层
在geoserver里面找到图层的案例列表:
然后找一个图层去leaflet调用 .
下面图片是调用好的效果.
我这里加载两个图层 ,
分别是 nurc空间 的 nurc:Img_Sample
和topp的空间的topp:states
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>leaflet</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<div id="mapDiv" style="width: 800px;height: 600px;"></div>
<script>
var map = new L.Map("mapDiv", {
zoom: 3,
center: [39.9, -116.40],
boxZoom: true,
});
var url = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
var layer = new L.TileLayer(url, {
subdomains: "1234"
});
map.addLayer(layer);
var marker = new L.marker([39.99, 116.3]);
//marker.addTo(map);
var wmsLayer = L.tileLayer.wms("http://localhost:8071/geoserver/nurc/wms?", {
layers: 'nurc:Img_Sample',//需要加载的图层
format: 'image/png',//返回的数据格式
transparent: true,
//crs: L.CRS.EPSG4326
});
map.addLayer(wmsLayer);
var wmsLayer2 = L.tileLayer.wms("http://localhost:8071/geoserver/topp/wms?", {
layers: 'topp:states',//需要加载的图层
format: 'image/png',//返回的数据格式
transparent: true,
//crs: L.CRS.EPSG4326
});
map.addLayer(wmsLayer2);
//console.log(map.getCenter());
</script>
</body>
</html>