传单:无法使用打字稿2.0及更高版本扩展TileLayer；角度2 [英] Leaflet: Can't extend TileLayer with typescript 2.0 & angular 2

问题描述

我试图在我的应用程序中使用Microsoft Map api，但是当我调用L.tileLayer.extend时，我遇到了类似

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

有我的代码:

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);
  }
}

此脚本适用于angular 2 +打字稿1

This script works well with angular 2 + typescript 1

有人知道为什么我不能使用TypeScript 2.0扩展tileLayer?

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

推荐答案

在进行了更多测试之后，我将index.d.ts链接切换为typescript 2提供的传单，并把index.d.ts通过键入提供，效果很好，因此npm install --save-dev @ types/leaflet不会给我们提供良好的声明文件.

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.

这篇关于传单:无法使用打字稿2.0及更高版本扩展TileLayer；角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！