TypeScript leaflet.marker函數代碼示例

  onEachFeature: function(feature: any, layer: any) {
    if (feature.properties && this._count % 2 === 0) {
      const coordinates = feature.geometry.coordinates[0];
      const coordinateIdx = Math.round(
        Math.random() * (coordinates.length - 2)
      );

      // get angle for the labels
      const markerCoords = coordinates[coordinateIdx];
      const nextCoords = coordinates[coordinateIdx + 1];
      const angle = this.getAngle(markerCoords, nextCoords) * -1;

      const marker = L.marker([markerCoords[1], markerCoords[0]], {
        icon: L.divIcon({
          className: 'contour-overlay-label',
          html: `<div
              class="content">
                <div
                style="transform: rotate(${angle}deg)">
                  ${this.createLabel(feature)}
                </div>
              </div>`,
          iconAnchor: [7, 8],
          iconSize: [14, 10]
        })
      });

      this.addLayer(marker);
    }

    this._count += 1;

    const popupContent = this.generatePopupContent(feature);
    layer.bindPopup(popupContent);
  },

  ngOnInit() {
    this.pin = L.marker([0, 0], {
      draggable: true,
      icon: L.icon({
        iconAnchor: [12, 41],
        iconSize: [25, 41],
        iconUrl: DEFAULT_ICON_URL,
        shadowSize: [0, 0],
        tooltipAnchor: [16, -28]
      })
    });

    this.pin.enabled = true;

    if (
      !this.location ||
      !(this.location.latitude || this.location.latitude === 0) ||
      !(this.location.longitude || this.location.longitude === 0)
    ) {
      setTimeout(() => {
        this.updateFeltReportLocation(this.feltReport, this.event);
      }, 0);
    } else {
      this.updatePin();
    }

    this.pin.on('dragend', event => {
      return this.onMarkerChange();
    });
  }

function createEventMarker(event: any) {
    const marker: any = L.marker([event.lat, event.lon], {icon: epicIcon});

    const popup = `<table class="my-table">
                            <tr>
                                <th>ID:</th>
                                <td>` + event.event_id + `</td>
                            </tr>
                            <tr> 
                                <th>Magnitude:</th>
                                <td>` + event.magnitude + `</td>
                            </tr>
                            <tr>
                                <th>Depth:</th>
                                <td>` + event.depth + `</td>
                            </tr>
                            <tr>
                                <th>Latitude:</th>
                                <td>` + event.lat + `</td>
                            </tr>
                            <tr>
                                <th>Longitude:</th>
                                <td>` + event.lon + `</td>
                            </tr>
                            <tr>
                                <th>Description:</th>
                                <td>` + event.place + `</td>
                            </tr>
                        </table>`;

    marker.bindPopup(popup);

    return marker;
}

 createMarkerPlaceholder: function(latlng) {
   // create invisible icon
   const icon = L.icon({
     iconSize: [0, 0],
     iconUrl: 'empty'
   });
   // add invisible marker to bottom center of circle
   return L.marker(latlng, { icon: icon }).addTo(this.map);
 },

 it('calls addTooltip for each layer', done => {
   const addTooltipToLayerSpy = spyOn(overlay, 'addTooltipToLayer');
   const layer = L.marker(latlng).addTo(overlay.map);
   overlay.afterAdd();
   setTimeout(() => {
     expect(addTooltipToLayerSpy).toHaveBeenCalled();
     expect(addTooltipToLayerSpy).toHaveBeenCalledWith(layer);
     done();
   });
 });

example = () => {
	const myIcon = L.icon({
		iconUrl: 'my-icon.png',
		iconSize: L.point(20, 20),
		iconAnchor: L.point(10, 10),
		labelAnchor: L.point(6, 0) // as I want the label to appear 2px past the icon (10 + 2 - 6)
	});
	L.marker(L.latLng(-37.7772, 175.2606), {
		icon: myIcon
	}).bindLabel('Look revealing label!').addTo(map);
};

polygons.on('createfeature', function (e) {
  var id = e.feature.id;
  var feature = polygons.getFeature(id);
  var center = feature.getBounds().getCenter();
  var label = L.marker(center, {
    icon: L.divIcon({
      iconSize: null,
      className: 'label',
      html: '<div>' + e.feature.properties.F_Area_ID + '</div>'
    })
  }).addTo(map);
  labels[id] = label;
});

  pointToLayer: function(feature: any, latlng: any) {
    const props = feature.properties;
    const intensity = this.romanPipe.transform(props.intensity);
    let marker;

    if (
      props.network === 'DYFI' ||
      props.network === 'INTENSITY' ||
      props.network === 'CIIM' ||
      props.station_type === 'macroseismic'
    ) {
      // create a marker for a DYFI station
      marker = L.marker(latlng, {
        icon: L.divIcon({
          className: `station-overlay-dyfi-layer-icon mmi${intensity}`,
          iconAnchor: [7, 7],
          iconSize: [14, 14],
          popupAnchor: [0, 0]
        })
      });
    } else {
      // create a marker for a seismic station
      marker = L.marker(latlng, {
        icon: L.divIcon({
          className:
            'station-overlay-station-layer-icon station-mmi' + `${intensity}`,
          iconAnchor: [7, 8],
          iconSize: [14, 10],
          popupAnchor: [0, -4]
        })
      });
    }

    // Add event listener to generate a popup when the station is clicked
    marker.on('click', this.generatePopup, this);
    return marker;
  },

  loadMap() {
    this.map = Leaflet
      .map("map")
      .setView(this.latLng, 13)
      .on("click", this.onMapClicked.bind(this))

    Leaflet.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
      .addTo(this.map);

    this.marker = Leaflet
      .marker(this.latLng, { draggable: true })
      .on("dragend", this.onMarkerPositionChanged.bind(this))
      .addTo(this.map);

    this.circle = Leaflet.circle(this.latLng, this.radius).addTo(this.map);
  }