Sử dụng API Leaflet chi tiết các chức năng

Nhóm thực hiện: Nhóm 8
Giảng viên: Nguyễn Văn Thọ

Sản phẩm với sự góp mặt và tham gia của các kỹ sư:
 Nguyễn Văn Hào 201166 (Trưởng nhóm)
 Nguyễn Hồng Thái 20849 (Chuyên gia trong lĩnh vực AI hơn 10 Năm kinh
nghiệm)
 Hà Thanh Bền 201197 (Wibu chúa có thể hóa quỷ để tiêu diệt đối thủ bằng cú
đấm quỷ diệt)
 Đỗ Phước Nguyên 201144 (Ác quỷ tốt bụng)
 Bùi Hữu Lộc 201352 (Dân chơi)
 Trịnh Hoàng Phát 201141 (Hacker mũ rơm)

Tóm tắt nội dung chương
Chương 1: Cấu hình và giới thiệu về Leaflet
Chương 2: Giới thiệu mô hình dành cho người dùng
và mô hình dành cho danh nghiệp
Chương 3: Chức năng của Leaflet Map API Mô hình
cho Người Dùng
Chương 4: Chức năng của Leaflet Map API Mô hình
cho Doanh Nghiệp

Nội dung
• Chương 1: Cấu hình và giới thiệu về Leaflet
• 1.1 Giới thiệu sơ bộ về API
• 1.2 Giới thiệu về Leaflet
• 1.3 Lý do sử dụng Leaflet
• 1.4 Ứng dụng của Leaflet
• 1.5 Cấu hình và hiển thị bản đồ

Nội dung
Chương 2: Giới thiệu mô hình dành cho
người dùng và mô hình dành cho danh
nghiệp
1.1 Giới thiệu tổng hợp về hai mô hình
1.2 Mô hình dành cho người dùng
1.3 Mô hình dành cho danh nghiệp

Nội dung
Chương 3: Chức năng của Leaflet Map API
Mô hình cho Người Dùng
1.1 Chức năng hiển thị tọa độ
1.2 Chức năng hiển thị layer trên bản đồ
1.3 Chức năng Hightlight lãnh thổ
1.4 Chức năng tìm kiếm địa điểm bằng thẻ Input
1.5 Chức năng tìm kiếm địa điểm khi nhập hai điểm

Nội dung
Chương 3: Chức năng của Leaflet Map API
1.6 Chức năng lấy tọa độ hiện tại của người dùng
1.7 Chức năng in bản đồ
1.8 Chức năng phóng to màn hình bằng JavaScript

Nội dung
Chương 4: Chức năng của Leaflet Map API Mô
hình cho Doanh Nghiệp
1.1 Chức năng lấy tọa độ hiện tại của người dùng
1.2 Chức năng in bản đồ
1.3 Chức năng phóng to màn hình bằng JavaScript
1.4 Chức năng tìm địa điểm khi nhập vào một điểm
1.5 Hiển thị Layer của Google Map
1.6 Chức năng chỉ đường khi người dùng click vào bất kỳ một nơi trên
bản đồ.

Chương 1: Cấu hình và giới thiệu về
Leaflet
1.1Giới thiệu sơ bộ về API
A) API là gì?
API Hiểu về mặt kỹ thuật thì API chính là tập hợp các hàm (Functions), Đối
tượng (Objects). Mục đích giúp hai phần mềm (ứng dụng) có thể tương tác và trao
đổi dữ liệu qua lại với nhau, mà không quan tâm ứng dụng đó được làm như nào.
Là từ viết tắt của Application Programming Interface hay còn gọi với tiếng
Việt là Giao Diện Lập Trình Ứng Dụng.
Đây là một khái niệm rất là rộng nên các bạn có thể tìm hiểu và tham khảo
thêm một số nội dung nữa để có thể hiểu thêm về API.
Và trong bài viết này chúng ta sẽ sử dụng API của Leaflet để hiển thị ra bản
đồ phục vụ cho nhu cầu cá nhân của chúng ta.

