Tại sao không phải là thư viện khác mà lại là openlayer cho MAP ? chưa có kinh nghiệm nhiều về MAP, mới biết đến GOOGLE MAP ngoài ra chưa tìm hiểu hệ cái MAP nào. Chức năng của OpenLayer cũng đủ dùng khi tìm hiểu.
Giới thiệu về openlayer :
- Thư viện javascript mã nguồn mở, mở nhưng đừng hardcode của thư viện.
- Các đặc tính quan trọng hỗ trợ trong map: Tile, Vector , Canvas.
- Trang chủ : http://openlayers.org
- API : openlayers.org/en/v3.6.0/apidoc
- Code: https://github.com/openlayers/ol3
- Code trong series: https://github.com/smagic39/openlayer-3-tutorial
Đây là một thư viện cho client , thiếu server ? cần một server để trả về các api, cung cấp dữ liệu cho OpenLayer hiển thị , điều này khi làm nâng cao chúng ta sẽ tự thiết lập môi trường mà người làm về map vẫn hay gọi là geoserver, mapserver, gis system.
Trong series này tôi sẽ dùng cái đã có sẵn nằm trong thư mục data của asset trên github code hoặc một server geo (http://maps.boundlessgeo.com/geowebcache/service/wms).
Yêu cầu cần có để có thể làm việc với openlayer:
- Biết về javascript là một lợi thế
- Biết cơ bản về GIS
- HTML và CSS mặc định biết
Ubuntu,Mac, Windows cài một thứ thôi XAMPP
Tạo template mặc định trước khi làm việc
<!doctype html>Khởi tạo Map
<html>
<head>
<title>Playing with various sources and layers</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
</script>
</body>
</html>
var map = new ol.Map({ý nghĩa từng dòng :
target:'map',
renderer:'canvas',
view: new ol.View({
projection: 'EPSG:900913',
center:[0,0],
zoom:5
})
});
Khởi tạo một đối tượng Map của object ol, hiển thị trên 'map' là id hay nơi cần hiển thị, renderer hỗ trợ việc hiển thị canvas ,canvas là một tag của HTML5.Đối tượng map sẽ được hiển thị trên View ( tương tư layout hay style), các con số EPSG tuỳ thuộc vào project ở đây mà mình gọi http://cs2cs.mygeodata.eu/.
Mới chỉ có khởi tạo object mà chưa có data ?
Trả lời :
Khởi tạo dữ liệu
var newLayer = new ol.layer.Tile({ý nghĩa từng dòng:
source: new ol.source.OSM()
});
map.addLayer(newLayer);
Những hình ảnh hiển thị trên bản đồ có nhiều ý nghĩa, khi tìm hiểu sâu hơn sẽ rõ những khái niệm như : Tile, Layer, Image, Vector, Feature, Draw, WFS, WMS. Ở đây nó cái cần dùng để khởi tạo dữ liệu, OSM() là nguồn mặc định hiển thị lên bản đồ WORLD.
<!doctype html>
<html>
<head>
<title>Playing with various sources and layers</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var map = new ol.Map({
target:'map',
renderer:'canvas',
view: new ol.View({
projection: 'EPSG:900913',
center:[0,0],
zoom:5
})
});
var newLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(newLayer);
</script>
</body>
</html>
Chạy thử trên trình duyêt qua localhost/path-to-file
copy nhớ ghi rõ nguồn, cần chia sẻ liên hệ với contact
No comments:
Post a Comment