This is the library for wms, wfs, legend, wmsImage request from geoserver to leaflet.
npm install leaflet-geoserver-requestjs
npm install leaflet-geoserver-request
`
- Quick use :
`html
`
$3
WMS request will provides georeferenced map image.
`js
var wmsLayer = L.Geoserver.wms("http://localhost:8080/geoserver/wms", {
layers: "topp:tasmania_roads",
});
wmsLayer.addTo(map);
`
##### WMS options
| Option | Type | Default | Description |
| ----------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| layers | string | undefined | This is required filed. If you have multiple layers, you can add them in a comma seperated values: "workspace:layer1,workspace:layer2" |
| format | string | image/png | formate of the wms request. It may be image/jpeg, image/tiff, application/openlayers |
| transparent | boolean | true | transparent of the map |
| CQL_FILTER | string | INCLUDE | To filter the layer based on their attribute. read more about this |
| zIndex | integer | 1000 | zIndex of the layer |
| attribution | string | layer | attribution of the layer. It will be added at the bottom-left cornor of the map |
| style | string | undefined | style file associated with that layer. If you didn't provide the style field, it will take default style of the layer |
$3
In WFS request, you need to enable the jsonp for GeoServer. By default, jsonp for GeoServer was desabled. open $GEOSERVER_HOME\webapps\geoserver\WEB-INF\web.xml file and uncomment following line,
`xml
ENABLE_JSONP
true
`
Note: WFS request only applicable for vector layer, not for raster
`js
var wfsLayer = L.Geoserver.wfs("http://localhost:8080/geoserver/wfs", {
layers: "topp:tasmania_roads",
});
wfsLayer.addTo(map);
`
##### WFS options
| Options | Type | Default | Description |
| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| layers | string | undefined | This is required filed. If you have multiple layers, you can add them in a comma seperated values: "workspace:layer1,workspace:layer2" |
| style | js object/function | null | The style file can be in form of javascript oject or function. eg style = {color: "black",fillOpacity: "0", opacity: "0.5" } |
wms and wmsImage request is, it can be zoomed to the desired location based on vector layer.
wmsLayers. Rest of other layers can be vector or raster
wmsLayers, wmsCQL_FILTER & wmsStyle fields
wmsCQL_FILTER region
html
`
`js
L.Geoserver.wmsImage("http://localhost:8080/geoserver/wms", {
wmsLayers: [
"workspace:first_layer",
"workspace:second_layer",
"workspace:third_layer",
],
wmsCQL_FILTER: ["district=='Syangja'", "INCLUDE", "INCLUDE"],
wmsStyle: ["style1", "style2", "INCLUDE"],
format: "image/png",
wmsId: "wmsImage",
width: 300,
height: 300,
});
`
$3
The legend request will provide the crossponding legend of the layer to the bottom-left position of the map. In case of not providing style parameter, it will take the default style from GeoServer.
`js
var layerLegend = L.Geoserver.legend("http://localhost:8080/geoserver/wms", {
layers: "topp:tasmania_roads",
style: stylefile,
});
layerLegend.addTo(map);
`
$3
`js
var wfsLayerAdvance = L.Geoserver.wfs("http://localhost:8080/geoserver/wms", {
layers: "topp:tasmania_roads",
style: {
color: "black",
fillOpacity: "0",
opacity: "0.5",
},
onEachFeature: function (feature, layer) {
layer.bindPopup("this is popuped");
},
CQL_FILTER: "district='Syangja'",
});
map.fitBounds(wfsLayerAdvance.getBounds());
wfsLayerAdvance.addTo(map);
``
|
style="max-width:90%;" width="200" height="60">
|