itowns 2.45.1-next.0 → 2.45.1-next.1

package/lib/Source/Source.js

@@ -0,0 +1,202 @@
+import { Extent, CRS } from '@itowns/geographic';
+import GeoJsonParser from "../Parser/GeoJsonParser.js";
+import KMLParser from "../Parser/KMLParser.js";
+import GDFParser from "../Parser/GDFParser.js";
+import GpxParser from "../Parser/GpxParser.js";
+import GTXParser from "../Parser/GTXParser.js";
+import ISGParser from "../Parser/ISGParser.js";
+import VectorTileParser from "../Parser/VectorTileParser.js";
+import Fetcher from "../Provider/Fetcher.js";
+// import Cache from 'Core/Scheduler/Cache';
+import { LRUCache } from 'lru-cache';
+
+/** @private */
+export const supportedParsers = new Map([['application/geo+json', GeoJsonParser.parse], ['application/json', GeoJsonParser.parse], ['application/kml', KMLParser.parse], ['application/gpx', GpxParser.parse], ['application/x-protobuf;type=mapbox-vector', VectorTileParser.parse], ['application/gtx', GTXParser.parse], ['application/isg', ISGParser.parse], ['application/gdf', GDFParser.parse]]);
+const noCache = {
+  get: () => {},
+  set: a => a,
+  clear: () => {}
+};
+
+/**
+ * This interface describes parsing options.
+ * @typedef {Object} ParsingOptions
+ * @property {Source} in - data informations contained in the file.
+ * @property {FeatureBuildingOptions|Layer} out - options indicates how the features should be built.
+ */
+
+let uid = 0;
+
+/**
+ * Sources are object containing informations on how to fetch resources, from a
+ * set source.
+ *
+ * To extend a Source, it is necessary to implement two functions:
+ * `urlFromExtent` and `extentInsideLimit`.
+ *
+ * @extends InformationsData
+ *
+ * @property {boolean} isSource - Used to checkout whether this source is a
+ * Source. Default is true. You should not change this, as it is used internally
+ * for optimisation.
+ * @property {number} uid - Unique uid mainly used to store data linked to this
+ * source into Cache.
+ * @property {string} url - The url of the resources that are fetched.
+ * @property {string} format - The format of the resources that are fetched.
+ * @property {function} fetcher - The method used to fetch the resources from
+ * the source. iTowns provides some methods in {@link Fetcher}, but it can be
+ * specified a custom one. This method should return a `Promise` containing the
+ * fetched resource. If this property is set, it overrides the chosen fetcher
+ * method with `format`.
+ * @property {Object} networkOptions - Fetch options (passed directly to
+ * `fetch()`), see [the syntax for more information](
+ * https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Syntax).
+ * By default, set to `{ crossOrigin: 'anonymous' }`.
+ * @property {string} crs - The crs projection of the resources.
+ * @property {string} attribution - The intellectual property rights for the
+ * resources.
+ * @property {Extent} extent - The extent of the resources.
+ * @property {function} parser - The method used to parse the resources attached
+ * to the layer. iTowns provides some parsers, visible in the `Parser/` folder.
+ * If the method is custom, it should return a `Promise` containing the parsed
+ * resource. If this property is set, it overrides the default selected parser
+ * method with `source.format`. If `source.format` is also empty, no parsing
+ * action is done.
+ * <br><br>
+ * When calling this method, two parameters are passed:
+ * <ul>
+ *  <li>the fetched data, i.e. the data to parse</li>
+ *  <li>an {@link ParsingOptions}  containing severals properties, set when this method is
+ *  called: it is specific to each call, so the value of each property can vary
+ *  depending on the current fetched tile for example</li>
+ * </ul>
+ */
+class Source {
+  /**
+   * @param {Object} source - An object that can contain all properties of a
+   * Source. Only the `url` property is mandatory.
+   */
+  constructor(source) {
+    if (source.projection) {
+      console.warn('Source projection parameter is deprecated, use crs instead.');
+      source.crs = source.crs || source.projection;
+    }
+    if (source.crs) {
+      CRS.isValid(source.crs);
+    }
+    this.crs = source.crs;
+    this.isSource = true;
+    if (!source.url) {
+      throw new Error('New Source: url is required');
+    }
+    this.uid = uid++;
+    this.url = source.url;
+    this.format = source.format;
+    this.fetcher = source.fetcher || Fetcher.get(source.format);
+    this.parser = source.parser || supportedParsers.get(source.format) || ((d, opt) => {
+      d.extent = opt.extent;
+      return d;
+    });
+    this.isVectorSource = (source.parser || supportedParsers.get(source.format)) != undefined;
+    this.networkOptions = source.networkOptions || {
+      crossOrigin: 'anonymous'
+    };
+    this.attribution = source.attribution;
+    /** @type {Promise<any>} */
+    this.whenReady = Promise.resolve();
+    this._featuresCaches = {};
+    if (source.extent && !source.extent.isExtent) {
+      this.extent = new Extent(this.crs).setFromExtent(source.extent);
+    } else {
+      this.extent = source.extent;
+    }
+  }
+  handlingError(err) {
+    throw new Error(err);
+  }
+
+  /**
+   * Generates an url from an extent. This url is a link to fetch the
+   * resources inside the extent.
+   *
+   * @param {Extent} extent - Extent to convert in url.
+    * @return {string} The URL constructed from the extent.
+   */
+  // eslint-disable-next-line
+  urlFromExtent() {
+    throw new Error('In extended Source, you have to implement the method urlFromExtent!');
+  }
+  getDataKey(extent) {
+    return `z${extent.zoom}r${extent.row}c${extent.col}`;
+  }
+
+  /**
+   * Load  data from cache or Fetch/Parse data.
+   * The loaded data is a Feature or Texture.
+   *
+   * @param      {Extent}  extent   extent requested parsed data.
+   * @param      {FeatureBuildingOptions|Layer}  out     The feature returned options
+   * @return     {FeatureCollection|Texture}  The parsed data.
+   */
+  loadData(extent, out) {
+    const cache = this._featuresCaches[out.crs];
+    const key = this.getDataKey(extent);
+    // console.log('Source.loadData', key);
+    // try to get parsed data from cache
+    let features = cache.get(key);
+    if (!features) {
+      // otherwise fetch/parse the data
+      features = this.fetcher(this.urlFromExtent(extent), this.networkOptions).then(file => this.parser(file, {
+        out,
+        in: this,
+        extent
+      })).catch(err => this.handlingError(err));
+      cache.set(key, features);
+    }
+    return features;
+  }
+
+  /**
+   * Called when layer added.
+   *
+   * @param {object} options
+   */
+  onLayerAdded(options) {
+    // Added new cache by crs
+    if (!this._featuresCaches[options.out.crs]) {
+      // Cache feature only if it's vector data, the feature are cached in source.
+      // It's not necessary to cache raster in Source,
+      // because it's already cached on layer.
+      this._featuresCaches[options.out.crs] = this.isVectorSource ? new LRUCache({
+        max: 500
+      }) : noCache;
+    }
+  }
+
+  /**
+   * Called when layer removed.
+   *
+   * @param {options}  [options={}] options
+   */
+  onLayerRemoved() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // delete unused cache
+    const unusedCache = this._featuresCaches[options.unusedCrs];
+    if (unusedCache) {
+      unusedCache.clear();
+      delete this._featuresCaches[options.unusedCrs];
+    }
+  }
+
+  /**
+   * Tests if an extent is inside the source limits.
+   *
+   * @param {Extent} extent - Extent to test.
+    * @return {boolean} True if the extent is inside the limit, false otherwise.
+   */
+  // eslint-disable-next-line
+  extentInsideLimit() {
+    throw new Error('In extented Source, you have to implement the method extentInsideLimit!');
+  }
+}
+export default Source;

