[Xây dựng WebGIS #8] – Bật tắt layer, hiển thị Legends

0
210

Bài này mình sẽ giới thiệu một và chức năng cơ bản của webGIS là bật tắt layer, hiển thị các legend.

Ở code bài trước, chúng ta sẽ thêm các checkbox, mỗi checkbox ứng với 1 layer. Ở đây mình chỉ có một layer nên mình sẽ thêm 1 checkbox như code dưới:

<input type=”checkbox” id=”chkThuaDat” checked /><label for=”chkThuaDat”>Thửa đất</label>

Mặc định chúng ta sẽ hiển thị layer này lên nên sẽ để thuộc tính checked ngay từ đầu.

Trong hàm $(“document”).ready(function(){…}); chúng ta sẽ thêm code bắt sự kiện checkbox này check như sau:

$("#chkThuaDat").change(function () {
if($("#chkThuaDat").is(":checked"))
{
ThuaDat.setVisible(true);
}
else
{
ThuaDat.setVisible(false);
}
});

ThuaDat là layer chúng ta đã khai báo bên trên. Hàm setVisible(var) xác định layer hiển thị hay ko. Chú ý là tùy từng phiên bản Openlayer thì tên hàm có thể khác nhau, các bạn có thể check tại đây: http://openlayers.org/en/v3.15.1/apidoc/

Tiếp theo chúng ta sẽ thêm 1 thẻ img để hiển thị legend của lớp. Để lấy được legend trong GeoServer cung cấp cho ta 1 công cụ là GetLegendGraphic. Đại loại là khi bạn trỏ đến đường link như sau thì GeoServer sẽ trả cho bạn một ảnh chú giải: http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=ten-layer.

Chi tiết từng thuộc tính các bạn xem thêm ở đây: GetLegendGraphic. Đơn giản thì bạn chỉ cần thay link đến GeoServer, thay tên layer vào là xong như code dưới đây:

<img src="http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=ten-layer" />

 

Code tổng hợp:

<head runat="server">
<title>Openlayers test</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<style>
.map {
height: 100%;
width: 100%;
}
</style>
<%-- <link href="bower_components/openlayers3/build/ol.css" rel="stylesheet" />
<script src="bower_components/openlayers3/build/ol.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>--%>
<script type="text/javascript">
$("#document").ready(function () {
var format = 'image/png';
var bounds = [587376.125, 2263541.25,
589508.8125, 2266077];
var ThuaDat = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
params: {
'FORMAT': format,
'VERSION': '1.1.1',
STYLES: '',
LAYERS: 'ThaiBinh:TD12457',
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:3405',
units: 'm',
axisOrientation: 'neu'
});
var map = new ol.Map({
target: 'map',
layers: [
ThuaDat
],
view: new ol.View({
projection: projection
})
});
//map.getView().fitExtent(bounds, map.getSize());
map.getView().fit(bounds, map.getSize());
$("#chkThuaDat").change(function () {
if($("#chkThuaDat").is(":checked"))
{
ThuaDat.setVisible(true);
}
else
{
ThuaDat.setVisible(false);
}
});
});
</script>
</head>
<body>
<div id="map" class="map"></div>
<input type="checkbox" id="chkThuaDat" checked /><label for="chkThuaDat">Thửa đất</label>
</body>
</html>

 

Hen gặp lại các bạn ở các bài sau nhé.

Tác giả: Đỗ Xuân Cường

Nguồn bài viết: cuongdx313.wordpress.com

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.