[Xây dựng WebGIS #9] – GetFeatureInfo

Ở bài này chúng ta sẽ tìm hiểu cách lấy thông tin của đối tượng trên bản đồ bằng cách kick chuột vào đối tượng.

Đầu tiên chúng ta thêm một thẻ div để hiển thị thông tin lên trang như sau:

<div id="info"></div>

Sau đó thêm sự kiện click vào bản đồ như sau:

map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = "Loading... please wait...";
var view = map.getView();
var viewResolution = view.getResolution();
var source = ThuaDat.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
if (url) {
document.getElementById('info').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
}
});

Sau khi click vào bản đồ thì đối tượng tìm thấy sẽ hiển thị như ở dưới.

Với cách này thì chúng ta sẽ hiển thị tất cả thuộc tính của đối tượng và không tùy chỉnh được. Để có thể kiểm soát được data chúng ta sẽ không lấy dữ liệu kiểu iframe ‘text/html’ nữa mà chuyển sang ‘application/json’ và sẽ request để lấy dữ liệu, dùng javascript parse json để phân tách các phần tử của đối tượng tìm được, sau đó dùng data đó hiển thị theo cách chúng ta muốn. Chúng ta viết lại sự kiện singleclick như sau:

map.on('singleclick', function (evt) {
var view = map.getView();
var viewResolution = view.getResolution();
var source = ThuaDat.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{ 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });
if (url) {
$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (n) {
var content = "<table>";
for (var i = 0; i < n.features.length; i++) {
var feature = n.features[i];
var featureAttr = feature.properties;
content += "<tr><td>Số thửa:" + featureAttr["shthua"]
+ "</td><td>Số tờ bản đồ:" + featureAttr["shbando"]
+ "</td><td>Diện tích:" + featureAttr["dientich"]
+ "</td><td>Loại đất:" + featureAttr["kh2003"]
+"</td></tr>"
}
content += "</table>";
$("#info").html(content);
}
});
}
});

 

Ở đây chúng ta thấy { ‘INFO_FORMAT’: ‘application/json’, ‘FEATURE_COUNT’: 50 }); info format đã chuyển thành application/json do vậy chúng ta có thể dùng $.ajax của jquery để request nó sau đó trả về giá trị. Các bạn có thể tìm hiểu thêm về Jquery Ajax để hiểu rõ hơn cách load ajax nhé. Sau đó chúng ta sẽ parse Json để lấy các giá trị chúng ta cần. $(“#info”).html(content); để đưa toàn bộ content vào thẻ div id=info. featureAttr[“shthua”] thì shthua là tên trường trong database của chúng ta.Các bạn có thể sửa lại tên trường theo database của mình, hiển thị như thế nào thì tùy mỗi người, ở đây đơn giản chỉ đưa ra một bảng dữ liệu như hình

Chú ý:  Trong trường hợp hàm trên không chạy được, các bạn ấn F12 trên trình duyệt , mở thẻ Console các bạn gặp lỗi:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost&#8217; is therefore not allowed access.

Nghĩa là Tomcat của chúng ta chưa config Cross-Domain requests, để config chúng ta vào <thư mục Tomcat>/conf/web.xml. Tìm đến phần config cho filter (Built In Filter Mappings được comment), thêm như sau:

<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

 

Khởi động lại Tomcat và chạy lại để xem kết quả.

Code toàn bộ bài :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<script type="text/javascript">
var ThuaDat;
$("#document").ready(function () {
var format = 'image/png';
var bounds = [592435.5625, 2286018.5,
593105.1875, 2286636];
ThuaDat = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/dc/wms',
params: {
'FORMAT': format,
'VERSION': '1.1.1',
STYLES: '',
LAYERS: 'dc:TD_12646',
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:3405',
units: 'm',
axisOrientation: 'neu'
});
var view = new ol.View({
projection: projection
});
var map = new ol.Map({
target: 'map',
layers: [
ThuaDat
],
view: view
});
//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);
}
});
map.on('singleclick', function (evt) {
document.getElementById('info').innerHTML = "Loading... please wait...";
var view = map.getView();
var viewResolution = view.getResolution();
var source = ThuaDat.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{ 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });
if (url) {
$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (n) {
var content = "<table>";
for (var i = 0; i < n.features.length; i++) {
var feature = n.features[i];
var featureAttr = feature.properties;
content += "<tr><td>Số thửa:" + featureAttr["shthua"]
+ "</td><td>Số tờ bản đồ:" + featureAttr["shbando"]
+ "</td><td>Diện tích:" + featureAttr["dientich"]
+ "</td><td>Loại đất:" + featureAttr["kh2003"]
+"</td></tr>"
}
content += "</table>";
$("#info").html(content);
}
});
}
});
});
</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=dc:TD_12646" />
<div id="info"></div>
</body>
</html>

 

 

 

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

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