package/lib/Source/TMSSource.js

@@ -0,0 +1,144 @@
+import Source from "./Source.js";
+import URLBuilder from "../Provider/URLBuilder.js";
+import { Extent } from '@itowns/geographic';
+import { globalExtentTMS } from "../Core/Tile/TileGrid.js";
+import Tile from "../Core/Tile/Tile.js";
+const _tile = new Tile('EPSG:4326', 0, 0, 0);
+
+/**
+ * An object defining the source of resources to get from a
+ * [TMS](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification) server.
+ * It inherits from {@link Source}.
+ *
+ * @extends Source
+ *
+ * @property {boolean} isTMSSource - Used to checkout whether this source is a
+ * TMSSource. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ * @property {boolean} isInverted - The isInverted property is to be set to the
+ * correct value, true or false (default being false) if the computation of the
+ * coordinates needs to be inverted to match the same scheme as OSM, Google Maps
+ * or other system. See [this link](
+ * https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/)
+ * for more information.
+ * @property {Object} tileMatrixSetLimits - it describes the available tile for this layer
+ * @property {Object} extentSetlimits - these are the extents of the set of identical zoom tiles.
+ * @property {Object} zoom - Object containing the minimum and maximum values of
+ * the level, to zoom in the source.
+ * @property {number} zoom.min - The minimum level of the source. Default value
+ * is 0.
+ * @property {number} zoom.max - The maximum level of the source. Default value
+ * is 20.
+ * @property {function} tileMatrixCallback - a method that create a TileMatrix
+ * identifier from the zoom level. For example, if set to `(zoomLevel) => 'EPSG:4326:' + zoomLevel`,
+ * the TileMatrix that will be fetched at zoom level 5 will be the one with identifier `EPSG:4326:5`.
+ * By default, the method returns the input zoom level.
+ *
+ * @example <caption><b>Source from OpenStreetMap server :</b></caption>
+ * // Create the source
+ * const tmsSource = new itowns.TMSSource({
+ *     format: 'image/png',
+ *     url: 'http://osm.io/styles/${z}/${x}/${y}.png',
+ *     attribution: {
+ *         name: 'OpenStreetMap',
+ *         url: 'http://www.openstreetmap.org/',
+ *     },
+ *     crs: 'EPSG:3857',
+ * });
+ *
+ * // Create the layer
+ * const colorLayer = new itowns.ColorLayer('OPENSM', {
+ *     source: tmsSource,
+ * });
+ *
+ * // Add the layer
+ * view.addLayer(colorLayer);
+ *
+ * @example <caption><b>Source from Mapbox server :</b></caption>
+ * // Create the source
+ * const orthoSource = new itowns.TMSSource({
+ *     url: 'https://api.mapbox.com/v4/mapbox.satellite/${z}/${x}/${y}.jpg?access_token=' + accessToken,
+ *     crs: 'EPSG:3857',
+ * };
+ *
+ * // Create the layer
+ * const imageryLayer = new itowns.ColorLayer("Ortho", {
+ *     source: orthoSource,
+ * };
+ *
+ * // Add the layer to the view
+ * view.addLayer(imageryLayer);
+ */
+class TMSSource extends Source {
+  /**
+   * @param {Object} source - An object that can contain all properties of a
+   * TMSSource and {@link Source}. Only `url` is mandatory.
+   */
+  constructor(source) {
+    source.format = source.format || 'image/png';
+    super(source);
+    if (!source.crs) {
+      throw new Error('New TMSSource/WMTSSource: crs is required');
+    }
+    this.isTMSSource = true;
+    if (!source.extent) {
+      // default to the global extent
+      this.extent = globalExtentTMS.get(source.crs);
+    }
+    this.zoom = source.zoom;
+    this.isInverted = source.isInverted || false;
+    this.crs = source.crs;
+    this.tileMatrixSetLimits = source.tileMatrixSetLimits;
+    this.extentSetlimits = {};
+    this.tileMatrixCallback = source.tileMatrixCallback || (zoomLevel => zoomLevel);
+    if (!this.zoom) {
+      if (this.tileMatrixSetLimits) {
+        const arrayLimits = Object.keys(this.tileMatrixSetLimits);
+        const size = arrayLimits.length;
+        const maxZoom = Number(arrayLimits[size - 1]);
+        this.zoom = {
+          min: maxZoom - size + 1,
+          max: maxZoom
+        };
+      } else {
+        this.zoom = {
+          min: 0,
+          max: Infinity
+        };
+      }
+    }
+  }
+  urlFromExtent(tile) {
+    return URLBuilder.xyz(tile, this);
+  }
+  onLayerAdded(options) {
+    super.onLayerAdded(options);
+    // Build extents of the set of identical zoom tiles.
+    const parent = options.out.parent;
+    // The extents crs is chosen to facilitate in raster tile process.
+    const crs = parent ? parent.extent.crs : options.out.crs;
+    if (this.tileMatrixSetLimits && !this.extentSetlimits[crs]) {
+      this.extentSetlimits[crs] = {};
+      _tile.crs = this.crs;
+      for (let i = this.zoom.max; i >= this.zoom.min; i--) {
+        const tmsl = this.tileMatrixSetLimits[i];
+        const {
+          west,
+          north
+        } = _tile.set(i, tmsl.minTileRow, tmsl.minTileCol).toExtent(crs);
+        const {
+          east,
+          south
+        } = _tile.set(i, tmsl.maxTileRow, tmsl.maxTileCol).toExtent(crs);
+        this.extentSetlimits[crs][i] = new Extent(crs, west, east, south, north);
+      }
+    }
+  }
+  extentInsideLimit(extent, zoom) {
+    // This layer provides data starting at level = layer.source.zoom.min
+    // (the zoom.max property is used when building the url to make
+    //  sure we don't use invalid levels)
+    return zoom >= this.zoom.min && zoom <= this.zoom.max && (this.extentSetlimits[extent.crs] == undefined || this.extentSetlimits[extent.crs][zoom].intersectsExtent(extent));
+  }
+}
+export default TMSSource;