Leaflet
1.2 Giới thiệu về LeafLet
Leaflet là một thư viện mã nguồn mở của Javascript nó được phát triển bởi
Vladmir Agafonkin. Và nó được tin chỉnh và thiết kế đơn giản nhất để gần gũi và
thân thiện nhất với mọi người sử dụng. Vì nó được sử dụng trên môi trường
website bao gồm cả mobile và nó sử dụng HTML5 và CSS3.
Và nhà phát triển của Leaftlet đã được thiết kế và chú trọng tới sự đơn
giản, hiệu suất, và khả năng sử dụng cho mọi người và cả nhà phát triển bằng các
nhà phát triển có thể cài và sử dụng rất nhiều Plugin từ Github của các kỹ sư
người nước ngoài.

Leaflet
1.3 Lý do sử dụng Leaflet
Như các bạn đã biết, với đời đại hiện tại nhu cầu thương mại điện tử ngày
càng tăng vì thế các dịch vụ người dùng cũng tăng lên một trong các vấn đề đáng
quan tâm nhất đó là dịch vụ bản đồ. Mục đích để nhiều người dùng hoặc người
xem có thể biết đến hoặc đi đến cơ sở của chúng ta.
Và một trong những nền tảng lớn để phát triển và sử dụng đó là API Map
của các nhà cung cấp cung cấp sẵn cho chúng ta ví dụ như Google Map API,
Maps của MapBox, Leaflet,...

Leaflet
1.4 Ứng dụng của Leaflet
Leaflet cung cấp rất nhiều các chức năng ví dụ như tìm kiếm, đánh đấu, vẽ,
đánh đấu, hiểm thị tọa độ, lấy vị trí,...Suy cho cùng mục đích chính của Leaflet đó
là chỉ đường.
Bạn có thể tham khảo các link sau để tìm hiểu thêm chi tiết bằng tài liệu tiếng Anh
hoặc tiếng Việt.
Link tài liệu tiếng Việt: https://viblo.asia/p/leaflet-mot-thu-vien-js-ma-nguon-mo-cho-
viec-xay-dung-ung-dung-ban-do-6J3Zg2jLKmB

Leaflet
1.4 Ứng dụng của Leaflet
- Tuy nhiên song song với cạnh việc mà chúng ta sử dụng nhưng nền tảng API
Maps này thì có một số nền tảng tính phí.
Ví dụ như Google Map API, Maps,...
Bạn có thể tham khảo một số bài viết này để sử dụng Google Map API tính phí.
Link: https://www.sapo.vn/blog/google-maps-api-thay-doi-cach-tinh-phi
Và bạn cũng có thể tham khảo thêm vài bài viết về cách sử dụng Google Map API.
Link: https://wiki.matbao.net/kb/huong-dan-khoi-tao-google-maps-api-de-chen-
vao-website/
Link: https://viblo.asia/p/tim-hieu-ve-google-map-api-ZWApGxJ3R06y

Leaflet
1.5 Cấu hình và hiển thị bản đồ
Bước 1: chúng ta sẽ mở trình soạn thảo code mà chúng ta đang dùng.
Bước 2: chúng ta sẽ thêm hai đoạn link sau:
Link CSS: <link
rel="stylesheet"href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
- Ở link css này nó sẽ là phần xử lý về mặt giao diện.
Link Javascript: <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
- Ở link Javascript này nó sẽ đảm nhận việc xử lý các đoạn xử lý ở server hoặc hiển
thị cũng như các sự kiện do người dùng thao tác.

