TypeScript leaflet.GeoJSON類代碼示例

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

function generateGroupPoly(group) {
    var groupLayer: any = new L.GeoJSON(makePoly(group));

    var popupStr: string = generatePopup(group);
    groupLayer.bindPopup(popupStr);
    
    return groupLayer;
}

	.flyToBounds(latLngBounds, fitBoundsOptions)
	.flyToBounds(latLngBoundsLiteral)
	.flyToBounds(latLngBoundsLiteral, fitBoundsOptions)
	.addHandler('Hello World', L.Handler)
	.remove()
	.whenReady(() => {})
	.whenReady(() => {}, {});

const elementToDrag = document.createElement('div');
const draggable = new L.Draggable(elementToDrag);
draggable.enable();
draggable.disable();
draggable.on('drag', () => {});

let twoCoords: [number, number] = [1, 2];
latLng = L.GeoJSON.coordsToLatLng(twoCoords);
twoCoords = L.GeoJSON.latLngToCoords(latLng) as [number, number];

let threeCoords: [number, number, number] = [1, 2, 3];
latLng = L.GeoJSON.coordsToLatLng(threeCoords);
threeCoords = L.GeoJSON.latLngToCoords(latLng) as [number, number, number];

let nestedTwoCoords = [ [12, 13], [13, 14], [14, 15] ];
const nestedLatLngs: L.LatLng[] = L.GeoJSON.coordsToLatLngs(nestedTwoCoords, 1);
nestedTwoCoords = L.GeoJSON.latLngsToCoords(nestedLatLngs, 1);

class MyMarker extends L.Marker {
	constructor() {
		super([12, 13]);
	}
}

const AsynchronousGeoJSONOverlay = L.GeoJSON.extend({
  bounds: null,
  // retain layer data to detect whether it's already loaded
  data: null,
  enabled: true,
  // retain url grab errors
  error: Error,
  id: 'async-geojson',
  legends: [],
  // retain  for custom layer adjustments
  map: null,
  // persistent styles (allows alternating styles in geoJSON features)
  styles: {},
  title: 'Async GeoJSON',
  // url to download geoJSON
  url: null,

  /**
   * Init function
   */
  initialize: function() {
    // for content downloads in async map layers; added to layer during
    // initialization, or manually
    this.httpClient = null;

    L.GeoJSON.prototype.initialize.call(this, [], {
      onEachFeature: (feature, layer) => this.onEachFeature(feature, layer),
      pointToLayer: (feature, layer) => this.pointToLayer(feature, layer),
      style: feature => this.style(feature)
    });
  },

  /**
   * Runs after the geoJSON data is successfully added
   */
  afterAdd: function() {
    // subclasses should override this method
  },

  /**
   * Handling all errors
   *
   * @param {Error}
   *
   * @return {Observable}
   *    For caught errors during http requests
   */
  handleError: function(error: any) {
    this.error = error;
    this.data = null;
    return of(null);
  },

  /**
   * Fetch data, and ensure it is parsed into geojson
   */
  loadData: function() {
    if (!this.url || !this.httpClient) {
      this.data = null;
      return;
    }

    if (this.data !== null) {
      return;
    }

    // flag that data is being loaded
    this.data = 'loading';
    this.httpClient
      .get(this.url)
      .pipe(catchError(error => this.handleError(error)))
      .subscribe(data => {
        try {
          data = this.parse(data);
          // flag that data is loaded
          this.data = data;
          // add data to layer (and map if layer still visible)
          this.addData(data);
          this.afterAdd();
        } catch (error) {
          this.handleError(error);
        }
      });
  },

  /**
   * Get geoJSON data and add it to the existing layer
   */
  onAdd: function(map) {
    this.map = map;
    L.GeoJSON.prototype.onAdd.call(this, map);

    this.loadData();
    this.afterAdd();
  },

  onEachFeature: function(feature, layer) {
    // subclasses should override this method
  },

//.........這裏部分代碼省略.........