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:
<imgsrc="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><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><img src="http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=ThaiBinh:TD12457" /></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