Leaflet
Bước 3: thêm một thẻ div có id là map vào trong thẻ body
<div id=”map”></div>
- Thẻ div có class này nó sẽ đảm nhận việc hiển thị ra toàn bộ map ra giao diện thông
qua thuộc tính id.
- Để có thể điều chỉnh được kích thước của hiển thị của bản đồ thì chúng ta sẽ có thể
css như sau:
<style>
body{padding: 0; margin: 0;}
#map{height: 100vh; width: 100%}
</style>
- Bản đồ nó sẽ được hiển thị đúng tỷ lệ khi hiển thị trên trình duyệt và cả mobile.

Leaflet
Bước 4: tiếp theo chúng ta sẽ thêm một thẻ script chứa đoạn mã:
<script>
- Đoạn script để chúng ta có thể thiết lập tọa độ hiển thị và độ phóng lớn của bản
đồ.
var map = L.map(‘map’).setView([tọa độ], độ phóng đại)
</script>

Ảnh giao diện khi đã cấu hình thành công

Chương 2: Giới thiệu mô hình dành cho
người dùng và mô hình dành cho doanh
nghiệp
1.1 Giới thiệu tổng hợp về hai mô hình
Ở đây vì lý do tùy vào mục đích mà các bạn sử dụng và định hướng sử
dụng nên Leaflet Map API chúng ta có thể tùy biến mà chỉnh nó theo ý cá nhân và
nó hỗ trợ cho rất nhiều nhà phát triển bằng các Plugin cung cấp sẵn trên Github.
Và trong dự án này chúng ta sẽ làm ở cả hai hướng phát triển đó là hướng
phát triển dành cho người dùng bình thường và hướng dành cho một doanh
nghiệpGiới thiệu tổng hợp về hai mô hình.

1.2 Mô hình dành cho người dùng
Cho phép người dùng có thể tìm đến một nơi bất kỳ bằng việc nhập điểm
đến và điểm đi vào ô tìm kiếm sau đó click ok thì nó sẽ hiện lên hai điểm do chúng
ta nhập vào.
Ở mô hình này người dùng có thể tự do tìm đến một địa điểm nào đó mà
không bị ràng buộc về mặt lựa chọn như doanh nghiệp. Đây cũng chính là sự khác
nhau về mục đích sử dụng của hai mô hình này.
Tóm lại tùy vào nhu cầu sử dụng của các bạn mà chúng ta có thể chọn một
phương pháp thiết kế khác nhau nhưng là vì Leaflet Map API này là một phần mền
mã nguồn mở miễn phí nên còn một số chức năng mà Leaflet chưa có hoặc đang
trong giai đoạn phát triển nên còn khác hạn chế về các chức năng.
nghiệp

1.3 Mô hình dành cho doanh nghiệp
Mục đích khi sử dụng Leaflet là để mọi người khi truy cập có thể biết đến
doanh nghiệp cơ quan của chúng ta một cách nhanh chóng. Mà không cần phải
làm thao tác nào liên quan đến việc tìm kiếm doanh nghiệp.
Và ở mô hình doanh nghiệp này như chúng ta đã thấy nó sẽ là một địa điểm
được gán cứng sau đó người dùng chỉ cần click vào một điểm bất kỳ mà người
dùng muốn hoặc sử dụng chức năng tìm vị trí hiện tại sau đó chúng ta sẽ click từ vị
trí hiện tại đến doanh nghiệp mà chúng ta muốn đến.
nghiệp

Chương 3: Chức năng của Leaflet Map API
Ở chức năng này chúng ta sẽ có thể hiển thị lên tọa độ khi chúng ta di chuột
vào trong bản đồ.
Mục đích chính của việc mà chúng ta khi sử dụng chức năng này là giúp
người xem có thể xác định được tọa độ kinh độ và vĩ độ từ việc xác định được vị trí
này chúng ta sẽ có thể lấy ra tọa độ này để có thể lập trình cũng như tạo ra các
chức năng liên quan đến việc in ấn hoặc đánh dấu trên bản đồ,...

