Helpex - Trao đổi & giúp đỡ Đăng nhập

Lập bản đồ Isoline với TẠI ĐÂY trong một ứng dụng web cấp tiến Ionic Framework

Tôi đã đưa ra một số minh họa về đồ thị cô lập, cả trực tiếp và thông qua các hướng dẫn trên blog trước đó. Theo ý kiến ​​của tôi, đây là một trong những tính năng tuyệt vời nhất mà HERE cung cấp cho các nhà phát triển vì nhà phát triển yêu cầu rất ít trong khi hoàn thành rất nhiều. Trong trường hợp bạn không quen, một giá trị cách ly là một phép tính từ điểm bắt đầu và một số giá trị phạm vi. Với thông tin này, chúng tôi có thể hình dung chúng tôi có thể mất bao lâu để đến một nơi nào đó trong phạm vi đó hoặc chúng tôi có thể đi được bao xa. Điều này không bị nhầm lẫn với bán kính có thể không chính xác dựa trên giao thông hoặc những con đường không thể đi lại.

Bạn có thể nhớ rằng trước đây tôi đã trình bày cách làm việc với các cô lập bằng cách sử dụng Angular nghiêm ngặt, nhưng lần này chúng ta sẽ xem xét cách làm việc với các cô lập bằng cách sử dụng khung ứng dụng web tiến bộ, Ionic .

Để có ý tưởng về những gì chúng tôi hy vọng sẽ đạt được, hãy xem hình ảnh động sau:

Lập bản đồ Isoline với TẠI ĐÂY trong một ứng dụng web cấp tiến Ionic Framework

Để giữ mọi thứ đơn giản, chúng tôi sẽ chỉ lo lắng về việc hiển thị một vùng cách ly ở trung tâm bản đồ của chúng tôi thay vì thu thập thông tin đầu vào của người dùng như một phần của chức năng tìm kiếm. Bạn sẽ nhận thấy rằng tính năng này tương thích trên web cũng như ứng dụng Android hoặc iOS dành cho thiết bị di động.

Xây dựng Ionic Framework với ứng dụng HERE Maps

Để bắt đầu dự án này, chúng ta sẽ tạo một dự án mới. Tuy nhiên, chúng tôi sẽ sử dụng Ionic 4.x và rất nhiều mã này sẽ được tái chế từ một hướng dẫn trước đó xoay quanh Leaflet, đây là một thư viện kết xuất của bên thứ ba. Trong hướng dẫn cụ thể này, chúng tôi sẽ sử dụng trình kết xuất mặc định thay vì Tờ rơi.

Giả sử Ionic CLI được cài đặt, hãy thực hiện như sau:

ionic start HereMapsProject blank

Lệnh trên sẽ tạo một dự án trống mới chỉ có một trang. Chúng tôi sẽ đơn giản hóa trong nỗ lực loại bỏ bất kỳ sự nhầm lẫn nào có thể xuất hiện từ tài liệu chủ đề này.

Bây giờ chúng tôi đã có dự án của mình, chúng tôi cần bắt kịp tốc độ với thành phần lập bản đồ của mình. Bởi vì tôi đã viết rất nhiều về cấu hình, chúng tôi sẽ giải thích điều này với chi tiết nhỏ.

Mở tệp src / index.html của dự án để chúng tôi có thể bao gồm SDK JavaScript TẠI ĐÂY của chúng tôi:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Ionic HERE Map</title>
        <base href="/" />
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
    </head>
    <body>
        <app-root></app-root>
        <script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

Để cung cấp cho chúng tôi chức năng riêng biệt, chúng tôi đã bao gồm một số thành phần JavaScript cũng như thư viện CSS. Các chức năng khác nhau của HERE sẽ yêu cầu các thành phần khác nhau.

Với SDK JavaScript tại chỗ, chúng tôi cần tạo thành phần bản đồ của mình bằng cách thực hiện như sau:

ionic generate component here-map

Lệnh trên sẽ tạo một số tệp, tệp đầu tiên dành cho đánh dấu HTML của chúng tôi. Mở tệp src / app / here-map / here-map.component.html của dự án và bao gồm các thông tin sau:

