feat(olHelpers.js): Added support for Mapbox Vector Tiles (#335)

tombatossals · Nov 22, 2016 · cd65359 · cd65359
1 parent 40e4972
commit cd65359
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/src/services/olHelpers.js b/src/services/olHelpers.js
@@ -154,6 +154,7 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $
                 case 'WKT':
                     return 'Vector';
                 case 'TileVector':
+                case 'MVT':
                     return 'TileVector';
                 default:
                     return 'Tile';
@@ -191,6 +192,7 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $
 
     var createSource = function(source, projection) {
         var oSource;
+        var pixelRatio;
         var url;
         var geojsonFormat = new ol.format.GeoJSON(); // used in various switch stmnts below
 
@@ -203,7 +205,7 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $
                 url = 'http://api.tiles.mapbox.com/v4/' + source.mapId + '/{z}/{x}/{y}.png?access_token=' +
                     source.accessToken;
 
-                var pixelRatio = window.devicePixelRatio;
+                pixelRatio = window.devicePixelRatio;
 
                 if (pixelRatio > 1) {
                     url = url.replace('.png', '@2x.png');
@@ -227,14 +229,34 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $
                     '/' + source.mapId + '/tiles/{z}/{x}/{y}?access_token=' +
                     source.accessToken;
 
+                pixelRatio = window.devicePixelRatio;
+
+                if (pixelRatio > 1) {
+                    url = url.replace('{y}?access_token', '{y}@2x?access_token');
+                }
+
                 oSource = new ol.source.XYZ({
                     url: url,
                     tileLoadFunction: source.tileLoadFunction,
                     attributions: createAttribution(source),
+                    tilePixelRatio: pixelRatio > 1 ? 2 : 1,
                     tileSize: source.tileSize || [512, 512],
                     wrapX: source.wrapX !== undefined ? source.wrapX : true
                 });
                 break;
+            case 'MVT':
+                if (!source.url) {
+                    $log.error('[AngularJS - Openlayers] - MVT layer requires the source url');
+                    return;
+                }
+                oSource = new ol.source.VectorTile({
+                    attributions: source.attributions || '',
+                    format: new ol.format.MVT(),
+                    tileGrid: ol.tilegrid.createXYZ({maxZoom: source.maxZoom || 22}),
+                    tilePixelRatio: source.tilePixelRatio || 16,
+                    url: source.url
+                });
+                break;
             case 'ImageWMS':
                 if (!source.url || !source.params) {
                     $log.error('[AngularJS - Openlayers] - ImageWMS Layer needs ' +
@@ -927,6 +949,9 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $
             if (isDefinedAndNotNull(layer.maxResolution)) {
                 layerConfig.maxResolution = layer.maxResolution;
             }
+            if (isDefinedAndNotNull(layer.style) && type === 'TileVector') {
+                layerConfig.style = layer.style;
+            }
 
             switch (type) {
                 case 'Image':