Để làm được chức năng này đầu tiên chúng ta sẽ vào trang chủ leaflet vào
phần plugin vào phần mouse coordinates click vào Leaflet.Coordinates.
Sau đó chúng ta sẽ tải về 4 thư viện để liên kết nó vào trong dự án.
 Leaflet.Coordinates-0.1.5.css
 Leaflet.Coordinates-0.1.5.ie.css
 Leaflet.Coordinates-0.1.5.min.js
 Leaflet.Coordinates-0.1.5.src.js
Link tham khảo: https://github.com/MrMufflon/Leaflet.Coordinates

Chương 3: Chức năng của Leaflet Map
API Mô hình cho Người Dùng
1.1 Chức năng hiển thị tọa
độ
Ảnh code hiển thị chức năng hiển thị tọa độ map bằng code

Ảnh code hiển thị chức năng hiển thị tọa độ map bằng code

1.2 Chức năng hiển thị layer trên bản đồ
Ở chức năng này mục đích chính sẽ là chúng sẽ hiển thị ra các layer ví dụ
như giao diện Google Map hoặc giao diện Google Map Vệ tinh,... Góp phần giúp
cho Leaflet chúng ta trở nên đẹp và nhiều chức năng hơn.
Việc đầu tiền trước khi tìm hiểu và làm được chức năng này chúng ta sẽ đi
qua một vài khái niệm liên quan đến vấn đề về Layer và Layer là gì?
Thì ở đây chúng ta có thể tham khảo nhiều tài liệu trên mạng hơn để có thể
đọc và làm tuy nhiên để có thể tóm tắt theo cách hiểu riêng của bọn mình thì Layer
là một kỹ thuật. Kỹ thuật này do người lập trình tạo ra. Nghĩa là người lập trình sẽ
tạo ra các cái lớp(layer gọi là lớp). Và các lớp này sẽ có thể xếp chồng lên nhau.

1.2 Chức năng hiển thị
layer trên bản đồ
Việc xếp Chồng lên nhau này
giúp chúng ta có thể ghi đề lên những
lớp khác và hiển thị ra lớp mà chúng ta
muốn. Chúng ta có thể xem ảnh bên để
hiểu thêm về lớp(Layer).
Ảnh mô phỏng lớp(layer)

1.2 Chức năng hiển thị
layer trên bản đồ
Để có thể hiển thị cũng như làm
ra giao diện này thì chúng ta sẽ một
đoạn code do Leaflet đã định nghĩa sẵn
bạn có thể tham khảo nó trong tài liệu
chính chủ của trang Leaflet.
Ảnh mô code để hiển thị chức năng
Layer

 1.2 Chức năng hiển thị layer
trên bản đồ
Tiếp theo để có thể lấy các lớp để
hiển thì chúng ta sẽ truy cập vào trang:
Link: https://leaflet-extras.github.io/leaflet-
providers/preview/
Ở trang này chúng ta sẽ có thể xem
qua các giao diện hiển thị map tùy theo lựa
chọn của chúng ta.
Ảnh trang Provider để chúng ta lấy các
lớp

 1.2Chức năng hiển thị layer
trên bản đồ
Sau khi đã chọn thành công mẫu
layer mà chúng ta thích sau đó chúng ta
sẽ dán nó vào Project của chúng ta và
tiến hành thêm vào baseLayers đã giới
thiệu phía trên để hiển thị ra giao diện
này.
lớp

lớp

1.2 Chức năng hiển thị layer
trên bản đồ
Việc xếp Chồng lên nhau này
giúp chúng ta có thể ghi đề lên những
lớp khác và hiển thị ra lớp mà chúng ta
muốn. Chúng ta có thể xem ảnh bên để
hiểu thêm về lớp(Layer).
Ảnh Giao diện layer mặc định

Ảnh Giao diện layer Vệ tinh

