Hướng dẩn sử dụng Leaflet cơ bản

Table of Contents
CHƢƠNG 1: HƢỚNG DẨN NHANH LEAFLET ............................................................................3
1.1)

Chỉnh lại website với các thẻ, css, div .................................................................................3

1.2)

Thiết lập bản đồ .................................................................................................................3

1.3)

Đánh dấu một điểm, vẽ vòng trong, tô màu một khu vực ...................................................4

1.3.1) Đánh dấu 1 điểm trên bản đồ ............................................................................................4
1.3.2) Vẽ 1 vòng tròn trên bản đồ................................................................................................4
1.3.3) Vẽ 1 khối vớ danh sách các tọa độ.....................................................................................4
i
1.4)

Làm việc với Popup............................................................................................................5

1.4.1) Thêm Popup lên các điểm, các vòng tròn, các khối chọn ở trên........................................5
1.4.2) Thêm Popup tại một tọa độ nào đó....................................................................................5
1.5)

Xử lý các sự kiện khác........................................................................................................5

CHƢƠNG 2: LEAFLET TRÊN MOBILE ........................................................................................7
2.1) Chỉnh sửa lại trang web với css ..............................................................................................7
CHƢƠNG 3: CÁC ĐÁNH DẤU VÀ CÁC TÙY CHỈNH CÁC ICONS .............................................8
3.1) Thay đổi các ảnh ....................................................................................................................8
3.2) Code tạo icon ..........................................................................................................................8
3.3) Xác định 1 lớp(class) các icons................................................................................................8
CHƢƠNG 4: SỬ DỤNG GEOJSON VỚI LEAFLET ..................................................................... 10
4.1) GeoJSON layer ....................................................................................................................... 10
4.2) Options ................................................................................................................................. 10
4.2.1) Css style .......................................................................................................................... 10
CHƢƠNG 5: TƢƠNG TÁC CHOROPLETH MAP ....................................................................... 14
5.1) Data Source .......................................................................................................................... 14
5.2) Cơbản về States Map ............................................................................................................ 14
5.3) Thêm các màu ....................................................................................................................... 15
5.4) Thêm các tư ng tác ................................................................................................................ 17
ơ
5.4.1 Lắng nghe sựkiện mouseover ........................................................................................... 17
5.4.2) Hàm reset khi chuột di chuyển ra khỏi ............................................................................. 18
5.4.3) Hàm lắng nghe sựkiện click thì sẻ zoom map ................................................................... 18

Châu Minh Tuấn Email: chauminhtuanit@gmail.comTrang 1

5.4.4) Chúng ta bắt đầu thêm các hàm lắng nghe ởtrên vào các bang trên bản đồ bằng hàm
onEachFeature ......................................................................................................................... 18
5.5) Thay đổi một ít các thông tin trong các điều khiển ............................................................... 19
CHƢƠNG 6: CÁC LỚP(LAYER) GROUPS VÀ CÁC LỚP ĐIỀU KHIỂN( LAYERS CONTROL)
........................................................................................................................................................ 23
6.1) Nhóm các lớp lại ................................................................................................................... 23
6.2) Điều khiển các lớp ................................................................................................................ 23


HƢỚNG DẨN SỬ DỤNG LEAFLET
Leaflet là một thư viện Javascript mã nguồn mở cho việc tương tác với bản đồ. Nó được
phát triển bởi Vladimir Agafonkin. Leaflet thì được thiết kế đơn giản, nhanh chóng và dể
sử dụng. Nó sử dụng được trên môi trường Desktop,Mobile vì nó sử dụng HTML5,
CSS3.
CHƢƠNG 1: HƢỚNG DẨN NHANH LEAFLET
1.1)

Chỉnh lại website với các thẻ, css, div

Trước khi viết code các bạn phải import Css, Javascript của Leaflet và 1 thẻ div với
id="map" trong trang web
Css
<link rel="stylesheet"href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />


Javascript
<scriptsrc="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

Div
<divid="map"></div>

Xác định chiều cao cho map với css
#map{ height:180px;}