Tham khảo bài gốc ở :
[Xây dựng WebGIS #9] – GetFeatureInfo

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

DownLoad ảnh vệ tinh Landsat 8

Hình ảnh
Để bắt đầu với phần mềm Envi ta cần phải có dữ liệu vệ tinh để tiến hành xử lí. Như vậy, ta có thể Download ở đâu ???? Hiện nay, có rất nhiều website chia sẻ dữ liệu vệ tinh miễn phí như: +Website của cục khảo thí địa chất Hoa Kỳ (USGS): https://earthexplorer.usgs.gov/ +Website chia sẻ dữ liệu MODIS của UWG: https://ladsweb.modaps.eosdis.nasa.gov/ +Website chia sẻ dữ liệu Sentinel của ESA: https://scihub.copernicus.eu/ …………… Nếu muốn tìm hiểu sâu các bạn có thể truy cập vào một trong những web bên trên để có thể kiếm thêm thông tin về dữ liệu mà các bạn muốn sử dụng phục vụ nghiên cứu. Để làm ví dụ cơ bản ta sẽ sử dụng bộ dữ liệu ảnh quang Landsat 8 để tiến hành download (USGS) Đặc điểm ảnh Landsat 8: Là bộ dữ liệu mới nhất của Vệ tinh Landsat, với độ phân giải trung bình (30x30m) đã được tiền xử lí sơ bộ, mỗi tệp ảnh Landsat 8 được down về được đăng kí tọa độ WGS84 và hiệu chỉnh yếu tố địa hình rất thuận tiện để sử dụng. +Bắt đầu tải ảnh với (USGS), cần thực hiện đăng ký một
Đọc thêm

CẮt ảnh theo ranh giới (Sử dụng File ranh giới dạng *shp)

Hình ảnh
Công tác cắt ảnh này giúp loại bỏ những thông tin thừa ra khỏi khu vực nghiên cứu của bạn, Hiện nay trên youtube cũng có hướng dẫn về phần này rất nhiều. Tuy nhiên để cho các bạn hiểu hơn về quy trình cắt ảnh, mời cái bạn xem bài viết sau.   Đầu tiên: để cắt được ảnh ta cần vùng ranh giới dưới dạng *.shp.  Vì lí do các bài trước được viết dựa trên dữ liệu ảnh của khu vực TPHCM, cho nên mình sẽ lấy ranh giới TPHCM dưới dạng *.shp để thực hiện quá trình cắt ảnh. B1. Ranh giới dưới dạng *.shp khi mở bằng phần mềm ArcGis có dạng như sau B2. Mở Envi Classical 5.3, mở ảnh đã ghép sẵn chứa khu vực cần cắt. Trên thanh menu Chọn File/Open Vector File . Chọn đường dẫn vào Folder chứa thư mục *.shp của bạn. Rồi nhấn Open >>> Xem lại: Ghép ảnh vệ tinh B3. Hiển thị hộp thoại ta chọn Choose để chọn đường dẫn lưu file B4. Hiển thị ra hộp thoại chứa file *.evf ,  ta Click vô file vừa mới chuyển nhấn Load Selected/ Display 1#. Ta Click vô  File/Export Active Layer to ROIs
Đọc thêm

Bản đồ du lịch Việt Nam

Hình ảnh
Bản đồ du lịch Việt Nam thể hiện đầy đủ các tuyến điểm du lịch cần thiết với các thông tin bản đồ du lịch cho từng tỉnh/thành, khu vực riêng biệt. Đối với bản đồ du lịch tỉnh hiện được được cập nhật, hỗ trợ mới nên chưa thống nhất. Bản đồ du lịch tuyến điểm Việt Nam [caption id="attachment_1657" align="alignnone" width="2000"] Bản đồ du lịch Việt Nam dành cho dân phượt bụi[/caption] Bản đồ du lịch tuyến du lịch nổi tiếng Việt Nam [caption id="attachment_1658" align="aligncenter" width="1654"] Bàn đồ, sơ đồ tuyến điểm du lịch Việt Nam[/caption] Bản đồ du lịch Việt Nam (theo tỉnh/thành) Bản đồ du lịch Tây Bắc Vùng Tây Bắc  là vùng miền núi phía tây của  miền Bắc Việt Nam , có chung đường biên giới với Lào và Trung Quốc. Vùng này có khi được gọi là  Tây Bắc Bắc Bộ  và là một trong 3 tiểu vùng địa lý tự nhiên của Bắc Bộ Việt Nam (2 tiểu vùng kia là  Vùng Đông Bắc  và  Đồng bằng sông Hồng ). Về mặt hành chính, vùng Tây Bắ
Đọc thêm