1.3 Chức năng highlight lãnh thổ
Ở chức này nó sẽ cho phép chúng ta làm nổi bật lên vùng lãnh thổ mà
chúng ta muốn ví dụ Như Đất Nước Việt nam của chúng ta.
Tiếp theo để có thể làm ra chức năng này chúng ta sẽ phải hiểu một khái
niệm. Khái niệm đó là Map Choropleth, Nó là một bản đồ dùng để thống kê và sử
dụng các màu để tô lên các thành phần của nó.
Và để sử dụng kỹ thuật này thì chúng ta vào trang chủ Leaflet vào phần
Interactive Choropleth Map và đọc tài liệu.

Ảnh giao diện Map Choropleth

1.3 Chức năng highlight lãnh thổ
Tiếp theo chúng ta sẽ thêm một đoạn code để cấu hình cho
chức năng hiển thị Map Choropleth bao gồm chỉnh màu thêm file
chức dữ liệu lãnh thổ Việt Nam, tô nổi bật, Hiệu ứng di chuột vào
từng thành phần lãnh thổ.

Ảnh code cho chức năng Hiển thị Map Choropleth

Ảnh code cho chức năng hiển thị ra Map Choropleth

Ảnh chức năng hiển thị ra Map Chopropleth

1.4 Chức năng tìm kiếm địa điểm bằng thẻ Input
Chức năng này cho phép chúng ta nhập vào một điểm mà chúng ta muốn
sau đó nó sẽ hiển thị điểm mà chúng ta nhập su đó đánh dấu điểm đó.
Và chức này này khi chúng ta làm đòi hỏi chúng ta phải mã hóa địa lý thì
sau dó chúng ta mới làm được chức năng này.
Mã hóa Địa lý (Geocoder) là gì?
Mã hóa địa lý của Leaflet là một kỹ thuật do các nhà kỹ sư Leaflet làm ra
mục đích dùng để đưa các dữ liệu lưu trữ trên map từ chuỗi thành dạng JSON.

Và khi mã hóa thành chuỗi Dạng JSON thì nói sẽ giúp chúng ta tìm
kiếm hoặc lưu trữ trao đổi dữ liệu nhanh hơn trong việc tìm kiếm.
Và mục đích thứ hai của nó là giúp làm giảm tải khả năng chờ tìm
kiếm cho người dùng. Vì các dữ liệu mà chúng ta tìm kiếm nó đã được mã
hóa thành dạng JSON và sau đó nhà phát triển sẽ định nghĩa hàm để hàm
này tìm kiếm các dữ liệu liên quan đến địa điểm và hiển thị chi người dùng
mà không cần phải gọi từ server trả về mỗi lần người dùng tìm kiếm.

Sau khi đã hiểu sơ qua về mã hóa địa lý thì tiếp theo chúng ta
sẽ phải liên kết một link vào trong dự án của chúng ta.
Link tham khảo: https://github.com/perliedman/leaflet-control-
geocoder
Sau khi đã truy cập vào liên kết trên chúng ta sẽ thêm vào dự
án của chúng ta hai link tương ứng 1 link css và 1 link javascript.

Ảnh hai liên kết cho chức năng mã hóa địa lý và tìm kiếm bằng thẻ Input

Ảnh hai liên kết cho chức năng mã hóa địa lý và tìm kiếm bằng thẻ Input
Ảnh hiển thị chức năng tìm kiếm địa điểm bằng thẻ Input trên bản đồ

1.5 Chức năng tìm kiếm địa điểm khi nhập hai điểm
Ở chức năng tìm kiếm này cho phép chúng ta nhập hai điểm bắt kỳ mà
chúng ta muốn vào trong nút tìm kiếm tướng ứng với điểm đi và điểm đến.
Việc đầu tiên đề làm hai chức năng này chúng ta sẽ phải liên kết hai Plugin
của kỹ sư người nước Ngoài trên Github.
Ảnh hai Plugin mà chúng ta sẽ phải thêm vào trong dự án của chúng ta

