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
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?
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. –
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