itowns 2.44.3-next.3 → 2.44.3-next.31

package/lib/Parser/VectorTileParser.js

@@ -1,7 +1,7 @@
 import { Vector2, Vector3 } from 'three';
 import Protobuf from 'pbf';
 import { VectorTile } from '@mapbox/vector-tile';
-import { globalExtentTMS } from "../Core/Geographic/Extent.js";
+import { globalExtentTMS } from "../Core/Tile/TileGrid.js";
 import { FeatureCollection, FEATURE_TYPES } from "../Core/Feature.js";
 import { deprecatedParsingOptionsToNewOne } from "../Core/Deprecated/Undeprecator.js";
 import Coordinates from "../Core/Geographic/Coordinates.js";
@@ -105,9 +105,10 @@ function vtFeatureToFeatureGeometry(vtFeature, feature) {
 function readPBF(file, options) {
   options.out = options.out || {};
   const vectorTile = new VectorTile(new Protobuf(file));
-  const sourceLayers = Object.keys(vectorTile.layers);
-  if (sourceLayers.length < 1) {
-    return;
+  const vtLayerNames = Object.keys(vectorTile.layers);
+  const collection = new FeatureCollection(options.out);
+  if (vtLayerNames.length < 1) {
+    return Promise.resolve(collection);
   }
 
   // x,y,z tile coordinates
@@ -117,44 +118,56 @@ function readPBF(file, options) {
   // https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/
   // Only if the layer.origin is top
   const y = options.in.isInverted ? options.extent.row : (1 << z) - options.extent.row - 1;
-  const collection = new FeatureCollection(options.out);
-  const vFeature = vectorTile.layers[sourceLayers[0]];
-  // TODO: verify if size is correct because is computed with only one feature (vFeature).
-  const size = vFeature.extent * 2 ** z;
+  const vFeature0 = vectorTile.layers[vtLayerNames[0]];
+  // TODO: verify if size is correct because is computed with only one feature (vFeature0).
+  const size = vFeature0.extent * 2 ** z;
   const center = -0.5 * size;
   collection.scale.set(globalExtent.x / size, -globalExtent.y / size, 1);
-  collection.position.set(vFeature.extent * x + center, vFeature.extent * y + center, 0).multiply(collection.scale);
+  collection.position.set(vFeature0.extent * x + center, vFeature0.extent * y + center, 0).multiply(collection.scale);
   collection.updateMatrixWorld();
-  sourceLayers.forEach(layer_id => {
-    if (!options.in.layers[layer_id]) {
-      return;
+  vtLayerNames.forEach(vtLayerName => {
+    if (!options.in.layers[vtLayerName]) {
+      return Promise.resolve(collection);
     }
-    const sourceLayer = vectorTile.layers[layer_id];
-    for (let i = sourceLayer.length - 1; i >= 0; i--) {
-      const vtFeature = sourceLayer.feature(i);
+    const vectorTileLayer = vectorTile.layers[vtLayerName];
+    for (let i = vectorTileLayer.length - 1; i >= 0; i--) {
+      const vtFeature = vectorTileLayer.feature(i);
       vtFeature.tileNumbers = {
         x,
         y: options.extent.row,
         z
       };
-      const layers = options.in.layers[layer_id].filter(l => l.filterExpression.filter({
+      // Find layers where this vtFeature is used
+      const layers = options.in.layers[vtLayerName].filter(l => l.filterExpression.filter({
         zoom: z
-      }, vtFeature) && z >= l.zoom.min && z < l.zoom.max);
+      }, vtFeature));
+      for (const layer of layers) {
+        const feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
+        feature.id = layer.id;
+        feature.order = layer.order;
+        feature.style = options.in.styles[feature.id];
+        vtFeatureToFeatureGeometry(vtFeature, feature);
+      }
+
+      /*
+      // This optimization is not fully working and need to be reassessed
+      // (see https://github.com/iTowns/itowns/pull/2469/files#r1861802136)
       let feature;
       for (const layer of layers) {
-        if (!feature) {
-          feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
-          feature.id = layer.id;
-          feature.order = layer.order;
-          feature.style = options.in.styles[feature.id];
-          vtFeatureToFeatureGeometry(vtFeature, feature);
-        } else if (!collection.features.find(f => f.id === layer.id)) {
-          feature = collection.newFeatureByReference(feature);
-          feature.id = layer.id;
-          feature.order = layer.order;
-          feature.style = options.in.styles[feature.id];
-        }
+          if (!feature) {
+              feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
+              feature.id = layer.id;
+              feature.order = layer.order;
+              feature.style = options.in.styles[feature.id];
+              vtFeatureToFeatureGeometry(vtFeature, feature);
+          } else if (!collection.features.find(f => f.id === layer.id)) {
+              feature = collection.newFeatureByReference(feature);
+              feature.id = layer.id;
+              feature.order = layer.order;
+              feature.style = options.in.styles[feature.id];
+          }
       }
+      */
     }
   });
   collection.removeEmptyFeature();

package/lib/Parser/XbilParser.js

@@ -67,10 +67,22 @@ export function computeMinMaxElevation(texture, pitch, options) {
         }
       }
     }
-    if (options.zmin > min) {
+  }
+
+  // Clamp values to zmin and zmax values configured in ElevationLayer
+  if (options.zmin != null) {
+    if (min < options.zmin) {
       min = options.zmin;
     }
-    if (options.zmax < max) {
+    if (max < options.zmin) {
+      max = options.zmin;
+    }
+  }
+  if (options.zmax != null) {
+    if (min > options.zmax) {
+      min = options.zmax;
+    }
+    if (max > options.zmax) {
       max = options.zmax;
     }
   }

package/lib/Provider/Fetcher.js

@@ -102,7 +102,11 @@ export default {
       res = resolve;
       rej = reject;
     });
-    textureLoader.load(url, res, () => {}, rej);
+    textureLoader.load(url, res, () => {}, event => {
+      const error = new Error(`Failed to load texture from URL: \`${url}\``);
+      error.originalEvent = event;
+      rej(error);
+    });
     return promise;
   },
   /**

package/lib/Provider/URLBuilder.js

@@ -1,6 +1,9 @@
-import Extent from "../Core/Geographic/Extent.js";
-const extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
 let subDomainsCount = 0;
+
+/**
+ * @param {string} url
+ * @returns {string}
+ */
 function subDomains(url) {
   const subDomainsPtrn = /\$\{u:([\w-_.|]+)\}/.exec(url);
   if (!subDomainsPtrn) {
@@ -51,8 +54,13 @@ export default {
    * // The resulting url is:
    * // http://server.geo/tms/15/2142/3412.jpg;
    *
-   * @param {Extent} coords - the coordinates
-   * @param {Source} source
+   * @param {Object} coords - tile coordinates
+   * @param {number} coords.row - tile row
+   * @param {number} coords.col - tile column
+   * @param {number} coords.zoom - tile zoom
+   * @param {Object} source
+   * @param {string} source.url
+   * @param {Function} source.tileMatrixCallback
    *
    * @return {string} the formed url
    */
@@ -79,8 +87,12 @@ export default {
    * // The resulting url is:
    * // http://server.geo/wms/BBOX=12,35,14,46&FORMAT=jpg&SERVICE=WMS
    *
-   * @param {Extent} bbox - the bounding box
-   * @param {Object} source
+   * @param {Object} bbox - the bounding box
+   * @param {number} bbox.west
+   * @param {number} bbox.south
+   * @param {number} bbox.east
+   * @param {number} bbox.north
+   * @param {Object} source - the source of data
    * @param {string} source.crs
    * @param {number} source.bboxDigits
    * @param {string} source.url
@@ -93,11 +105,10 @@ export default {
     if (source.bboxDigits !== undefined) {
       precision = source.bboxDigits;
     }
-    bbox.as(source.crs, extent);
-    const w = extent.west.toFixed(precision);
-    const s = extent.south.toFixed(precision);
-    const e = extent.east.toFixed(precision);
-    const n = extent.north.toFixed(precision);
+    const w = bbox.west.toFixed(precision);
+    const s = bbox.south.toFixed(precision);
+    const e = bbox.east.toFixed(precision);
+    const n = bbox.north.toFixed(precision);
     let bboxInUnit = source.axisOrder || 'wsen';
     bboxInUnit = bboxInUnit.replace('w', `${w},`).replace('s', `${s},`).replace('e', `${e},`).replace('n', `${n},`).slice(0, -1);
     return subDomains(source.url.replace('%bbox', bboxInUnit));

package/lib/Renderer/Camera.js

@@ -173,7 +173,7 @@ class Camera {
    * @return  {Coordinates}   Coordinates object holding camera's position.
    */
   position(crs) {
-    return new Coordinates(this.crs, this.camera3D.position).as(crs || this.crs);
+    return new Coordinates(this.crs).setFromVector3(this.camera3D.position).as(crs || this.crs);
   }
 
   /**

package/lib/Renderer/Label2DRenderer.js

@@ -167,13 +167,15 @@ class Label2DRenderer {
     if (!frustum.containsPoint(worldPosition.applyMatrix4(camera.matrixWorldInverse)) ||
     // Check if globe horizon culls the label
     // Do some horizon culling (if possible) if the tiles level is small enough.
-    label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint) ||
-    // Check if content isn't present in visible labels
-    this.grid.visible.some(l => {
-      // TODO for icon without text filter by position
-      const textContent = label.content.textContent;
-      return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
-    })) {
+    label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint)
+    // Why do we might need this part ?
+    // || // Check if content isn't present in visible labels
+    // this.grid.visible.some((l) => {
+    //     // TODO for icon without text filter by position
+    //     const textContent = label.content.textContent;
+    //     return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
+    // })
+    ) {
       label.visible = false;
     } else {
       // projecting world position label

package/lib/Renderer/OBB.js

@@ -1,12 +1,11 @@
 import * as THREE from 'three';
-import TileGeometry from "../Core/TileGeometry.js";
-import BuilderEllipsoidTile from "../Core/Prefab/Globe/BuilderEllipsoidTile.js";
+import * as CRS from "../Core/Geographic/Crs.js";
+import { TileGeometry } from "../Core/TileGeometry.js";
+import { GlobeTileBuilder } from "../Core/Prefab/Globe/GlobeTileBuilder.js";
 import Coordinates from "../Core/Geographic/Coordinates.js";
-import CRS from "../Core/Geographic/Crs.js";
 
 // get oriented bounding box of tile
-const builder = new BuilderEllipsoidTile({
-  crs: 'EPSG:4978',
+const builder = new GlobeTileBuilder({
   uvCount: 1
 });
 const size = new THREE.Vector3();
@@ -114,18 +113,17 @@ class OBB extends THREE.Object3D {
     let maxHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extent.max || 0;
     if (extent.crs == 'EPSG:4326') {
       const {
-        sharableExtent,
+        shareableExtent,
         quaternion,
         position
-      } = builder.computeSharableExtent(extent);
+      } = builder.computeShareableExtent(extent);
       // Compute the minimum count of segment to build tile
-      const segments = Math.max(Math.floor(sharableExtent.planarDimensions(dimension).x / 90 + 1), 2);
-      const geometry = new TileGeometry({
-        extent: sharableExtent,
+      const segments = Math.max(Math.floor(shareableExtent.planarDimensions(dimension).x / 90 + 1), 2);
+      const geometry = new TileGeometry(builder, {
+        extent: shareableExtent,
         level: 0,
         segments,
-        disableSkirt: true,
-        builder
+        disableSkirt: true
       });
       obb.box3D.copy(geometry.boundingBox);
       obb.natBox.copy(geometry.boundingBox);
@@ -137,7 +135,7 @@ class OBB extends THREE.Object3D {
       this.position.copy(position);
       this.quaternion.copy(quaternion);
       this.updateMatrixWorld(true);
-    } else if (!CRS.isTms(extent.crs) && CRS.isMetricUnit(extent.crs)) {
+    } else if (CRS.isMetricUnit(extent.crs)) {
       extent.center(coord).toVector3(this.position);
       extent.planarDimensions(dimension);
       size.set(dimension.x, dimension.y, Math.abs(maxHeight - minHeight));

package/lib/Renderer/PointsMaterial.js

@@ -258,7 +258,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
   /**
    * @class      PointsMaterial
    * @param      {object}  [options={}]  The options
-   * @param      {number}  [options.size=0]  size point
+   * @param      {number}  [options.size=1] point size
    * @param      {number}  [options.mode=PNTS_MODE.COLOR]  display mode.
    * @param      {number}  [options.shape=PNTS_SHAPE.CIRCLE]  rendered points shape.
    * @param      {THREE.Vector4}  [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)]  overlay color.

package/lib/Renderer/RasterTile.js

@@ -1,7 +1,6 @@
 import * as THREE from 'three';
 import { ELEVATION_MODES } from "./LayeredMaterial.js";
 import { checkNodeElevationTextureValidity, insertSignificantValuesFromParent, computeMinMaxElevation } from "../Parser/XbilParser.js";
-import CRS from "../Core/Geographic/Crs.js";
 export const EMPTY_TEXTURE_ZOOM = -1;
 const pitch = new THREE.Vector4();
 function getIndiceWithPitch(i, pitch, w) {
@@ -29,7 +28,7 @@ class RasterTile extends THREE.EventDispatcher {
   constructor(material, layer) {
     super();
     this.layer = layer;
-    this.crs = layer.parent.tileMatrixSets.indexOf(CRS.formatToTms(layer.crs));
+    this.crs = layer.parent.tileMatrixSets.indexOf(layer.crs);
     if (this.crs == -1) {
       console.error('Unknown crs:', layer.crs);
     }

package/lib/Renderer/SphereHelper.js

@@ -1,9 +1,3 @@
-/*
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
- */
-
 import * as THREE from 'three';
 function SphereHelper(radius) {
   THREE.Mesh.call(this);

package/lib/Source/CopcSource.js

@@ -1,3 +1,4 @@
+import proj4 from 'proj4';
 import { Binary, Info, Las } from 'copc';
 import Extent from "../Core/Geographic/Extent.js";
 import Fetcher from "../Provider/Fetcher.js";
@@ -102,8 +103,18 @@ class CopcSource extends Source {
       this.header = metadata.header;
       this.info = metadata.info;
       this.eb = metadata.eb;
-      // TODO: use wkt definition in `metadata.wkt` to infer/define crs
-      this.crs = config.crs || 'EPSG:4326';
+      proj4.defs('unknown', metadata.wkt);
+      let projCS;
+      if (proj4.defs('unknown').type === 'COMPD_CS') {
+        console.warn('CopcSource: compound coordinate system is not yet supported.');
+        projCS = proj4.defs('unknown').PROJCS;
+      } else {
+        projCS = proj4.defs('unknown');
+      }
+      this.crs = projCS.title || projCS.name || 'EPSG:4326';
+      if (!(this.crs in proj4.defs)) {
+        proj4.defs(this.crs, projCS);
+      }
       const bbox = new THREE.Box3();
       bbox.min.fromArray(this.info.cube, 0);
       bbox.max.fromArray(this.info.cube, 3);

package/lib/Source/EntwinePointTileSource.js

@@ -38,10 +38,19 @@ class EntwinePointTileSource extends Source {
       // Set parser and its configuration from schema
       this.parse = metadata.dataType === 'laszip' ? LASParser.parse : PotreeBinParser.parse;
       this.extension = metadata.dataType === 'laszip' ? 'laz' : 'bin';
-      if (metadata.srs && metadata.srs.authority && metadata.srs.horizontal) {
-        this.crs = `${metadata.srs.authority}:${metadata.srs.horizontal}`;
-        if (!proj4.defs(this.crs)) {
-          proj4.defs(this.crs, metadata.srs.wkt);
+      if (metadata.srs) {
+        if (metadata.srs.authority && metadata.srs.horizontal) {
+          this.crs = `${metadata.srs.authority}:${metadata.srs.horizontal}`;
+          if (!proj4.defs(this.crs)) {
+            proj4.defs(this.crs, metadata.srs.wkt);
+          }
+        } else if (metadata.srs.wkt) {
+          proj4.defs('unknown', metadata.srs.wkt);
+          const projCS = proj4.defs('unknown');
+          this.crs = projCS.title || projCS.name;
+          if (!(this.crs in proj4.defs)) {
+            proj4.defs(this.crs, projCS);
+          }
         }
         if (metadata.srs.vertical && metadata.srs.vertical !== metadata.srs.horizontal) {
           console.warn('EntwinePointTileSource: Vertical coordinates system code is not yet supported.');
@@ -53,6 +62,7 @@ class EntwinePointTileSource extends Source {
       // span in ept.json. This needs improvements.
       this.spacing = (Math.abs(metadata.boundsConforming[3] - metadata.boundsConforming[0]) + Math.abs(metadata.boundsConforming[4] - metadata.boundsConforming[1])) / (2 * metadata.span);
       this.boundsConforming = metadata.boundsConforming;
+      this.bounds = metadata.bounds;
       this.span = metadata.span;
       return this;
     });

package/lib/Source/FileSource.js

@@ -1,6 +1,5 @@
 import Source from "./Source.js";
 import Cache from "../Core/Scheduler/Cache.js";
-import CRS from "../Core/Geographic/Crs.js";
 
 /**
  * An object defining the source of a single resource to get from a direct
@@ -104,12 +103,10 @@ class FileSource extends Source {
    * presents in `features` under the property `crs`, it is fine.
    */
   constructor(source) {
-    /* istanbul ignore next */
     if (source.parsedData) {
       console.warn('FileSource parsedData parameter is deprecated, use features instead of.');
       source.features = source.features || source.parsedData;
     }
-    /* istanbul ignore next */
     if (source.projection) {
       console.warn('FileSource projection parameter is deprecated, use crs instead.');
       source.crs = source.crs || source.projection;
@@ -155,7 +152,7 @@ class FileSource extends Source {
     if (!features) {
       options.out.buildExtent = this.crs != 'EPSG:4978';
       if (options.out.buildExtent) {
-        options.out.forcedExtentCrs = options.out.crs != 'EPSG:4978' ? options.out.crs : CRS.formatToEPSG(this.crs);
+        options.out.forcedExtentCrs = options.out.crs != 'EPSG:4978' ? options.out.crs : this.crs;
       }
       features = this.parser(this.fetchedData, options);
       this._featuresCaches[options.out.crs].setByArray(features, [0]);

package/lib/Source/Source.js

@@ -1,3 +1,4 @@
+import * as CRS from "../Core/Geographic/Crs.js";
 import Extent from "../Core/Geographic/Extent.js";
 import GeoJsonParser from "../Parser/GeoJsonParser.js";
 import KMLParser from "../Parser/KMLParser.js";
@@ -8,7 +9,6 @@ import ISGParser from "../Parser/ISGParser.js";
 import VectorTileParser from "../Parser/VectorTileParser.js";
 import Fetcher from "../Provider/Fetcher.js";
 import Cache from "../Core/Scheduler/Cache.js";
-import CRS from "../Core/Geographic/Crs.js";
 
 /** @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]]);
@@ -30,7 +30,6 @@ const noCache = {
  */
 class InformationsData {
   constructor(options) {
-    /* istanbul ignore next */
     if (options.projection) {
       console.warn('Source projection parameter is deprecated, use crs instead.');
       options.crs = options.crs || options.projection;
@@ -166,8 +165,6 @@ class Source extends InformationsData {
         in: this,
         extent
       })).catch(err => this.handlingError(err)), key);
-
-      /* istanbul ignore next */
       if (this.onParsedFile) {
         features.then(feat => {
           this.onParsedFile(feat);

package/lib/Source/TMSSource.js

@@ -1,8 +1,9 @@
 import Source from "./Source.js";
 import URLBuilder from "../Provider/URLBuilder.js";
-import Extent, { globalExtentTMS } from "../Core/Geographic/Extent.js";
-import CRS from "../Core/Geographic/Crs.js";
-const extent = new Extent(CRS.tms_4326, 0, 0, 0);
+import Extent from "../Core/Geographic/Extent.js";
+import Tile from "../Core/Tile/Tile.js";
+import { globalExtentTMS } from "../Core/Tile/TileGrid.js";
+const _tile = new Tile('EPSG:4326', 0, 0, 0);
 
 /**
  * An object defining the source of resources to get from a
@@ -86,7 +87,7 @@ class TMSSource extends Source {
     }
     this.zoom = source.zoom;
     this.isInverted = source.isInverted || false;
-    this.crs = CRS.formatToTms(source.crs);
+    this.crs = source.crs;
     this.tileMatrixSetLimits = source.tileMatrixSetLimits;
     this.extentSetlimits = {};
     this.tileMatrixCallback = source.tileMatrixCallback || (zoomLevel => zoomLevel);
@@ -107,8 +108,8 @@ class TMSSource extends Source {
       }
     }
   }
-  urlFromExtent(extent) {
-    return URLBuilder.xyz(extent, this);
+  urlFromExtent(tile) {
+    return URLBuilder.xyz(tile, this);
   }
   onLayerAdded(options) {
     super.onLayerAdded(options);
@@ -118,17 +119,17 @@ class TMSSource extends Source {
     const crs = parent ? parent.extent.crs : options.out.crs;
     if (this.tileMatrixSetLimits && !this.extentSetlimits[crs]) {
       this.extentSetlimits[crs] = {};
-      extent.crs = this.crs;
+      _tile.crs = this.crs;
       for (let i = this.zoom.max; i >= this.zoom.min; i--) {
         const tmsl = this.tileMatrixSetLimits[i];
         const {
           west,
           north
-        } = extent.set(i, tmsl.minTileRow, tmsl.minTileCol).as(crs);
+        } = _tile.set(i, tmsl.minTileRow, tmsl.minTileCol).toExtent(crs);
         const {
           east,
           south
-        } = extent.set(i, tmsl.maxTileRow, tmsl.maxTileCol).as(crs);
+        } = _tile.set(i, tmsl.maxTileRow, tmsl.maxTileCol).toExtent(crs);
         this.extentSetlimits[crs][i] = new Extent(crs, west, east, south, north);
       }
     }

package/lib/Source/VectorTilesSource.js

@@ -1,4 +1,4 @@
-import { featureFilter } from '@mapbox/mapbox-gl-style-spec';
+import { featureFilter } from '@maplibre/maplibre-gl-style-spec';
 import Style from "../Core/Style.js";
 import TMSSource from "./TMSSource.js";
 import URLBuilder from "../Provider/URLBuilder.js";
@@ -20,6 +20,15 @@ function mergeCollections(collections) {
   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.
@@ -69,36 +78,41 @@ class VectorTilesSource extends TMSSource {
     let promise;
     this.isVectorTileSource = true;
     this.accessToken = source.accessToken;
+    let mvtStyleUrl;
     if (source.style) {
       if (typeof source.style == 'string') {
-        const styleUrl = urlParser.normalizeStyleURL(source.style, this.accessToken);
-        promise = Fetcher.json(styleUrl, this.networkOptions);
+        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(style => {
-      this.jsonStyle = style;
-      const baseurl = source.sprite || style.sprite;
+    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 style;
+          return mvtStyle;
         });
       }
-      return style;
-    }).then(style => {
-      style.layers.forEach((layer, order) => {
+      return mvtStyle;
+    }).then(mvtStyle => {
+      mvtStyle.layers.forEach((layer, order) => {
         layer.sourceUid = this.uid;
         if (layer.type === 'background') {
           this.backgroundLayer = layer;
         } else if (ffilter(layer)) {
-          const style = Style.setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle);
+          if (layer['source-layer'] === undefined) {
+            getPropertiesFromRefLayer(mvtStyle.layers, layer);
+          }
+          const style = Style.setFromVectorTileLayer(layer, this.sprites, this.symbolToCircle);
           this.styles[layer.id] = style;
           if (!this.layers[layer['source-layer']]) {
             this.layers[layer['source-layer']] = [];
@@ -106,20 +120,18 @@ class VectorTilesSource extends TMSSource {
           this.layers[layer['source-layer']].push({
             id: layer.id,
             order,
-            filterExpression: featureFilter(layer.filter),
-            zoom: {
-              min: layer.minzoom || 0,
-              max: layer.maxzoom || 24
-            }
+            filterExpression: featureFilter(layer.filter)
           });
         }
       });
       if (this.url == '.') {
-        const TMSUrlList = Object.values(style.sources).map(sourceVT => {
+        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]);
               }
             });
@@ -130,13 +142,13 @@ class VectorTilesSource extends TMSSource {
         });
         return Promise.all(TMSUrlList);
       }
-      return Promise.resolve([this.url]);
+      return Promise.resolve([toTMSUrl(this.url)]);
     }).then(TMSUrlList => {
       this.urls = Array.from(new Set(TMSUrlList));
     });
   }
-  urlFromExtent(extent, url) {
-    return URLBuilder.xyz(extent, {
+  urlFromExtent(tile, url) {
+    return URLBuilder.xyz(tile, {
       tileMatrixCallback: this.tileMatrixCallback,
       url
     });
@@ -162,8 +174,6 @@ class VectorTilesSource extends TMSSource {
         in: this,
         extent
       })))).then(collections => mergeCollections(collections)).catch(err => this.handlingError(err)), key);
-
-      /* istanbul ignore next */
       if (this.onParsedFile) {
         features.then(feat => {
           this.onParsedFile(feat);