Để có thể lấy link trên chúng ta sẽ phải truy cập vào một trang .
Link tham khảo: https://www.liedman.net/leaflet-routing-machine/
Ở trang này chúng ta sẽ đọc tài liệu để có thể lấy những đoạn code
có sẵn sau đó liên kết nào vào trong dự án của chúng ta.

Sau khi chúng ta đã vào trang chủ của chức năng tìm kiếm thì chúng ta
thêm vào dự án của chúng ta 2 liên kết này kết tiếp 2 liên kết đầu mà chúng ta đã
thêm.
Ảnh 2 files liên kết Routing cho chức năng tìm kiếm hai đường

Ảnh hiển thị giao diện trang chủ của chức năng tìm đường khi nhập hai điểm

1.5 Chức năng tìm kiếm địa
điểm khi nhập hai điểm
Ở chức năng này chúng ta có
thể gán cứng các giá trị để nó mặc định
khi chúng ta chạy trên nền web thì nó
sẽ tự động hiển thị. Và khi đó chúng chỉ
cần tham số của vĩ độ và kinh độ. Hai
tham số này nhiệm vụ sẽ thêm vào
trong hàm mà nhà phát triển đã định
Ảnh code mặc định gán cứng hai địa điểm cho
chức năng tìm kiếm

Tuy nhiên ở chức năng này có một điều mà chúng ta phải lưu ý đó là nếu
chỉ việc gán cứng các địa điểm khi mở trình duyệt lên và hiển thị cho người dùng
thì việc này sẽ làm mất đi khả năng tương tác khi người dùng muốn chủ động tìm
đến một địa điểm.
Chính vì lý do này chúng ta sẽ phải cấu hình tuy biến cho chức năng này
bằng cách cho phép người dùng tự do nhập hai điểm đến và điểm đi cho chức
năng này.
Đây cũng chính là sự khác biệt lớn nhất của mô hình dành cho người dùng

1.5 Chức năng tìm kiếm địa
điểm khi nhập hai điểm
Để có thể tùy chỉnh cho chức
năng tìm kiếm theo yêu cầu này chúng
ta sẽ phải truy cập vào một trang.
Link tham khảo:
https://www.liedman.net/leaflet-routing-
machine/tutorials/geocoders/
Và thêm vào một đoạn code.
Ảnh code đã thêm tùy chỉnh cho khả năng tìm kiếm theo yêu cầu

Ảnh hiển thị cho chức năng tìm kiếm đường theo yêu cầu của người dùng

Ảnh hiển thị cho chức năng tìm kiếm đường theo yêu cầu của người dùng khi đã nhập hai điểm

1.6 Chức năng lấy tọa độ hiện tại của người dùng
Ở chức năng này cho phép chúng ta sẽ có thể tìm được vị trí hiện tại mà
chúng ta đang ở trên bất kỳ đâu trên bản đồ.
Để làm ra chức năng này thì chúng ta sẽ truy cập vào liên kết sau:
Link tham khảo: https://github.com/domoritz/leaflet-locatecontrol
Sau khi đã truy cập chúng ta sẽ liên kết vào dự án của chúng ta 2 files như
sau:
Ảnh 2 files liên kết cho chức năng lấy vị trí hiện tại của người dùng

Ở hai link trên nó có một phần tên là Version. Thế thì khi liên kết
hai links này chúng ta sẽ phải thêm vào phần phiên bản vào trong
Version đó.
Ảnh 2 files liên kết đầy đủ cho chức năng lấy vị trí hiện tại của người dùng

Sau khi đã thêm thành công tiếp theo chúng ta sẽ thêm một đoạn code nữa
để hiển thị ra chức năng tìm vị trí hiện tại này.
Ảnh đoạn code thêm vào cho chức năng lấy vị trí hiện tại

1.6 Chức năng lấy tọa độ hiện
tại của người dùng
Sau khi đã thêm thành công tiếp
theo chúng ta sẽ thêm một đoạn code
nữa để hiển thị ra chức năng tìm vị trí
hiện tại này.
Ảnh hiển thị sau khi chúng ta đã click vào nút tìm vị trí hiện tại

