无法将leaflet实时插件与angular5和ionic一起使用

Question

无法在ionic3和angular 5应用程序中使用leaflet-实时插件

像这样导入import leaflet from 'leaflet';

一旦我尝试使用如下代码所示的实时

leaflet.realtime({
    url: 'https://wanderdrone.appspot.com/',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
        return leaflet.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

给我一个WebKit错误，说实时不是leaflet的属性

如何在ionic3应用程序中使用leaflet插件？

Answer 1

我知道我迟到了，但我最近需要同样的东西，所以这里有一个有效的例子，希望能帮助到某人：

some.page.ts

import { Component } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-realtime';

此处@Component

export class SomePage {

    map: any;
    realtime: any;

    constructor() {

    }

    ionViewDidEnter() {

        // Initiate the map
        this.map = L.map('mapRT');

        // Start fetching realtime data
        this.realtime = L.realtime({
                url: 'https://wanderdrone.appspot.com/',
                crossOrigin: true,
                type: 'json'
            }, {
                interval: 3 * 1000
            }).addTo(this.map);

        var map = this.map;
        var realtime = this.realtime;

        this.realtime.on('update', function() {
            map.fitBounds(realtime.getBounds(), {maxZoom: 3});
        });

        // Map layout
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);

    }


    ionViewWillLeave() {
        this.realtime.stop();
        this.map.remove();
    }

}