TypeScript leaflet.DomUtil類代碼示例

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

  _onMouseOver: function(evt) {
    // Update text
    this._tooltip.innerHTML = L.Util.template(this._tiptext, evt.data);

    // Update position
    L.DomUtil.setPosition(
      this._tooltip,
      this._map.latLngToLayerPoint(evt.latlng)
    );

    // Show the tooltip
    this._tooltip.style.display = 'block';
  },

  onAdd: function(map) {
    const className = 'leaflet-control-legend';

    this._map = map;

    if (!this._container) {
      this._container = L.DomUtil.create('div', className);
      this._container.innerHTML =
        '<a href="#" class="' +
        className +
        '-show material-icons"' +
        ' title="Legend">&#xE0DA;</a>' +
        '<button class="mat-button ' +
        className +
        '-hide">CLOSE</button>' +
        '<ul class="legend-container"></ul>';

      // Makes this work on IE10 Touch devices by stopping it from firing
      // a mouseout event when the touch is released
      this._container.setAttribute('aria-haspopup', true);
    }

    this._showButton = this._container.querySelector('.' + className + '-show');
    this._hideButton = this._container.querySelector('.' + className + '-hide');
    this._legendContainer = this._container.querySelector('.legend-container');

    if (L.Browser.touch) {
      L.DomEvent.disableClickPropagation(this._container);
    } else {
      L.DomEvent.disableClickPropagation(
        this._container
      ).disableScrollPropagation(this._container);
    }

    L.DomEvent.on(this._container, 'mousewheel', L.DomEvent.stopPropagation);
    L.DomEvent.on(this._showButton, 'click', L.DomEvent.stop).on(
      this._showButton,
      'click',
      this.open,
      this
    );
    L.DomEvent.on(this._hideButton, 'click', this.close, this);

    this.displayLegends();

    map.on('layeradd', this._onLayerAdd, this);
    map.on('layerremove', this._onLayerRemove, this);

    return this._container;
  },

	_abortLoading() {
		// adapted from TileLayer's implementation
		for (const i in this._tiles) {
			if (this._tiles[i].coords.z !== this._tileZoom) {
				const tile = this._tiles[i].el;
				tile.onload = L.Util.falseFn;
				tile.onerror = L.Util.falseFn;
				if (tile instanceof HTMLImageElement && !tile.complete) {
					tile.src = L.Util.emptyImageUrl;
					L.DomUtil.remove(tile);
					this._tiles[i] = undefined;
				}
			}
		}
	}

lg = L.layerGroup([new L.Layer(), new L.Layer()], {
	pane: 'overlayPane',
	attribution: 'test'
});

lg = new L.LayerGroup();
lg = new L.LayerGroup([new L.Layer(), new L.Layer()]);
lg = new L.LayerGroup([new L.Layer(), new L.Layer()], {
	pane: 'overlayPane',
	attribution: 'test'
});

// adapted from GridLayer documentation
const CanvasLayer = L.GridLayer.extend({
	createTile(coords: L.Coords, done: L.DoneCallback) {
		const tile = (L.DomUtil.create('canvas', 'leaflet-tile') as HTMLCanvasElement);
		const size = this.getTileSize();
		tile.width = size.x;
		tile.height = size.y;
		return tile;
	}
});

// adapted from GridLayer documentation
const AsyncCanvasLayer = L.GridLayer.extend({
	createTile(coords: L.Coords, done: L.DoneCallback) {
		const tile = (L.DomUtil.create('canvas', 'leaflet-tile') as HTMLCanvasElement);
		const size = this.getTileSize();
		tile.width = size.x;
		tile.height = size.y;
		setTimeout(() => done(undefined, tile), 1000);

 info.onAdd = function () {
   this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
   this.update();
   return this._div;
 };

 public onAdd(map: Map): HTMLElement {
     let container = L.DomUtil.create('div', 'leaflet-control-center leaflet-bar');
     L.DomUtil.create('a', 'leaflet-control-center-btn icon-center', container);
     
     return container;
 }