Nội dung cơ bản của trang web đƣợc tạo từ công cụ QGIS2WEB

Dựa trên những nội dung cơ bản đã xuất bản ở bƣớc trên, một số dòng code đƣợc thêm vào file HTML và các file JavaScript để bổ sung thêm các nội dung mới, ví dụ nhƣ: (1) Đọc dữ liệu từ Geoserver var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/CSDLDC/wms?', { layers: 'CSDLDC:tanbinh_DC', crs: L.CRS.EPSG4326, maxZoom: 21, transparent: 'true', fill: 'false' } ); (2) Thêm minimap

//add Mini Map

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib = 'Map data © OpenStreetMap contributors';

var osm2 = new L.TileLayer(osmUrl, { minZoom: 0, maxZoom: 13, attribution: osmAttrib });

var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);

(3) Thêm lựa chọn bản đồ nền là ảnh vệ tinh

//Add ESRI Imagery base map var baseLayers = {

'OSM': basemap0,

'ESRI Imagery': L.tileLayer.provider('Esri.WorldImagery') };

(4) Thêm thƣớc tỷ lệ

//add Scale bar to map L.control.scale({

position: 'bottomleft' }).addTo(map);

(5) Thêm thanh tiêu đề và các menu phụ

<nav class="navbar navbar-expand-lg navbar-dark bg-fundamental">

<a class="navbar-brand" href="#"onClick="alert('Thơng tin địa chính P. Tân Bình, Tp. Hải Dƣơng');">

<img src="images/logo.png" alt="Thông tin địa chính-P. Tân Bình" width="24" height="24">

Thơng tin địa chính P. Tân Bình </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-

label="Toggle navigation">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false">

<title>Menu</title>

<path stroke="currentColor" stroke-width="2" stroke- linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path>

</svg> </button>

<div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav ml-auto">

<li class="nav-item">

<a class="nav-link" href="#"onClick="alert('Chức năng này chƣa hoàn thiện');">Giới Thiệu</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"onClick="alert('Chức năng này chƣa hoàn thiện');">Hƣớng dẫn</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"onClick="alert('Chức năng này chƣa hoàn thiện');">Câu hỏi thƣờng gặp</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"onClick="alert('Chức năng này chƣa hồn thiện');">Góp Ý</a>

</li> </ul> </div> </nav>

Để tăng tính trực quan của dữ liệu, dữ liệu địa chính hiển thị trên nền bản đồ OpenStreeMap (OSM) và nền ảnh vệ tinh miễn phí từ ESRI. Trang web hồn thiện có giao diện nhƣ Hình 4.10, bao gồm các thành phần: (1) Khung hiển thị dữ liệu bản đồ; (2) Công cụ quản lý lớp dữ liệu; (3) Nút phóng to, thu nhỏ bản đồ; (4) Cơng cụ tìm kiếm; (5) Cơng cụ đo kích thƣớc; (6) Minimap; (7) Thƣớc tỷ lệ; (8) Thanh tiêu đề và menu phụ; (9) Hộp thoại hiển thị thơng tin thuộc tính.

(3) (5) (6) (8) (1) (4) (2) (9) (7)