<div #map style="width: 100%; height: 100%;"></div>

Với vùng chứa cho bản đồ của chúng ta tại chỗ, chúng ta có thể bắt đầu phát triển logic TypeScript để đi cùng với nó. Mở tệp src / app / here-map / here-map.component.ts của dự án và bao gồm các thông tin sau:

import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';

declare var H: any;

@Component({
    selector: 'here-map',
    templateUrl: './here-map.component.html',
    styleUrls: ['./here-map.component.scss']
})
export class HereMapComponent implements OnInit {

    @ViewChild("map")
    public mapElement: ElementRef;

    @Input()
    public appId: any;

    @Input()
    public appCode: any;

    @Input()
    public lat: any;

    @Input()
    public lng: any;

    private platform: any;
    private map: any;
    private router: any;

    public constructor() { }

    public ngOnInit() {
        this.platform = new H.service.Platform({
            "app_id": this.appId,
            "app_code": this.appCode
        });
        this.router = this.platform.getRoutingService();
    }

    public ngAfterViewInit() {
        setTimeout(() => {
            let defaultLayers = this.platform.createDefaultLayers();
            this.map = new H.Map(
                this.mapElement.nativeElement,
                defaultLayers.normal.map,
                {
                    zoom: 10,
                    center: { lat: this.lat, lng: this.lng }
                }
            );
            let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
        }, 100);
    }

    public isoline() { }

}

Mọi thứ sẽ trông khá quen thuộc cho đến bây giờ nếu bạn đã xem các hướng dẫn trước đây tôi đã viết. Một điểm khác biệt giữa mã này và mã Tờ rơi là cách chúng tôi làm mới thành phần khi chế độ xem đã tải xong.

Bạn sẽ nhận thấy rằng toàn bộ ngAfterViewInitphương thức được bao bọc bằng một setTimeout. Điều này là cần thiết vì trong Ionic Framework, kích thước chế độ xem không sẵn sàng ngay lập tức, ngay cả trong các móc vòng đời mà Angular cung cấp. Chúng tôi có thể thêm thời gian chờ cho toàn bộ mã hoặc chúng tôi có thể tùy chọn đặt thời gian chờ như sau:

setTimeout(() => {
    this.map.getViewPort().resize();
}, 100);

Những gì bạn quyết định sử dụng là hoàn toàn tùy thuộc vào bạn. Việc sử dụng resizephương pháp tương tự hơn với những gì tôi đã sử dụng trong ví dụ Tờ rơi nơi tôi đã sử dụng invalidateSizethay thế.

Trước khi có thể bắt đầu sử dụng thành phần trong các trang của mình, chúng ta cần thêm nó vào mô-đun cho các trang mà chúng ta muốn sử dụng nó. Mở tệp src / app / home / home.module.ts của dự án và làm cho nó trông giống như tiếp theo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HereMapComponent } from '../here-map/here-map.component';

import { HomePage } from './home.page';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild([
            {
                path: '',
                component: HomePage
            }
        ])
    ],
    declarations: [HomePage, HereMapComponent],
    exports: [HereMapComponent]
})
export class HomePageModule {}

Chúng tôi đã nhập HereMapComponentvà thêm nó vào @NgModulekhối. Cuối cùng chúng ta có thể sử dụng nó trong trang của mình. Mở tệp src / app / home / home.page.html của dự án và bao gồm các phần sau:

<ion-header>
    <ion-toolbar>
        <ion-title>
            Ionic HERE Map
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <here-map appId="APP-ID-HERE" appCode="APP-CODE-HERE" lat="37.7397" lng="-121.4252"></here-map>
</ion-content>

Bạn cần đăng ký tài khoản miễn phí tại đây để nhận các giá trị mã ứng dụng và id ứng dụng của mình. Nhưng lưu ý rằng đây là những đầu vào dự kiến ​​được xác định trong tệp TypeScript trước đó. Các latlnggiá trị cũng sẽ đại diện cho điểm trung tâm của chúng tôi trên bản đồ cũng như điểm trung tâm đến đường cô lập của chúng tôi.