package/lib/Source/VectorTilesSource.js

@@ -0,0 +1,182 @@
+import { featureFilter } from '@maplibre/maplibre-gl-style-spec';
+import StyleOptions from "../Core/StyleOptions.js";
+import TMSSource from "./TMSSource.js";
+import URLBuilder from "../Provider/URLBuilder.js";
+import Fetcher from "../Provider/Fetcher.js";
+import urlParser from "../Parser/MapBoxUrlParser.js";
+function toTMSUrl(url) {
+  return url.replace(/\{/g, '${');
+}
+function mergeCollections(collections) {
+  const collection = collections[0];
+  collections.forEach((col, index) => {
+    if (index === 0) {
+      return;
+    }
+    col.features.forEach(feature => {
+      collection.features.push(feature);
+    });
+  });
+  return collection;
+}
+
+// A deprecated (but still in use) Mapbox spec allows using 'ref' as a propertie to reference an other layer
+// instead of duplicating the following properties: 'type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'
+function getPropertiesFromRefLayer(layers, layer) {
+  const refLayer = layers.filter(l => l.id === layer.ref)[0];
+  ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'].forEach(prop => {
+    layer[prop] = refLayer[prop];
+  });
+}
+
+/**
+ * VectorTilesSource are object containing informations on how to fetch vector
+ * tiles resources.
+ *
+ * @property {function} filter - function to filter vector tiles layers, the
+ * parameter function is a layer.
+ * @property {boolean} [symbolToCircle=false] - If true, all symbols from a tile
+ * will be considered as circle, and render as circles.
+ */
+class VectorTilesSource extends TMSSource {
+  /**
+   * @param {Object} source - An object that can contain all properties of a
+   * VectorTilesSource and {@link Source}.
+   * @param {string|Object} source.style - The URL of the JSON style, of the
+   * JSON style directly.
+   * @param {string} [source.sprite] - The base URL to load informations about
+   * the sprite of the style. If this is set, it overrides the `sprite` value
+   * of the `source.style`. A style's sprite property supplies a URL template
+   * for loading small images.
+   * ```js
+   * {
+   *      sprite: 'http//:xxxxx/maps/sprites/'
+   * }
+   * ```
+   * A valid sprite source must supply two types of files:
+   * * An index file, which is a JSON document containing a description of each image contained in the sprite.
+   * * Image files, which are PNG images containing the sprite data.
+   *
+   * For more specification : [the Mapbox sprite Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/)
+   *
+   * @param {string} [source.url] - The base URL to load the tiles. If no url
+   * is specified, it reads it from the loaded style. Read [the Mapbox Style
+   * Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/)
+   * for more informations.
+   * @param {string} [source.accessToken] - Mapbox access token
+   */
+  constructor(source) {
+    source.format = 'application/x-protobuf;type=mapbox-vector';
+    source.crs = 'EPSG:3857';
+    source.isInverted = true;
+    source.url = source.url || '.';
+    super(source);
+    const ffilter = source.filter || (() => true);
+    this.urls = [];
+    this.layers = {};
+    this.styles = {};
+    let promise;
+    this.isVectorTileSource = true;
+    this.accessToken = source.accessToken;
+    let mvtStyleUrl;
+    if (source.style) {
+      if (typeof source.style == 'string') {
+        mvtStyleUrl = urlParser.normalizeStyleURL(source.style, this.accessToken);
+        promise = Fetcher.json(mvtStyleUrl, this.networkOptions);
+      } else {
+        promise = Promise.resolve(source.style);
+      }
+    } else {
+      throw new Error('New VectorTilesSource: style is required');
+    }
+    this.whenReady = promise.then(mvtStyle => {
+      this.jsonStyle = mvtStyle;
+      let baseurl = source.sprite || mvtStyle.sprite;
+      if (baseurl) {
+        baseurl = new URL(baseurl, mvtStyleUrl).toString();
+        const spriteUrl = urlParser.normalizeSpriteURL(baseurl, '', '.json', this.accessToken);
+        return Fetcher.json(spriteUrl, this.networkOptions).then(sprites => {
+          this.sprites = sprites;
+          const imgUrl = urlParser.normalizeSpriteURL(baseurl, '', '.png', this.accessToken);
+          this.sprites.source = imgUrl;
+          return mvtStyle;
+        });
+      }
+      return mvtStyle;
+    }).then(mvtStyle => {
+      mvtStyle.layers.forEach((layer, order) => {
+        layer.sourceUid = this.uid;
+        if (layer.type === 'background') {
+          this.backgroundLayer = layer;
+        } else if (ffilter(layer)) {
+          if (layer['source-layer'] === undefined) {
+            getPropertiesFromRefLayer(mvtStyle.layers, layer);
+          }
+          const style = StyleOptions.setFromVectorTileLayer(layer, this.sprites, this.symbolToCircle);
+          this.styles[layer.id] = style;
+          if (!this.layers[layer['source-layer']]) {
+            this.layers[layer['source-layer']] = [];
+          }
+          this.layers[layer['source-layer']].push({
+            id: layer.id,
+            order,
+            filterExpression: featureFilter(layer.filter)
+          });
+        }
+      });
+      if (this.url == '.') {
+        const TMSUrlList = Object.values(mvtStyle.sources).map(sourceVT => {
+          if (sourceVT.url) {
+            sourceVT.url = new URL(sourceVT.url, mvtStyleUrl).toString();
+            const urlSource = urlParser.normalizeSourceURL(sourceVT.url, this.accessToken);
+            return Fetcher.json(urlSource, this.networkOptions).then(tileJSON => {
+              if (tileJSON.tiles[0]) {
+                tileJSON.tiles[0] = decodeURIComponent(new URL(tileJSON.tiles[0], urlSource).toString());
+                return toTMSUrl(tileJSON.tiles[0]);
+              }
+            });
+          } else if (sourceVT.tiles) {
+            return Promise.resolve(toTMSUrl(sourceVT.tiles[0]));
+          }
+          return Promise.reject();
+        });
+        return Promise.all(TMSUrlList);
+      }
+      return Promise.resolve([toTMSUrl(this.url)]);
+    }).then(TMSUrlList => {
+      this.urls = Array.from(new Set(TMSUrlList));
+    });
+  }
+  urlFromExtent(tile, url) {
+    return URLBuilder.xyz(tile, {
+      tileMatrixCallback: this.tileMatrixCallback,
+      url
+    });
+  }
+  onLayerAdded(options) {
+    super.onLayerAdded(options);
+    if (options.out.style) {
+      if (options.out.isFeatureGeometryLayer && options.out.accurate) {
+        console.warn('With VectorTilesSource and FeatureGeometryLayer, the accurate option is always false');
+        options.out.accurate = false;
+      }
+    }
+  }
+  loadData(extent, out) {
+    const cache = this._featuresCaches[out.crs];
+    const key = this.getDataKey(extent);
+    // try to get parsed data from cache
+    let features = cache.get(key);
+    if (!features) {
+      // otherwise fetch/parse the data
+      features = Promise.all(this.urls.map(url => this.fetcher(this.urlFromExtent(extent, url), this.networkOptions).then(file => this.parser(file, {
+        out,
+        in: this,
+        extent
+      })))).then(collections => mergeCollections(collections)).catch(err => this.handlingError(err));
+      cache.set(key, features);
+    }
+    return features;
+  }
+}
+export default VectorTilesSource;

