2016-11-07 56 views
0

我尝试使用微软的地图API在我的应用程序,但是当我打电话L.tileLayer.extend我有一个像传单:不能与打字稿2.0和角2

my code

一些错误有扩展TileLayer我代码:

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

这个脚本运行良好角2 + 1楼打字稿

有人有一个想法,为什么我不能打字稿2致以tileLayer 0.0?

+2

经过多次测试我切换index.d.ts链接到单张提供打字稿2与index.d.ts由类型提供,它的工作很好,所以npm安装--save-dev @ types/leaflet不给我们的良好声明文件。 –

+1

您可能希望将您的评论添加为[自我回复](http://stackoverflow.com/help/self-answer),因为其他人可能会发现此信息有用。 – cartant

回答

0

经过更多的测试,我将index.d.ts链接切换到typecript 2提供的index.html提供的type.d.ts类型,并且工作正常,所以npm install --save-dev @ types/leaflet don给我们好的申报文件。

+1

我不太清楚如何去做你做的事。你能详细说明一下吗? – Methodician