Giống như tôi đã đề cập trước đây, mục tiêu của bài viết này không đi sâu vào việc hiển thị bản đồ HERE trong ứng dụng Ionic Framework. Điều này đã được đề cập trong bài viết trước của tôi có tiêu đề, Tương tác với Bản đồ Tờ rơi trong Ionic Framework PWA . Chúng tôi chỉ cần nền tảng tại chỗ để chúng tôi có thể làm việc với chức năng cô lập.

Tính toán một Isoline với một điểm trung tâm và biến phạm vi

Với chức năng của ứng dụng, chúng ta có thể lo lắng về sự cô lập của mình, thực ra chỉ là một vài dòng mã.

Mở tệp src / app / here-map / here-map.component.ts của dự án và bao gồm isolinephương thức sau :

public isoline() {
    let params = {
        "mode": "fastest;car;traffic:enabled",
        "range": "300",
        "rangetype": "time",
        "departure": "now",
        "start": this.lat + "," + this.lng
    }
    this.map.removeObjects(this.map.getObjects());
    this.router.calculateIsoline(params, data => {
        if(data.response) {
            let center = new H.geo.Point(data.response.center.latitude, data.response.center.longitude),
                isolineCoords = data.response.isoline[0].component[0].shape,
                linestring = new H.geo.LineString(),
                isolinePolygon,
                isolineCenter;
            isolineCoords.forEach(coords => {
                linestring.pushLatLngAlt.apply(linestring, coords.split(','));
            });
            isolinePolygon = new H.map.Polygon(linestring);
            isolineCenter = new H.map.Marker(center);
            this.map.addObjects([isolineCenter, isolinePolygon]);
            this.map.setViewBounds(isolinePolygon.getBounds());
        }
    }, error => {
        console.error(error);
    });
}

Vì vậy, những gì đang xảy ra trong đoạn mã trên?

Để tính toán một cô lập, một vài tham số phải được xác định. Chúng tôi cần biết cách đo độ cô lập, trong trường hợp của chúng tôi là vận chuyển bằng ô tô với giao thông được giám sát. Chúng tôi cần biết phạm vi mà chúng tôi đang đo, trong trường hợp của chúng tôi là 300 giây. Vì có liên quan đến giao thông, chúng ta cần chỉ định thời gian để theo dõi nowtình trạng giao thông hiện tại ở đâu thay vì một ngày trong quá khứ. Các startđiểm là trung tâm của Isoline của chúng tôi mà ví dụ này là trung tâm của bản đồ.

Mỗi khi chúng tôi chạy phương pháp này, chúng tôi sẽ xóa bản đồ. Khi chúng tôi tính toán cô lập, chúng tôi sẽ nhận được thông tin tọa độ cần thiết từ phản hồi để vẽ các đa giác và đường của chúng tôi. Chúng tôi cũng đang đặt một điểm đánh dấu ở trung tâm nhất định của vùng cách ly.

Việc tính toán thông qua API khá đơn giản so với những gì có thể xảy ra nếu bạn phải làm tất cả những điều này bằng tay.

Phần kết luận

Bạn vừa thấy cách làm việc với các tính năng cô lập trong một ứng dụng Ionic Framework hoạt động cho cả web cũng như thiết bị di động. Ví dụ cụ thể này đã sử dụng bản đồ HERE mặc định và Ionic 4.x. Nếu bạn vẫn đang sử dụng Ionic 3.x và bạn cần trợ giúp định cấu hình ứng dụng của mình để sử dụng TẠI ĐÂY, bạn có thể xem hướng dẫn trước đây của tôi có tiêu đề, Hiển thị Bản đồ Tương tác TẠI ĐÂY trong Ứng dụng Ionic Framework .

Ví dụ này sẽ xây dựng cho web mà không có phụ thuộc nào được bổ sung. Nếu bạn muốn xây dựng cho Android hoặc iOS, bạn sẽ cần Apache Cordova có sẵn cho mình. Tuy nhiên, không có thay đổi nào đối với mã là cần thiết để xây dựng chéo.

6 hữu ích 0 bình luận 6.8k xem chia sẻ

Có thể bạn quan tâm

loading