1.2)

Thiết lập bản đồ
Đầu tiên chúng ta phải khởi tạo map và cài đặt một tọa độ địa lý và zoom cho việc
hiển thị
var map = L.map('map').setView([51.505, -0.09], 13);

Thêm các đường vẻ của map
Bạn lên trang http://account.cloudmade.com/user/register để đăng ký 1 tài khoản và get key
API.

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data ©
maxZoom: 18
}).addTo(map);

<a href="http://openstreetmap.org">OpenStreetMap</a> contribu tors, <a href="http://creativecommons.org/licenses/by -sa/2.0/"> CC- BY-SA</a>, Imagery © <a href="http://cloudmade.com">Cloud Made</a>

',

Lưu ý: các thiết lập phải nằm sau Div và leaflet.js

1.3)

Đánh dấu một điểm, vẽ vòng trong, tô màu một khu vực
Bên cạnh lớp vẽ có sẳn mình get trên cloudmade.com xuống, mình có thể dể dàng
thêm vào map của mình các điểm được đánh dấu, các đường kẻ,các khối chọn, các
vòng tròn, các popups.

1.3.1) Đánh dấu 1 điểm trên bản đồ
var marker = L.marker([51.5, -0.09]).addTo(map);

Trong dấu ngoặc vuông là tọa độ của điểm cần đánh dấu
1.3.2) Vẽ 1 vòng tròn trên bản đồ
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);

Màu đường viền

Tọa đọ tâm
hình tròn

Bán kính tính từ tâm ra(500
mét theo tỉ lộ của bản đồ)

Màu bên trong vòng tròn
Độ mờ ở bên trong vòng tròn

1.3.3) Vẽ 1 khối với danh sách các tọa độ

var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);

1.4)

Làm việc với Popup
1.4.1) Thêm Popup lên các điểm, các vòng tròn, các khối chọn ở trên

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
* openPopup(): mặt định popup đó mở, không cần click vào

1.4.2) Thêm Popup tại một tọa độ nào đó
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(map);

1.5)

Xử lý các sự kiện khác
Mỗi lần người dùng click, zoom trên bản đồ các đối tượng sẻ gửi ra một sự kiện
tương ứng
Ví dụ bên dưới là sẻ gửi ra tọa độ khi người dùng click trên bản đồ

functiononMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
map.on('click', onMapClick);

và như vậy mình có thể gán các xử lý cho từng sự kiện
var popup1 = L.popup();
functiononMapClick(e) {
popup1
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);


CHƢƠNG 2: LEAFLET TRÊN MOBILE
2.1) Chỉnh sửa lại trang web với css
body{
padding: 0;
margin: 0;
}
html, body, #map{
height: 100%;
}

Chúng ta phải báo cho trình duyệt của mobile biết để vô hiệu hóa những phần không cần
thiết
<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Khởi tạo bản đồ giống như ở trên
var map = L.map('map');

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data ©

<a href="http://openstreetmap.org">OpenStreetMap</a> contribu tors, <a href="http://creativecommons.org/licenses/by -sa/2.0/"> CC- BY-SA</a>, Imagery © <a href="http://cloudmade.com">Cloud Made</a>

',

maxZoom: 18
}).addTo(map);

Xác định tọa độ hiện tại
map.locate({setView: true, maxZoom: 16});


CHƢƠNG 3: CÁC ĐÁNH DẤU VÀ CÁC TÙY CHỈNH CÁC ICONS
3.1) Thay đổi các ảnh
Để thay đổi một biểu tượng trên bản đồ chúng ta cần 2 ảnh, 1 ảnh thật và 1 ảnh đổ bóng
của ảnh thật đó. Leaflet logo có thể dùng 4 ảnh, 3 ảnh thật và 1 ảnh đổ bóng
3.2) Code tạo icon
Mình sẻ tạo với icon màu xanh lá cây trước.
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});

Đặt icon trên lên bản đồ
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

3.3) Xác định 1 lớp(class) các icons
Chúng ta cần tạo ra một lớp icon cho kế thừa từ L.Icon
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});

