TypeScript leaflet.Map類代碼示例

本文整理匯總了TypeScript中leaflet.Map類的典型用法代碼示例。如果您正苦於以下問題：TypeScript Map類的具體用法？TypeScript Map怎麽用？TypeScript Map使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。

在下文中一共展示了Map類的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: getPersonLocation

    getPersonLocation(map:Map) {

        let personLocation = new LocationModel();

        map.locate({setView: true, maxZoom: 15});

        function onLocationFound(e) {

            personLocation.latitude = e.latlng.lat;
            personLocation.longitude = e.latlng.lng;

            let radius = e.accuracy / 4;

            L.circleMarker(e.latlng, {
                radius: radius,
                fillColor: "green",
                color: "red",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            })
                .bindPopup('You are within ' + radius + ' meters from this point', {})
                .addTo(map)
                .openPopup();
        }


        map.on('locationfound', onLocationFound);

        function onLocationError(e) {
            alert(e.message);
        }

        map.on('locationerror', onLocationError);

        return Promise.resolve(personLocation);
    }

開發者ID:pub-t，項目名稱:destination，代碼行數:37，代碼來源:geocoding.service.ts

示例2: constructor

  constructor(el: string | HTMLElement) {
    let stamen = new TileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}{r}.png')

    this.map = new Map(el, {
      layers: [stamen],
      zoomControl: false,
      scrollWheelZoom: false,
      attributionControl: false,
    })
    this.map.addControl(
      new Control.Zoom({
        position: 'topright',
      })
    )
  }

開發者ID:applieddataconsultants，項目名稱:cvhta-web，代碼行數:15，代碼來源:mapper.ts

示例3:

	easeLinearity: 0.6,
	noMoveStart: true
};

const zoomOptions: L.ZoomOptions = {};

const panOptions: L.PanOptions = {};

const fitBoundsOptions: L.FitBoundsOptions = {};

let map = L.map('foo');
map = L.map('foo', mapOptions);
map = L.map(htmlElement);
map = L.map(htmlElement, mapOptions);

map = new L.Map('foo', mapOptions);
map = new L.Map(htmlElement);
map = new L.Map(htmlElement, mapOptions);

let doesItHaveLayer: boolean;
doesItHaveLayer = map.hasLayer(L.tileLayer(''));

// map.getRenderer

let html: HTMLElement;
html = map.createPane('foo');
html = map.createPane('foo', htmlElement);
html = map.getPane('foo');
html = map.getPane(htmlElement);
html = map.getContainer();

開發者ID:Igorbek，項目名稱:DefinitelyTyped，代碼行數:30，代碼來源:leaflet-tests.ts

示例4:

	easeLinearity: 0.6,
	noMoveStart: true
};

const zoomOptions: L.ZoomOptions = {};

const panOptions: L.PanOptions = {};

const fitBoundsOptions: L.FitBoundsOptions = {};

let map = L.map('foo');
map = L.map('foo', mapOptions);
map = L.map(htmlElement);
map = L.map(htmlElement, mapOptions);

map = new L.Map('foo', mapOptions);
map = new L.Map(htmlElement);
map = new L.Map(htmlElement, mapOptions);

let doesItHaveLayer: boolean;
doesItHaveLayer = map.hasLayer(L.tileLayer(''));

map.off('moveend');
map.off('moveend', () => {});
map.off('moveend', () => {}, {});

map.removeEventListener('moveend');
map.removeEventListener('moveend', () => {});
map.removeEventListener('moveend', () => {}, {});

map.panInside(latLng, {padding: [50, 50], paddingBottomRight: point, paddingTopLeft: [100, 100]});

開發者ID:chicoxyzzy，項目名稱:DefinitelyTyped，代碼行數:31，代碼來源:leaflet-tests.ts

示例5: loadData

  public loadData(geos: GeoCollection[]) {
    for (let geo of geos) {
      let group = new GeoJSON(geo, {
        pointToLayer(feature, latlng) {
          return new Marker(latlng, {
            icon: new MakiMarker({
              icon: geo.icon,
              color: geo.color,
              size: 's',
              iconUrl: '',
            }),
          })
        },
      })

      group.bindTooltip((layer: any) => {
        let feature = layer.feature
        return `
            <a target="_blank" href="${feature.properties.url}">
              <img class='cvhta-popup-logo' src="${feature.properties.logo}"/>
            </a>`
      })

      this.map.addLayer(group)
    }
  }

開發者ID:applieddataconsultants，項目名稱:cvhta-web，代碼行數:26，代碼來源:mapper.ts

示例6:

 .subscribe(location => {
     this.map.fitBounds(location.viewBounds);
     this.address = location.address;
 }, error => console.error(error));

開發者ID:massilva，項目名稱:angular2-leaflet-starter，代碼行數:4，代碼來源:navigator.component.ts

示例7: setView

 public setView(ll: [number, number], zoom: number) {
   this.map.setView(ll, zoom)
 }

開發者ID:applieddataconsultants，項目名稱:cvhta-web，代碼行數:3，代碼來源:mapper.ts

示例8: zoomToMarker

 zoomToMarker(marker: Marker) {
   this.map.setView([marker.lat, marker.lng], 14, {
     animate: true
   });
 }

開發者ID:mavance，項目名稱:in-my-backyard，代碼行數:5，代碼來源:leaflet.service.ts

示例9:

 .subscribe(location => {
     this.map.panTo([location.latitude, location.longitude]);
     this.address = location.address;
 }, error => console.error(error));

開發者ID:mechanicux，項目名稱:angular2-leaflet-starter，代碼行數:4，代碼來源:navigator.component.ts

注：本文中的leaflet.Map類示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。