2016-11-07 4 views
0

Ich versuche Microsoft Karte api in meiner app zu verwenden, aber wenn ich L.tileLayer.extend nennen habe ich einige Fehler wieLeaflet: Kann nicht verlängern TileLayer mit Typoskript 2.0 & Winkel 2

my code

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

Dieses Skript funktioniert gut mit Winkel 2 + Typoskript 1

jemand eine Idee, warum ich nicht meinen tileLayer mit Typoskript verlängern 2 .0?

+2

Nach dem Test ich den Index.d.ts Link zum Flugblatt wechseln stellen Sie Typoskript 2 mit der index.d.ts zur Verfügung stellen von Typings und es funktioniert gut, so npm installieren --save-dev @ types/leaflet nicht geben uns die gute Deklarationsdatei. –

+1

Sie können Ihren Kommentar als [self answer] (http://stackoverflow.com/help/self-answer) hinzufügen, da diese Informationen möglicherweise von anderen Personen als nützlich empfunden werden. – cartant

Antwort

0

Nach mehr Test ich den index.d.ts Link zum Flugblatt durch Typoskript 2 mit der index.d.ts Bereitstellung durch Typings und es funktioniert gut, so npm installieren --save-dev @ types/leaflet don geben Sie uns die gute Deklarationsdatei nicht.

+1

Es ist mir nicht zu klar, wie man das macht, was man getan hat. Könntest du ein wenig näher ausführen? – Methodician

Verwandte Themen