Dùng hàm trên để tạo ra các icon xanh, đỏ, cam
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

Ở đây chúng ta sẻ dùng từ khóa new để yêu cầu một Leaflet Icon.
Để thuận tiện cho việc khỏi tạo các icon thì có thể dùng

L.icon = function (options) {
returnnew L.Icon(options);
};

Sau đó đưa các icon này vào bản đồ của mình với các dòng lệnh sau
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");


CHƢƠNG 4: SỬ DỤNG GEOJSON VỚI LEAFLET
GeoJSON là một định dạng mã hóa cho một loạt các cấu trúc dữ liệu địa lý. Một đối
tượng GeoJSON có thể đại diện cho một hình học, một tính năng hoặc một tập các tính
năng. GeoJSON hổ trợ các loại hình sau: 1 điểm, 1 đường thẳng, đa giác, đa điểm, đa
cạnh….
Leaflet hổ trợ tất cả các loại GeoJSON. Feature và FeatureCollections cho phép bạn mô
tả cácthực thể(features) vàthuộc tính(properties)
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
};

4.1) GeoJSON layer
Đối tượng GeoJSON thì được thêm vào map thông qua GeoJSON layer. Code bên dưới
cho thấy chúng ta tạo và thêm nó vào bản đồ
L.geoJson(geojsonFeature).addTo(map);

Chúng ta có thể thêm nhiều thực thể hình ảnh(features) vào GeoJSON layer
var myLayer = L.geoJson().addTo(map);
myLayer.addData(geojsonFeature);

4.2) Options
4.2.1) Css style
Tùy chọn style này có thể dùng cho 2 thực thể
var myLines = [{
"type": "LineString",
"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {


"type": "LineString",
"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
L.geoJson(myLines, {
style: myStyle
}).addTo(map);

Code ở trên chúng ta tạo ra 2 thực thể là 2 đường với các tọa độ. Sau đó chúng ta sẻ thêm
style và thực thể đó vào GeoJSON cuối cũng là thêm vào bản đồ

Hoặc với các hình tứ giác
var states = [{
"type": "Feature",
"properties": {"party": "Republican"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22,
[-96.58,

48.98],
45.94],


[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": {"party": "Democrat"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}];
L.geoJson(states, {
style: function(feature) {
switch (feature.properties.party) {
case'Republican': return {color: "#ff0000"};
case'Democrat':
}

return {color: "#0000ff"};

}
}).addTo(map);


CHƢƠNG 5: TƢƠNG TÁC CHOROPLETH MAP
Trong phần này chúng ta tạo ra các màu bao quanh các bang trong nước Mỹ. Mình chưa
thấy có thể tô màu cho các nước khác (vì không có đủ các tọa độ). Bạn nào có thể làm
được

cho

các

nước

khác

và

Việt

Nam

thì

email

mình

biết

với

chauminhtuanit@gmail.com
5.1) Data Source
Các dữ liệu về các bang cùng tọa độ được lưu dưới dạng JSON và nằm trong file theo
đường dẩn http://leafletjs.com/examples/us-states.js . Các bạn có thể coi thêm cấu trúc của
JSON tại http://json.org/example
Dưới đây là cấu trúc trên website của Leafletjs
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
}

5.2) Cơ bản về States Map
Ban đầu chúng ta cũng lấy các ảnh về bản đồ tại địa chỉ CloudMade với StyleID: 22677,
với style này chúng ta sẻ nhận được bản đồ với khung nền, không có nhiều các hìng về
đường phố
var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
key: ...,
attribution: ...,
styleId: 22677
}).addTo(map);


L.geoJson(statesData).addTo(map);

Cũng giống như các phần trên với Key và attribution.
Lưu ý:các bạn nhớ phải đưa file chứa tọa độ ở trên vào thì mới cho ra được như hình dưới

