TypeScript leaflet.icon函數代碼示例

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

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

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

  initialize: function(product: any) {
    let latitude: number;
    let longitude: number;

    try {
      latitude = +product.properties.latitude || 0;
    } catch (e) {
      latitude = 0;
    }

    try {
      longitude = +product.properties.longitude || 0;
    } catch (e) {
      longitude = 0;
    }

    this.bounds = [
      [latitude - 2.0, longitude - 2.0],
      [latitude + 2.0, longitude + 2.0]
    ];

    const legend = document.createElement('img');
    legend.src = './assets/legend-epicenter.png';
    legend.setAttribute('alt', 'Epicenter marker legend');

    // Add to legends array
    this.legends.push(legend);

    L.Marker.prototype.initialize.call(this, [latitude, longitude], {
      icon: L.icon({
        iconAnchor: [8, 8],
        iconSize: [16, 16],
        iconUrl: 'assets/star.png'
      }),
      interactive: false
    });
  }

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

export class MyNewControl extends L.Control {
	constructor() {
		super({
			position: 'topleft'
		});
	}
}

L.marker([1, 2], {
	icon: L.icon({
		iconUrl: 'my-icon.png'
	})
}).bindPopup('<p>Hi</p>');

L.marker([1, 2], {
	icon: L.divIcon({
		className: 'my-icon-class'
	})
}).setIcon(L.icon({
	iconUrl: 'my-icon.png'
})).setIcon(L.divIcon({
	className: 'my-div-icon'
}));

let polygon: L.Polygon;

import * as L from 'leaflet';
import { Layer } from './layer';

const epicIcon = L.icon({
    iconUrl: 'assets/epicenter.png',
    iconSize:     [40, 40], // size of the icon
    iconAnchor:   [20, 20], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
});

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>

import * as L from 'leaflet';
import 'leaflet.markercluster';

const polylineOptions: L.PolylineOptions = {};
const icon: L.Icon = L.icon({ iconUrl: 'foo' });

let markerClusterGroupOptions: L.MarkerClusterGroupOptions = {};
markerClusterGroupOptions = {
    showCoverageOnHover: true,
    zoomToBoundsOnClick: false,
    spiderfyOnMaxZoom: true,
    removeOutsideVisibleBounds: false,
    animate: true,
    animateAddingMarkers: false,
    disableClusteringAtZoom: 12,
    maxClusterRadius: 40,
    polygonOptions: polylineOptions,
    singleMarkerMode: true,
    spiderLegPolylineOptions: polylineOptions,
    spiderfyDistanceMultiplier: 2,
    iconCreateFunction: (cluster: L.MarkerCluster) => {
        const childMarkers: L.Marker[] = cluster.getAllChildMarkers();
        const childCount: number = cluster.getChildCount();
        cluster.zoomToBounds();
        const bounds: L.LatLngBounds = cluster.getBounds();
        return icon;
    },
    chunkedLoading: false,
    chunkDelay: 100
};