TypeScript leaflet.Util类代码示例

  _loadTileP: function(zoom, x, y) {
    const head = document.getElementsByTagName('head')[0],
      key = zoom + '_' + x + '_' + y,
      functionName = 'lu_' + key,
      wk = this._windowKey,
      self = this;

    const url = L.Util.template(
      this._url,
      L.Util.extend(
        {
          cb: wk + '.' + functionName,
          s: L.TileLayer.prototype._getSubdomain.call(this, { x: x, y: y }),
          x: x,
          y: y,
          z: zoom
        },
        this.options
      )
    );

    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', url);

    window[wk][functionName] = function(data) {
      self._cache[key] = data;
      delete window[wk][functionName];
      head.removeChild(script);
    };

    head.appendChild(script);
  },

		return (_err: any, data: any) => {
			if (data) {
				this.fire('tilecachehit', {
					tile,
					url: tileUrl
				});
				if (Date.now() > data.timestamp + this.options.cacheMaxAge && !this.options.useOnlyCache) {
					// Tile is too old, try to refresh it
					console.log('Tile is too old: ', tileUrl);

					if (this.options.saveToCache) {
						tile.onload = L.Util.bind((this._saveTile as any), this, tile, tileUrl, false, done);
					}
					tile.crossOrigin = 'Anonymous';
					tile.src = tileUrl;
					tile.onerror = function(_ev: any) {
						// If the tile is too old but couldn't be fetched from the network,
						//   serve the one still in cache.
						(this as HTMLImageElement).src = data.dataUrl;
					};
				} else {
					// Serve tile from cached data
					// console.log('Tile is cached: ', tileUrl);
					tile.onload = L.Util.bind((this._tileOnLoad as any), this, done, tile);
					tile.src = data.dataUrl;    // data.dataUrl is already a base64-encoded PNG image.
				}
			} else {
				this.fire('tilecachemiss', {
					tile,
					url: tileUrl
				});
				if (this.options.useOnlyCache) {
					// Offline, not cached
					// console.log('Tile not in cache', tileUrl);
					tile.onload = L.Util.falseFn;
					tile.src = L.Util.emptyImageUrl;
				} else {
					//Online, not cached, request the tile normally
					// console.log('Requesting tile normally', tileUrl);
					if (this.options.saveToCache) {
						tile.onload = L.Util.bind((this._saveTile as any), this, tile, tileUrl, null, done);
					} else {
						tile.onload = L.Util.bind((this._tileOnLoad as any), this, done, tile);
					}
					tile.crossOrigin = 'Anonymous';
					tile.src = tileUrl;
				}
			}
		};

 private _template(data: Photo) {
   var template =
     '<b class="title">{title}</b>' +
     '<a href="https://www.flickr.com/photos/{owner}/{id}" target="_blank">' +
       '<img class="photo" src="{url_s}" alt="{title}" width="{width_s}" height="{height_s}">' +
     '</a>' +
     '<a href="http://flickr.com" target="_blank" class="flickr-logo">' +
       'Flickr' +
     '</a>' +
     '<a class="owner" href="https://www.flickr.com/photos/{owner}" target="_blank">{ownername}</a>';
   return L.Util.template(template, data);
 }

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

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

	prop2: '2',
};

const obj3 = {
	prop3: 'three',
};

const obj4 = {
	prop4: 'cuatro',
};

const obj5 = {
	prop5: 'cinque',
};

const extended0: typeof obj1 = L.Util.extend(obj1);
const extended1: typeof obj1 & typeof obj2 = L.Util.extend(obj1, obj2);
const extended2: typeof obj1 & typeof obj2 & typeof obj3 = L.Util.extend(obj1, obj2, obj3);
const extended3: typeof obj1 & typeof obj2 & typeof obj3 & typeof obj4 = L.Util.extend(obj1, obj2, obj3, obj4);
const extended4: typeof obj1 & typeof obj2 & typeof obj3 & typeof obj4 & typeof obj5 = L.Util.extend(obj1, obj2, obj3, obj4, obj5);

L.Util.create({});
L.Util.create(null, {foo: {writable: true, value: 'bar'}});

L.Util.bind(() => {}, {});
L.Util.stamp({});
L.Util.throttle(() => {}, 123, {});
L.Util.wrapNum(123, []);
L.Util.wrapNum(123, [], true);
L.Util.falseFn();
L.Util.formatNum(123);

	iconUrl: 'my-icon.png'
})).setIcon(L.divIcon({
	className: 'my-div-icon'
}));

const latLngs = [
  {lat: 0, lng: 0},
  {lat: 1, lng: 1}
];
const polygon = new L.Polygon(latLngs);
const polygonExclusion = new L.Polygon([latLngs, latLngs]);

L.polygon(latLngs).addTo(map);
L.polygon([latLngs, latLngs]).addTo(map);

L.Util.extend({});
L.Util.create({});
L.Util.bind(() => {}, {});
L.Util.stamp({});
L.Util.throttle(() => {}, 123, {});
L.Util.wrapNum(123, []);
L.Util.wrapNum(123, [], true);
L.Util.falseFn();
L.Util.formatNum(123);
L.Util.formatNum(123, 1);
L.Util.trim('word   ');
L.Util.splitWords('word word');
L.Util.setOptions({}, {});
L.Util.getParamString({});
L.Util.getParamString({}, '');
L.Util.getParamString({}, '', true);

points.bindPopup(function ({feature}) {
  return L.Util.template('<p>Gate {F_Area_ID}<br>{TA}<br><br>More stuff here!</p>', feature.properties);
});