5.3) Thêm các màu
Mỗi màu biểu thị cho mật độ dân số, các thông số này có trong file us-state.js mà tôi có
đề cập bên trên
functiongetColor(d) {
return d >1000 ? '#800026' :
d >500

? '#BD0026' :

d >200

? '#E31A1C' :

d >100

? '#FC4E2A' :

d >50

? '#FD8D3C' :

d >20

? '#FEB24C' :


d >10

? '#FED976' :

'#FFEDA0';

}
functionstyle(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}

L.geoJson(statesData, {style: style}).addTo(map);

Chúng ta sẻ lấy dữ liệu từ file statesData và Color để tạo thành cấu trúc JSON và thêm
vào Map chúng ta sẻ thu được hình bên dưới


5.4) Thêm các tương tác
5.4.1 Lắng nghe sự kiện mouseover
Hàm này sẻ tạo border cho các bang mà bạn di chuyển chuột đến
functionhighlightFeature(e) {
var layer = e.target;

layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});

if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();


}

}

Lưu ý: hàm e.target không hổ trợ trên IE và Opera
5.4.2) Hàm reset khi chuột di chuyển ra khỏi
functionresetHighlight(e) {
geojson.resetStyle(e.target);
}

5.4.3) Hàm lắng nghe sự kiện click thì sẻ zoom map
functionzoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}

5.4.4) Chúng ta bắt đầu thêm các hàm lắng nghe ở trên vào các bang trên bản đồ
bằng hàm onEachFeature
functiononEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);


Khi chúng ta rê chuột vào sẻ có border xung quanh
5.5) Thay đổi một ít các thông tin trong các điều khiển
http://leafletjs.com/reference.html#icontrol

Chúng ta sẻ sử dụng popup
var info = L.control();
info.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
returnthis._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function(props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);

Đưa hàm này vào trong hàm lắng nghe sự kiện mouseover của chuột

functionhighlightFeature(e) {
...

}
functionresetHighlight(e) {
...
info.update();
}

Chúng ta sẻ nhìn thấy thông tin bên trên và góc phải của hình
Sau đó chúng ta thêm các Css cho map
.info{
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0015px rgba(0,0,0,0.2);
border-radius: 5px;
}
.infoh4{
margin: 005px;
color: #777;
}


Bây giờ thì hoàn thiện hơn rồi
Hiện thị thông tin về bản màu cùng với các thông số chú thích
var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [];
// loop through our density intervals and generate a label with a colored square for each
interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map);
.legend{
line-height: 18px;
color: #555;


}
.legendi{
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}

Hình được thể hiện ở bên phải góc dưới của ảnh


CHƢƠNG 6: CÁC LỚP(LAYER) GROUPS VÀ CÁC LỚP ĐIỀU KHIỂN(
LAYERS CONTROL)
6.1) Nhóm các lớp lại
Giả sử chúng ta có nhiều lớp thành phố như là thành phố littleton, denver, aurora, golden.
Giờ chúng ta cần nhóm chúng lại thành 1 nhóm là thành cities để tiện xử lý
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver
= L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora
golden

= L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
= L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);

Giờ chúng ta có thể dùng lớp cities để thêm vào bản đồ
6.2) Điều khiển các lớp
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/API-key/{styleId}/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery ©
2011 CloudMade';

var minimal

= L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution:

cloudmadeAttribution}),
midnight

= L.tileLayer(cloudmadeUrl, {styleId: 999,

attribution:

cloudmadeAttribution}),
motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561, attribution:
cloudmadeAttribution});

var map = L.map('map', {
center: new L.LatLng(39.73, -104.99),
zoom: 10,
layers: [minimal, motorways, cities]
});
var baseMaps = {
"Minimal": minimal,
"Night View": midnight
};


var overlayMaps = {
"Motorways": motorways,
"Cities": cities
};
L.control.layers(baseMaps, overlayMaps).addTo(map);


Hướng dẩn sử dụng Leaflet cơ bản

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Hướng dẩn sử dụng Leaflet cơ bản

Similaire à Hướng dẩn sử dụng Leaflet cơ bản (20)

Hướng dẩn sử dụng Leaflet cơ bản