TypeScript DomUtil.create方法代码示例

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

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

  initialize: function(options) {
    // Create the two layers
    this._tileLayer = new L.TileLayer(options.tileUrl, options.tileOpts);
    this._dataLayer = new UtfGrid(options.dataUrl, options.dataOpts);
    this._legend = options.legend || null;

    if (typeof options.tiptext === 'string') {
      this._tiptext = options.tiptext;
      this._tooltip = L.DomUtil.create('span', CLASSES);
    }

    // Call parent constructor
    L.LayerGroup.prototype.initialize.call(this, []);
    this.addLayer(this._tileLayer);
    if (!this.isMobile()) {
      this.addLayer(this._dataLayer);
    }

    this._initialized = true;
  },

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