1.7 Chức năng in bản đồ
Ở chức năng in bản đồ này cho phép chúng ta có thể in bản đồ thông qua
một nút nhất gọi là Button trên trình duyệt. Thông qua việc in này mà người dùng
có thể tùy biến cho chức năng này.
Tiếp theo để có thể bắt sự kiện này thì chúng ta sẽ phải liên kết thêm một
liên kết nữa là thư viện Ajax để bắt sự kiện click của button.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-
pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ
==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Chúng ta cần phải có một thẻ Button đại diện cho nút bấm và
hiển thị ra giao diện in bản đồ.
Và tiếp theo chúng ta sẽ cho một thuộc tính id để bắt sự kiện
click.
Ảnh các thẻ HTML mà chúng ta sẽ thêm vào trong dự án để in bản đồ

Sau khi đã bắt sự kiện click
thông qua thuộc tính ID của thẻ
button thì chúng ta sẽ viết một
hàm. Hàm này do chúng ta tự
định nghĩa hoặc chúng ta tham
khảo Hàm in của Leaflet.
Ảnh đọan code cho chức năng in bản đồ

Link tham khảo in map bằng Plugin của Leaflet.
https://github.com/Igor-Vladyka/leaflet.browser.print
Ở chức năng in bản đồ này chúng ta có thể in theo dạng chân
dung hoặc phong cảnh tùy theo lựa chọn của chúng ta.

Ảnh hiển thị chức năng in bản đồ bằng hàm tự làm

Ảnh hiển thị chức năng in bản đồ bằng Plugin của Leaflet

1.8 Chức năng phóng to màn
hình bằng JavaScript
Ở chức năng này chúng ta
có thể phóng to màn hình bằng
một nút click nhấn.
Phần code này sẽ là phần
code do nhóm phát triển nên là
phần code thuần Javascript.
Ảnh hiển code chức năng phóng to bản đồ

Ảnh hiển thị chức năng phóng to bản đồ

API Mô hình cho Doanh Nghiệp
Ở phần chức năng này thì giống như chức năng trên mà chúng ta đã làm vì
thế bạn có thể xem lại để hiểu thêm về chức năng này.
Và mục đích thì vẫn phục vụ người dùng theo hướng tìn tọa độ hiện tại tuy
nhiên nó sẽ khác biệt một chút khi nó kết hợp với phần mô hình doanh nghiệp này
vì sao?
Là vì khi kết hợp chức năng này với chức năng tìn kiếm chỉ đường của mô
hình dành cho người dùng thì nó sẽ hiệu quả hơn trong việc chỉ đường.

Hiệu quả trong vấn đề gì?
Hiệu quả trong chức năng tìm kiếm chỉ đường của mô hình doanh nghiệp. Vì
ở mô hình doanh nghiệp điểm đến đã được gán cứng một giá trị mặc định vì thế
nên khi chúng ta muốn tìm đến doanh nghiệp chúng ta chỉ cần click lấy vị trí hiện tại
thì nó sẽ chỉ đường cho chúng ta đến doanh nghiệp đó.
Đây cũng chính là sự khác biệt lớn nhất về hai mô hình doanh nghiệp và mô
hình người dùng.
Link tham khảo: https://github.com/MrMufflon/Leaflet.Coordinates

Ảnh hiển thị chức năng lấy vị trí hiện tại mô hình doanh nghiệp

Ở chức năng này nó vẫn như chức năng của mô hình người dùng trên thế
nên chúng ta sẽ lướt qua nhanh để có thể làm thêm.
Tóm gọn chức năng chúng ta sẽ phải cho một Button để có thể bắt sự kiện
click vào sau đó sử dụng hàm in có sẵn trên trình duyệt window.print() để tiến hành
in màn hình bản đồ.