package/lib/Source/WFSSource.js

@@ -0,0 +1,170 @@
+import Source from "./Source.js";
+import URLBuilder from "../Provider/URLBuilder.js";
+import { Extent } from '@itowns/geographic';
+const _extent = new Extent('EPSG:4326');
+
+/**
+ * An object defining the source of resources to get from a
+ * [WFS](http://www.opengeospatial.org/standards/wfs) server. It inherits
+ * from {@link Source}.
+ *
+ * @extends Source
+ *
+ * @property {boolean} isWFSSource - Used to checkout whether this source is a
+ * WFSSource. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ * @property {string} typeName - The name of the feature to get, used in the
+ * generation of the url.
+ * @property {string} version - The version of the WFS server to request on.
+ * Default value is '2.0.2'.
+ * @property {Object} zoom - Object containing the minimum and maximum values of
+ * the level, to zoom in the source.
+ * @property {number} zoom.min - The minimum level of the source. Default value
+ * is 0.
+ * @property {number} zoom.max - The maximum level of the source. Default value
+ * is 21.
+ * @property {string} bboxDigits - The bbox digits precision used in URL
+ * @property {Object} vendorSpecific - An object containing vendor specific
+ * parameters. See for example a [list of these parameters for GeoServer]{@link
+ * https://docs.geoserver.org/latest/en/user/services/wfs/vendor.html}. This
+ * object is read simply with the `key` being the name of the parameter and
+ * `value` being the value of the parameter. If used, this property should be
+ * set in the constructor parameters.
+ *
+ * @example
+ * // Add color layer with WFS source
+ * // Create the source
+ * const wfsSource = new itowns.WFSSource({
+ *     url: 'https://data.geopf.fr/wfs/ows?',
+ *     version: '2.0.0',
+ *     typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable',
+ *     crs: 'EPSG:4326',
+ *     extent: {
+ *         west: 4.568,
+ *         east: 5.18,
+ *         south: 45.437,
+ *         north: 46.03,
+ *     },
+ *     zoom: { min: 14, max: 14 },
+ *     format: 'application/json',
+ * });
+ *
+ * // Create the layer
+ * const colorlayer = new itowns.ColorLayer('color_build', {
+ *     style: {
+ *         fill: 'red',
+ *         fillOpacity: 0.5,
+ *         stroke: 'white',
+ *     },
+ *     source: wfsSource,
+ * });
+ *
+ * // Add the layer
+ * view.addLayer(colorlayer);
+ *
+ * @example
+ * // Add geometry layer with WFS source
+ * // Create the source
+ * const wfsSource = new itowns.WFSSource({
+ *     url: 'https://data.geopf.fr/wfs/ows?',
+ *     version: '2.0.0',
+ *     typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable',
+ *     crs: 'EPSG:4326',
+ *     extent: {
+ *         west: 4.568,
+ *         east: 5.18,
+ *         south: 45.437,
+ *         north: 46.03,
+ *     },
+ *     zoom: { min: 14, max: 14 },
+ *     format: 'application/json',
+ * });
+ *
+ * // Create the layer
+ * const geometryLayer = new itowns.FeatureGeometryLayer('mesh_build', {
+ *     style: {
+ *         fill: {
+ *             color: new itowns.THREE.Color(0xffcc00),
+ *             base_altitude: (p) => p.altitude,
+ *             extrusion_height: (p) => p.height,
+ *         }
+ *     },
+ *     source: wfsSource,
+ *     zoom: { min: 14 },
+ * };
+ *
+ * // Add the layer
+ * view.addLayer(geometryLayer);
+ */
+class WFSSource extends Source {
+  /**
+   * @param {Object} source - An object that can contain all properties of a
+   * WFSSource and {@link Source}. `url`, `typeName` and `crs` are
+   * mandatory.
+   */
+  constructor(source) {
+    if (source.projection) {
+      console.warn('WFSSource projection parameter is deprecated, use crs instead.');
+      source.crs = source.crs || source.projection;
+    }
+    if (!source.typeName) {
+      throw new Error('source.typeName is required in wfs source.');
+    }
+    if (!source.crs) {
+      throw new Error('source.crs is required in wfs source');
+    }
+    source.format = source.format || 'application/json';
+    super(source);
+    this.isWFSSource = true;
+    this.typeName = source.typeName;
+    this.version = source.version || '2.0.2';
+    this.bboxDigits = source.bboxDigits;
+    this.zoom = {
+      min: 0,
+      max: Infinity
+    };
+    const urlObj = new URL(source.url);
+    urlObj.searchParams.set('SERVICE', 'WFS');
+    urlObj.searchParams.set('REQUEST', 'GetFeature');
+    urlObj.searchParams.set('typeName', this.typeName);
+    urlObj.searchParams.set('VERSION', this.version);
+    urlObj.searchParams.set('SRSNAME', this.crs);
+    urlObj.searchParams.set('outputFormat', this.format);
+    urlObj.searchParams.set('BBOX', `%bbox,${this.crs}`);
+    this.vendorSpecific = source.vendorSpecific;
+    for (const name in this.vendorSpecific) {
+      if (Object.prototype.hasOwnProperty.call(this.vendorSpecific, name)) {
+        urlObj.searchParams.set(name, this.vendorSpecific[name]);
+      }
+    }
+    this.url = decodeURIComponent(urlObj.toString());
+  }
+  handlingError(err) {
+    if (err.response && err.response.status == 400) {
+      return err.response.text().then(text => {
+        const getCapUrl = `${this.url}SERVICE=WFS&REQUEST=GetCapabilities&VERSION=${this.version}`;
+        const xml = new DOMParser().parseFromString(text, 'application/xml');
+        const errorElem = xml.querySelector('Exception');
+        const errorCode = errorElem.getAttribute('exceptionCode');
+        const errorMessage = errorElem.querySelector('ExceptionText').textContent;
+        console.error(`Source ${this.typeName}: bad request when fetching data. Server says: "${errorCode}: ${errorMessage}". \nReviewing ${getCapUrl} may help.`, err);
+      });
+    }
+    return super.handlingError(err);
+  }
+  getDataKey(extent) {
+    if (extent.isTile) {
+      return super.getDataKey(extent);
+    } else {
+      return `z${extent.zoom}s${extent.south}w${extent.west}`;
+    }
+  }
+  urlFromExtent(extentOrTile) {
+    const extent = extentOrTile.isExtent ? extentOrTile.as(this.crs, _extent) : extentOrTile.toExtent(this.crs, _extent);
+    return URLBuilder.bbox(extent, this);
+  }
+  extentInsideLimit(extent) {
+    return this.extent.intersectsExtent(extent);
+  }
+}
+export default WFSSource;