Skip to content

Commit d64ac8c

Browse files
iamtekson-serveriamtekson-server
committed
update on wmsImage request
1 parent 653bb1c commit d64ac8c

File tree

4 files changed

+148
-98
lines changed

4 files changed

+148
-98
lines changed

‎examples/index.html

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎examples/maps.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<link
8+
rel="stylesheet"
9+
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
10+
/>
11+
12+
<title>L.Geoserver</title>
13+
14+
<style>
15+
html, body {
16+
margin: 0;
17+
padding: 0;
18+
}
19+
#map {
20+
width: 100%;
21+
height: 100vh;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div id="map">
27+
<h1 class="leaflet-control">Leaflet L.GeoServer Plugin</h1>
28+
</div>
29+
<a href="https://github.com/iamtekson/l.geoserver"
30+
><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></a>
31+
32+
<!-- <div class="wmsimage" style="float: right;">
33+
<h2>Wms Image</h2>
34+
<img src="" alt="this is image" srcset="" id="wmsImage" />
35+
</div> -->
36+
37+
</body>
38+
</html>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
40+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
41+
<script src="../src/L.Geoserver.js"></script>
42+
43+
<script>
44+
45+
var map = L.map("map", {zoomControl: false}).setView([38.861, 71.2761], 7);
46+
var osmLayer = L.tileLayer(
47+
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
48+
{
49+
maxZoom: 19,
50+
attribution:
51+
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
52+
}
53+
).addTo(map);
54+
55+
//wms
56+
var wms = L.Geoserver.wms("http://tajirisk.ait.ac.th:8080/geoserver/wms", {
57+
layers: `tajikistan:EAR_Builtup`,
58+
});
59+
wms.addTo(map);
60+
61+
//wfs
62+
var wfs = L.Geoserver.wfs("http://tajirisk.ait.ac.th:8080/geoserver/wms", {
63+
layers: `tajikistan:jamoat`,
64+
style: {
65+
color: "red",
66+
fillOpacity: 0,
67+
opacity: 1,
68+
stockWidth: 0.5,
69+
},
70+
onEachFeature: function (f, l) {
71+
l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
72+
},
73+
CQL_FILTER: `name_rg=='Sughd'`,
74+
});
75+
wfs.addTo(map)
76+
77+
//legend
78+
var legend = L.Geoserver.legend("http://tajirisk.ait.ac.th:8080/geoserver/wms", {
79+
layers: `tajikistan:EAR_Builtup`,
80+
});
81+
legend.addTo(map);
82+
</script>

‎examples/wmsImage.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<link
8+
rel="stylesheet"
9+
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
10+
/>
11+
<title>WMSImage-L.Geoserver</title>
12+
<style>
13+
#wmsImage {
14+
padding: 30px;
15+
border: 1px solid black;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<a href="https://github.com/iamtekson/l.geoserver"
22+
><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></a>
23+
24+
<div class="wmsimage">
25+
<h2>Wms Image</h2>
26+
<img src="" alt="this is image" srcset="" id="wmsImage" />
27+
</div>
28+
29+
</body>
30+
</html>
31+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
32+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
33+
<script src="../src/L.Geoserver.js"></script>
34+
35+
<script>
36+
//wmsImage
37+
var wmsImage = L.Geoserver.wmsImage(
38+
"http://tajirisk.ait.ac.th:8080/geoserver/tajikistan/wms",
39+
{
40+
wmsLayers: [
41+
"tajikistan:jamoat",
42+
"tajikistan:EAR_Agriculture",
43+
"tajikistan:district",
44+
],
45+
wmsCQL_FILTER: ["name_rg='Khatlon'", "INCLUDE", "name_rg=='Khatlon'"],
46+
wmsStyle: [
47+
"INCLUDE",
48+
"tajikistan:EAR_Agriculture",
49+
"tajikistan:cql_boundary",
50+
],
51+
format: "image/png",
52+
wmsId: "wmsImage",
53+
width: 600,
54+
height: 600,
55+
transparent: true,
56+
}
57+
);
58+
</script>
59+
60+
61+

‎src/L.Geoserver.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,15 @@ L.Geoserver = L.FeatureGroup.extend({
140140

141141
var otherLayers = "";
142142
var otherStyle = "";
143+
var otherCqlFilter = "";
143144
for (var i = 1; i < that.options.wmsLayers.length; i++) {
144145
otherLayers += that.options.wmsLayers[i];
145146
otherStyle += that.options.wmsStyle[i];
147+
otherCqlFilter +=that.options.wmsCQL_FILTER[i];
146148
if (i != that.options.wmsLayers.length - 1) {
147149
otherLayers += ",";
148150
otherStyle += ",";
151+
otherCqlFilter += ';';
149152
}
150153
}
151154

@@ -154,6 +157,8 @@ L.Geoserver = L.FeatureGroup.extend({
154157
that.baseLayerUrl
155158
}/wms?service=WMS&version=1.1.0&request=GetMap&\
156159
layers=${otherLayers}&\
160+
styles=${otherStyle}&\
161+
cql_filter=${otherCqlFilter}&\
157162
bbox=${(bboxX1 + bboxX2) * 0.5 - maxValue - bufferBbox},${
158163
(bboxY1 + bboxY2) * 0.5 - maxValue - bufferBbox
159164
},${(bboxX1 + bboxX2) * 0.5 + maxValue + bufferBbox},${

0 commit comments

Comments
 (0)