Xây dựng bản đồ trong góc bằng tờ rơi, Phần 1: Tạo bản đồ
Tờ rơi là một thư viện JavaScript tuyệt vời để tạo bản đồ. Nó đi kèm với các tính năng tuyệt vời và cực kỳ thân thiện với thiết bị di động. Hãy xem cách ta có thể tích hợp Tờ rơi vào ứng dụng Angular của bạn .
Cài đặt
Trước khi bắt đầu, trước tiên hãy tạo một dự án bằng sơ đồ Angular :
$ ng new leaflet-example Đối với hướng dẫn này, tôi sẽ sử dụng SCSS làm cú pháp biểu định kiểu của bạn , nhưng bạn có thể chọn hương vị yêu thích của bạn .
Khi CLI đã hoàn tất việc tạo dự án, hãy mở file package.json của bạn và thêm phần phụ thuộc sau và chạy npm install :
"leaflet": "1.5.1" (Tại thời điểm viết bài này, version mới nhất của tờ rơi là 1.5.1)
Hãy thêm một thành phần bản đồ sẽ đóng role là containers bản đồ tờ rơi của ta . Điều hướng đến src/app và nhập:
$ ng generate component map Ta cũng sẽ xây dựng một số dịch vụ, vì vậy hãy tạo một folder có tên _services trong folder ứng dụng của bạn.
Bỏ qua các file đã tạo, cấu trúc folder của ta bây giờ ít nhất phải có:
leaflet-example |_ node_modules/ |_ package.json \_ src/ \_ app/ |_ app.module.ts |_ app.routing.ts |_ app.component.ts |_ app.component.html |_ app.component.scss | |_ map/ | |_ map.component.ts | |_ map.component.html | \_ map.component.scss | \_ _services/ Mở app.component.html và thay thế mọi thứ bên trong nó bằng thành phần mới của ta :
<app-map></app-map> Tạo bản đồ
Trước tiên, hãy tạo một bản đồ kích thước đầy đủ bằng cách tạo một khung đơn giản:
<div class="map-container"> <div class="map-frame"> <div id="map"></div> </div> </div> .map-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 30px; } .map-frame { border: 2px solid black; height: 100%; } #map { height: 100%; } Đầu tiên ta có div ngoài cùng sẽ định vị bản đồ trong DOM và sau đó div trong cùng sẽ là mục tiêu để đưa tập lệnh của Leaflet vào để tạo ra bản đồ. id mà ta cung cấp cho nó sẽ được chuyển làm đối số khi ta xây dựng bản đồ Tờ rơi của bạn .
OK, phần nhàm chán đã xong. Bây giờ ta có thể bắt đầu sử dụng Tờ rơi và xây dựng bản đồ của bạn .
Mở map.component.ts và nhập gói Tờ rơi:
import * as L from 'leaflet'; Ta cũng sẽ khai báo một biến cho đối tượng bản đồ của ta , (được gọi một cách sáng tạo là map ) và gán nó như một đối tượng bản đồ tờ rơi mới.
Lưu ý div bản đồ cần phải đã tồn tại trên DOM trước khi ta có thể tham chiếu nó để tạo bản đồ của bạn . Vì vậy, ta đặt điều này trong hook vòng đời AfterViewInit . Mở rộng thành phần của bạn để triển khai AfterViewInit và thêm hàm ngAfterViewInit() vào thành phần của bạn.
Thành phần của ta bây giờ sẽ trông như thế này:
import { AfterViewInit, Component } from '@angular/core'; import * as L from 'leaflet'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'] }) export class MapComponent implements AfterViewInit { private map; constructor() { } ngAfterViewInit(): void { } } Nhìn tốt cho đến nay! Hãy tạo một hàm private riêng gọi là initMap() để cô lập tất cả quá trình khởi tạo bản đồ. Sau đó, ta có thể gọi nó từ ngAfterViewInit .
Trong hàm này, ta cần tạo một đối tượng bản đồ Tờ rơi mới và API cũng cho phép ta xác định một số tùy chọn trong đó. Hãy bắt đầu đơn giản và đặt trung tâm của bản đồ và giá trị thu phóng bắt đầu.
Tôi muốn căn giữa bản đồ của ta trên lục địa USA và theo Wikipedia, căn giữa nằm ở 39.828175 ° N 98.579500 ° W.
Hệ tọa độ thập phân mà Tờ rơi sử dụng giả định bất kỳ thứ gì ở phía tây của kinh tuyến root sẽ là một số âm, vì vậy tọa độ trung tâm thực của ta sẽ là [39.8282 -98.5795].
Nếu ta sử dụng mức thu phóng mặc định là 3, thì ta có thể tạo bản đồ của bạn , như sau:
private initMap(): void { this.map = L.map('map', { center: [ 39.8282, -98.5795 ], zoom: 3 }); } Lưu ý giá trị được truyền vào hàm bản đồ 'map' đang tham chiếu đến id của div nơi bản đồ của ta sẽ được đưa vào.
Chạy npm start và chuyển đến http://localhost:4200 để xem bản đồ mới sáng bóng của bạn!
… Rất tiếc, có thể không. Tại sao? Chà, ta đã tạo đối tượng bản đồ của bạn nhưng ta không điền nó với bất kỳ thứ gì. Với Tờ rơi, ta trực quan hóa dữ liệu dưới dạng các Lớp. Loại dữ liệu bạn nghĩ đến khi bạn vẽ bản đồ được gọi là "ô". Tóm lại, ta tạo một lớp lát mới và thêm nó vào bản đồ của ta .
Trước tiên, ta tạo một lớp lát mới mà trước tiên ta phải chuyển một URL server lát. Có rất nhiều nhà cung cấp server xếp chồng trên mạng, nhưng cá nhân tôi thích sử dụng server xếp hình OpenStreetMap .
Như với việc tạo đối tượng bản đồ, ta có thể truyền vào một đối tượng tham số. Hãy bắt đầu với việc đặt mức thu phóng tối đa thành 18, thu phóng tối thiểu thành 3 và phân bổ cho các ô. Ta giới hạn nó bằng cách thêm lớp lát vào bản đồ:
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }); tiles.addTo(this.map); Bây giờ ta hãy xem trình duyệt của ta và xem bản đồ của ta hoạt động như thế nào:
Chà, đây là sự tiến bộ, ít nhất. Nhưng tại sao gạch bị cắt xén như vậy? Một điều ta cần làm khi đưa gói Tờ rơi vào dự án của bạn là bao gồm cả biểu định kiểu Tờ rơi vào bản dựng. Có một số cách ta có thể làm điều này, nhưng yêu thích của cá nhân tôi (nếu bạn đang sử dụng SCSS) là chỉ cần nhập nó vào file styles.scss root của bạn.
/* You can add global styles to this file, and also import other style files */ @import "~leaflet/dist/leaflet.css"; Nếu bạn hiện đang chạy npm start bạn cần phải dừng quá trình và khởi động lại để nó làm mới biểu định kiểu cơ sở. Hãy xem lần cuối trình duyệt:
Trông được! Đến đây bạn có một bản đồ mà bạn có thể kéo xung quanh và thu phóng.
Trong hướng dẫn tiếp theo, tôi sẽ chỉ cho bạn cách thêm dữ liệu và hiển thị nó trên bản đồ của bạn.
Chúc bạn lập bản đồ vui vẻ!
Các tin liên quan
