TypeScript leaflet.divIcon函數代碼示例

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

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

      .map(function(photo) {
        var icon = L.divIcon({
          iconSize: [16, 16],
          iconAnchor: [8, 8],
          popupAnchor: [0, -10],
          className: 'flickr-icon'
        });

        var marker = L.marker([photo.latitude, photo.longitude], {icon: icon})
          .bindPopup(this._template(photo), {
            maxWidth: photo.width_s,
            // avoid popup under top controls:
            autoPanPaddingTopLeft: [0, 60],
            className: 'photo-popup'
          });

        return marker;
      }, this)

	}
}

class MyIcon extends L.Icon {
	constructor() {
		super({iconUrl: 'icon.png'});
	}
}

class MyDivIcon extends L.DivIcon {
	constructor() {
		super();
	}
}

const divIcon = L.divIcon({html: ''});
let defaultIcon = new L.Icon.Default();
defaultIcon = new L.Icon.Default({imagePath: 'apath'});

const myControlClass = L.Control.extend({});
const myControl = new myControlClass();
const myOtherControlClass = myControlClass.extend({});
const myOtherControl = new myOtherControlClass();

L.Control.include({});
L.Control.mergeOptions({});
L.Control.addInitHook(() => {});
L.Control.addInitHook('method1', 'hello', 1);

export class MyNewControl extends L.Control {
	constructor() {

import $ from './util';
import * as L from 'leaflet';
import {getAccurateCurrentPosition} from './vendor/geolocation';
import { MapPlugin } from './map-plugin';
import Map, { MapButton } from './map';
import StateStore from './state-store';

var myLocationIcon = L.divIcon({
  iconSize: [20, 20],
  className: 'my-location-icon'
});

export default class ShowPosition implements MapPlugin {
  private controller: Map
  private options: StateStore
  private map: L.Map
  private button: MapButton
  private moved: boolean
  private locating: boolean
  private automoving: boolean
  private marker: L.Marker

  constructor(controller: Map, options: StateStore) {
    this.controller = controller;
    this.options = options;
  }

  setMap(map: L.Map) {
    if (navigator.geolocation) {
      this.map = map;
      this.button = this.controller.createButton('locate', 'topleft',

markerClusterGroupOptions.iconCreateFunction = (cluster: L.MarkerCluster) => {
    return L.divIcon();
};