[Xây dựng WebGIS #11] – Hiển thị Popup

Bài này chúng ta sẽ tìm hiểu cách sử dụng popup trong OpenLayer sử dụng overlay. Các bạn có thể tìm hiểu thêm về các API trong bài theo link sau: ol.Map ,ol.Overlay,ol.View

Đầu tiên chúng ta thêm các style cho popup như sau:

<style>
 .map, .righ-panel {
 height: 500px;
 width: 40%;
 float: left;
 }
 .map {
 border: 1px solid #000;
 }
 .ol-popup {
 position: absolute;
 background-color: white;
 -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
 filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
 padding: 15px;
 border-radius: 10px;
 border: 1px solid #cccccc;
 bottom: 12px;
 left: -50px;
 min-width: 180px;
 }
 .ol-popup:after, .ol-popup:before {
 top: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 }
 .ol-popup:after {
 border-top-color: white;
 border-width: 10px;
 left: 48px;
 margin-left: -10px;
 }
 .ol-popup:before {
 border-top-color: #cccccc;
 border-width: 11px;
 left: 48px;
 margin-left: -11px;
 }
 .ol-popup-closer {
 text-decoration: none;
 position: absolute;
 top: 2px;
 right: 8px;
 }
 .ol-popup-closer:after {
 content: "<img draggable="false" class="emoji" alt="✖" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/2716.svg">";
 }
 </style>

 

Thêm một thẻ div popup, thẻ div này sẽ chứa dữ liệu chúng ta muốn hiển thị

<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>

Thêm đoạn code khai báo overlay

/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};

Thêm khai báo overlay vào đối tượng map

var map = new ol.Map({
target: 'map',
layers: [
ThuaDat
],
overlays: [overlay],//them khai bao overlays
view: view
});

Sửa lại trong sự kiện click map của bài trước, sau khi request chúng ta không cho hiển thị lên thẻ div info như trước nữa mà đưa vào trong thẻ div đã khai báo overlay như sau:

$("#popup-content").html(content);
overlay.setPosition(evt.coordinate);

Kết quả sau khi chúng ta kick chọn vào đối tượng trên bản đồ sẽ thấy có popup như sau:

Sau đây là code cả 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, .righ-panel {
height: 500px;
width: 40%;
float: left;
}
.map {
border: 1px solid #000;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 180px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "<img draggable="false" class="emoji" alt="✖" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/2716.svg">";
}
</style>
<script type="text/javascript">
var ThuaDat;
$("#document").ready(function () {
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
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
],
overlays: [overlay],
view: view
});
var styles = {
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
})
})
};
var styleFunction = function (feature) {
return styles[feature.getGeometry().getType()];
};
var vectorLayer = new ol.layer.Vector({
//source: vectorSource,
style: styleFunction
});
map.addLayer(vectorLayer);
//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) {
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>
</tr>
<tr>
<td>Số tờ bản đồ:" + featureAttr["shbando"]
+ "</td>
</tr>
<tr>
<td>Diện tích:" + featureAttr["dientich"]
+ "</td>
</tr>
<tr>
<td>Loại đất:" + featureAttr["kh2003"]
+ "</td>
</tr>
"
}
content += "</table>
";
$("#popup-content").html(content);
overlay.setPosition(evt.coordinate);
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(n)
});
vectorLayer.setSource(vectorSource);
}
});
}
});
});
</script>
</head>
<body>
<div id="map" class="map"></div>
<div class="righ-panel">
<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>
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</body>
</html>

 

Các bạn có thể tham khảo thêm ví dụ của OpenLayer về popup tại đây: http://openlayers.org/en/v3.15.1/examples/popup.html

Hẹn các bạn ở những bài tiếp theo

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

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

Xem nguyên bài viết tại :
[Xây dựng WebGIS #11] – Hiển thị Popup

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