Leaflet: Can't extend TileLayer with typescrip

2020-04-26 13:33发布

问题:

I'm trying to use Microsoft map api in my app but when I call L.tileLayer.extend I have some error like

there is my code:

import { Component, OnInit } from '@angular/core';
import '../../public/css/styles.css';
import * as L from 'leaflet';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  public map: any;
  public poiLayer: any;

public _quadKey(x:any, y:any, z:any):string {
            var quadKey:any = [];
            for (var i = z; i > 0; i--) {
                var digit:any = '0';
                var mask = 1 << (i - 1);
                if ((x & mask) != 0) {
                    digit++;
                }
                if ((y & mask) != 0) {
                    digit++;
                    digit++;
                }
                quadKey.push(digit);
            }
            return quadKey.join('');
        }
  ngOnInit() {
  this.map = L.map(name, {
            center: L.latLng(46.72139, 2.51028), /*St Amand Montrond */
            zoom: 5,
            maxZoom: 18,
            zoomControl: false
        });

        var BingLayer = L.tileLayer.extend({
            getTileUrl: function (tilePoint:any) {
                return L.Util.template(this._url, {
                    s: this._getSubdomain(tilePoint),
                    id: this.options.id,
                    q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
                });
            },
            _quadKey: function (x:any, y:any, z:any) {
                let quadKey:any = [];
                for (var i = z; i > 0; i--) {
                    let digit = 0;
                    let mask = 1 << (i - 1);
                    if ((x & mask) != 0) {
                        digit++;
                    }
                    if ((y & mask) != 0) {
                        digit++;
                        digit++;
                    }
                    quadKey.push(digit);
                }
                return quadKey.join('');
            }
        });
        //http:\/\/ecn.t{s}.tiles.virtualearth.net\/tiles\/{id}{q}.jpeg?g=414&mkt=fr
        //http://t{s}.tiles.virtualearth.net/tiles/{id}{q}.jpeg?g=1398&dpi=d1&device=mobile
        let bing = 'http://t{s}.tiles.virtualearth.net/tiles/{id}{q}.jpeg?g=1398&dpi=d1&device=mobile';
        let dmic = '<a href="http://www.dmic.fr"><img height="50px" src="../../../res/img/logo_dmic_small.png" /></a>';
        this.poiLayer = L.layerGroup();
        this.poiLayer.addTo(this.map);
        let layers = {
            'Routière': new BingLayer(bing, { attribution: dmic, id: 'r', subdomains: ['0', '1', '2', '3', '4'], detectRetina: true }),
            'Satellite': new BingLayer(bing, { attribution: dmic, id: 'a', subdomains: ['0', '1', '2', '3', '4'], detectRetina: true })
        };

        let overlays = {
            'Traffic': L.tileLayer('http://trafficservices2.v-trafic.com/mapServer/?mode=tile&tilemode=gmap&mr=cr_trafic_wms.map&layers=fra_rc&tile={x}+{y}+{z}'),
            'Repères': this.poiLayer
        };
        this.map.attributionControl.options.prefix = false;
        layers[Object.keys(layers)[0]].addTo(this.map);
        L.control.layers(layers, overlays).addTo(this.map);
  }
}

This script works well with angular 2 + typescript 1

Someone have an idea why I can't extend my tileLayer with TypeScript 2.0?

回答1:

After more test i switch the index.d.ts link to leaflet provide by typescript 2 with the index.d.ts provide by typings and it's works well, so npm install --save-dev @types/leaflet don't give us the good declaration file.