Ở chức năng này nó vẫn như
chức năng của mô hình người dùng
trên thế nên chúng ta sẽ lướt qua
nhanh để có thể làm thêm.
Ảnh hiển thị chức năng in do chúng ta tự định nghĩa

1.3 Chức năng phóng to bản đồ bằng Javascript
Chức năng này nó vẫn tương tự như chức năng phóng to ở phần mô hình
người dùng nên chúng ta sẽ lướt nhanh để làm những chức năng cao cấp hơn.
Tóm gọn chức năng, chúng ta sẽ tạo một thẻ button sau đó chúng ta sẽ sử
dụng thuộc tính ID của thẻ button này để có thể bắt sự kiện.
Tiếp theo chúng ta sẽ sử dụng hàm có sẵn trong Javascript là hàm
requestFullscreen() để phóng to bản đồ.

1.3 Chức năng phóng to bản đồ
bằng Javascript
Chức năng này nó vẫn tương tự
như chức năng phóng to ở phần mô
hình người dùng nên chúng ta sẽ lướt
nhanh để làm những chức năng cao
cấp hơn.
Ảnh hiển thị chức năng phóng to màn hình do chúng ta làm

1.4 Chức năng tìm kiếm một điểm khi nhập vào một điểm
Chức năng nhập và tìm kiếm một điểm bất kỳ này chúng ta đã làm chi tiết ở
mô hình dành cho người dùng vì thế đến đây các bạn có thể xem lại nội dung bên
trên để củng cố kiến thức.
Tóm gọn cho chức năng này chúng ta sẽ cho người dùng nhập vào một
điểm sau đó sẽ hiển thị điểm người dùng nhập và tiến hành đánh dấu điểm đó.
Chúng ta sẽ mã hóa địa lý sau đó link các Plugin vào dự án
Link tham khảo chức năng: https://github.com/perliedman/leaflet-control-geocoder

1.4 Chức năng tìm kiếm một
điểm khi nhập vào một điểm
Ảnh hiển thị chức năng tìm kiếm địa điểm khi một một điểm

1.5 Chức năng hiển thị layer của Map
Chức năng này thì chúng ta cũng đã giới thiệu và làm qua trên mô hình
người dùng vì thế nên chúng ta tóm gọn chức năng này bạn có thể tham khảo ở
trên nhé.
Tóm gọn chức năng này chúng ta sẽ hiểu khái niệm về lớp sau đó chúng ta
sẽ sử dụng baseLayers của Leaflet để hiển thị ra.
Link tham khảo Lớp Provider: https://leaflet-extras.github.io/leaflet-
providers/preview/

Ảnh hiển thị layer Google Map

Ảnh hiển thị layer địa hình

Ảnh hiển thị layer hỗ hợp

1.6 Chức năng chỉ đường khi người dùng click vào bất kỳ một
nơi trên bản đồ.
Ở chức năng này cho phép người dùng có thể click vào bất kù một nơi trên bàn
đồ sau đó nó sẽ tự động chỉ đường.
Sự khác biệt của chức năng này so với chức năng chỉ đường của mô hình
người dùng là mục đích sử dụng.
Phía người dùng họ có thể tìm thoải mái tự do nơi đến và nơi đi.
Phía doanh nghiệp chỉ cho phép nhập điểm đi và nó sẽ tự chuyển đến điểm

Ảnh hiển thị chức năng chỉ đường cho mô hình doanh nghiệp

Cảm ơn các bạn rất nhiều
vì đã lắng nghe
Bản quyền nghiên cứu thuộc Nhóm 8 DH20TIN02 Đơn vị Đại Học Nam Cần Thơ 2023

Sử dụng API Leaflet chi tiết các chức năng

More Related Content

What's hot (20)

Similar to Sử dụng API Leaflet chi tiết các chức năng (20)

Sử dụng API Leaflet chi tiết các chức năng