TypeScript Control.extend方法代碼示例

const MousePosition = L.Control.extend({
  options: {
    emptyString: '',
    latFormatter: function(n) {
      return [Math.abs(n).toFixed(3), '&deg;', n < 0 ? 'S' : 'N'].join('');
    },
    lngFirst: false,
    lngFormatter: function(n) {
      return [Math.abs(n).toFixed(3), '&deg;', n < 0 ? 'W' : 'E'].join('');
    },
    numDigits: 3,
    position: 'bottomright',
    separator: ' : '
  },

  /**
   * Overriden method from parent class to remove control from map
   *
   * @param map
   *      The leaflet map
   * @returns _container
   *      The container element for this control
   */
  onAdd: function(map) {
    this._container = L.DomUtil.create(
      'div',
      'leaflet-control-background leaflet-control-mouseposition'
    );
    L.DomEvent.disableClickPropagation(this._container);
    map.on('mousemove', this._onMouseMove, this);
    this._container.innerHTML = this.options.emptyString;
    return this._container;
  },

  /**
   * Overriden method from parent class to remove control from map
   *
   * @param map
   */
  onRemove: function(map) {
    map.off('mousemove', this._onMouseMove);
  },

  /**
   * Function to calculate the lat/long coordinates of the current mouse
   * position
   *
   * @param e
   *     mouse event
   */
  _onMouseMove: function(e) {
    let lng = L.Util.formatNum(e.latlng.lng, this.options.numDigits);
    // need to correct for rollover of map if user scrolls
    if (lng >= 0) {
      lng = ((lng + 180) % 360) - 180;
    } else {
      lng =
        ((lng + 180 + Math.ceil(Math.abs(lng + 180) / 360) * 360) % 360) - 180;
    }
    let lat = L.Util.formatNum(e.latlng.lat, this.options.numDigits);
    if (this.options.lngFormatter) {
      lng = this.options.lngFormatter(lng);
    }
    if (this.options.latFormatter) {
      lat = this.options.latFormatter(lat);
    }
    const value = this.options.lngFirst
      ? lng + this.options.separator + lat
      : lat + this.options.separator + lng;
    this._container.innerHTML = value;
  }
});

	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() {
		super({
			position: 'topleft'
		});
	}

const LegendControl = L.Control.extend({
  /**
   * Add a layer to the legend
   *
   * @param layerEvent
   *     The event to add a layer to legend
   */
  _onLayerAdd: function(layerEvent) {
    this.displayLegends();
  },

  /**
   * Remove a layer from legend
   *
   * @param layerEvent
   *     The layer to remove
   */
  _onLayerRemove: function(layerEvent) {
    this.displayLegends();
  },

  /**
   * Add an individual legend string or DOM element to the legend control.
   *
   */
  addLegend: function(legend) {
    let legendItem;

    // No legend to display
    if (legend === null) {
      return;
    }

    this.removeMessage();

    legendItem = document.createElement('li');

    // Add a DOM Element or DOM String
    if (typeof legend === 'object') {
      legendItem.appendChild(legend);
    } else if (typeof legend === 'string') {
      legendItem.innerHTML = legend;
    }

    this._legendContainer.appendChild(legendItem);
  },

  /**
   * Add message stating that there are no legends to display
   *
   */
  addMessage: function() {
    let message;

    if (this._legendContainer.querySelectorAll('li').length === 0) {
      message = document.createElement('li');
      message.className = 'no-legend';
      message.innerHTML = 'Please select a layer.';

      this._legendContainer.appendChild(message);
    }
  },

  /**
   * Removes all children from the overall legend container
   */
  clearLegendContainer: function() {
    if (this._legendContainer) {
      while (this._legendContainer.firstChild) {
        this._legendContainer.removeChild(this._legendContainer.firstChild);
      }
    }
  },

  /**
   * Show the Legend control
   */
  close: function() {
    L.DomUtil.removeClass(this._container, 'leaflet-control-legend-visible');
  },

  /**
   * Loops through each legend object in the legends array and displays
   * the legends
   *
   */
  displayLegends: function() {
    let i, len, legends;

    if (!this._map) {
      return;
    }

    legends = [];
    legends = (this._legends || []).slice();

    // clear existing legends
    this.clearLegendContainer();

    // loop through layers on the map, check for legends
//.........這裏部分代碼省略.........