From 37b321aaed1986798a5fb9b6ce675941ff9dd94d Mon Sep 17 00:00:00 2001 From: Roman Sharnopolsky Date: Mon, 9 May 2016 13:45:46 +0300 Subject: [PATCH 1/3] feat: Enable providing custom source object to layer through source.type --- src/services/olHelpers.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/services/olHelpers.js b/src/services/olHelpers.js index 3b155bd2..797b389a 100644 --- a/src/services/olHelpers.js +++ b/src/services/olHelpers.js @@ -192,7 +192,10 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $ var url; var geojsonFormat = new ol.format.GeoJSON(); // used in various switch stmnts below - switch (source.type) { + // if source object is created externaly there is no need to create it here + + if (angular.isString(source.type)) + switch (source.type) { case 'MapBox': if (!source.mapId || !source.accessToken) { $log.error('[AngularJS - Openlayers] - MapBox layer requires the map id and the access token'); @@ -564,6 +567,8 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $ }); break; } + else + oSource = source.type; // log a warning when no source could be created for the given type if (!oSource) { From 402dbcf87f3779070f56ad9676306ea4e7ca112a Mon Sep 17 00:00:00 2001 From: Roman Sharnopolsky Date: Mon, 9 May 2016 15:22:00 +0300 Subject: [PATCH 2/3] feat: Enable providing custom source object to layer through source.type --- src/services/olHelpers.js | 667 +++++++++++++++++++------------------- 1 file changed, 335 insertions(+), 332 deletions(-) diff --git a/src/services/olHelpers.js b/src/services/olHelpers.js index 797b389a..88a3b17f 100644 --- a/src/services/olHelpers.js +++ b/src/services/olHelpers.js @@ -194,381 +194,384 @@ angular.module('openlayers-directive').factory('olHelpers', function($q, $log, $ // if source object is created externaly there is no need to create it here - if (angular.isString(source.type)) + if (angular.isString(source.type)) { switch (source.type) { - case 'MapBox': - if (!source.mapId || !source.accessToken) { - $log.error('[AngularJS - Openlayers] - MapBox layer requires the map id and the access token'); - return; - } - url = 'http://api.tiles.mapbox.com/v4/' + source.mapId + '/{z}/{x}/{y}.png?access_token=' + - source.accessToken; - - var pixelRatio = window.devicePixelRatio; - - if (pixelRatio > 1) { - url = url.replace('.png', '@2x.png'); - } - - oSource = new ol.source.XYZ({ - url: url, - attributions: createAttribution(source), - tilePixelRatio: pixelRatio > 1 ? 2 : 1 - }); - break; - case 'MapBoxStudio': - if (!source.mapId || !source.accessToken || !source.userId) { - $log.error('[AngularJS - Openlayers] - MapBox Studio layer requires the map id' + - ', user id and the access token'); - return; - } - url = 'https://api.mapbox.com/styles/v1/' + source.userId + - '/' + source.mapId + '/tiles/{z}/{x}/{y}?access_token=' + - source.accessToken; - - oSource = new ol.source.XYZ({ - url: url, - attributions: createAttribution(source), - tileSize: source.tileSize || [512, 512] - }); - break; - case 'ImageWMS': - if (!source.url || !source.params) { - $log.error('[AngularJS - Openlayers] - ImageWMS Layer needs ' + - 'valid server url and params properties'); - } - oSource = new ol.source.ImageWMS({ - url: source.url, - attributions: createAttribution(source), - crossOrigin: (typeof source.crossOrigin === 'undefined') ? 'anonymous' : source.crossOrigin, - params: source.params, - ratio: source.ratio - }); - break; + case 'MapBox': + if (!source.mapId || !source.accessToken) { + $log.error('[AngularJS - Openlayers] - MapBox layer requires the map id and the access token'); + return; + } + url = 'http://api.tiles.mapbox.com/v4/' + source.mapId + '/{z}/{x}/{y}.png?access_token=' + + source.accessToken; - case 'TileWMS': - if ((!source.url && !source.urls) || !source.params) { - $log.error('[AngularJS - Openlayers] - TileWMS Layer needs ' + - 'valid url (or urls) and params properties'); - } + var pixelRatio = window.devicePixelRatio; - var wmsConfiguration = { - crossOrigin: (typeof source.crossOrigin === 'undefined') ? 'anonymous' : source.crossOrigin, - params: source.params, - attributions: createAttribution(source) - }; + if (pixelRatio > 1) { + url = url.replace('.png', '@2x.png'); + } - if (source.serverType) { - wmsConfiguration.serverType = source.serverType; - } + oSource = new ol.source.XYZ({ + url: url, + attributions: createAttribution(source), + tilePixelRatio: pixelRatio > 1 ? 2 : 1 + }); + break; + case 'MapBoxStudio': + if (!source.mapId || !source.accessToken || !source.userId) { + $log.error('[AngularJS - Openlayers] - MapBox Studio layer requires the map id' + + ', user id and the access token'); + return; + } + url = 'https://api.mapbox.com/styles/v1/' + source.userId + + '/' + source.mapId + '/tiles/{z}/{x}/{y}?access_token=' + + source.accessToken; + + oSource = new ol.source.XYZ({ + url: url, + attributions: createAttribution(source), + tileSize: source.tileSize || [512, 512] + }); + break; + case 'ImageWMS': + if (!source.url || !source.params) { + $log.error('[AngularJS - Openlayers] - ImageWMS Layer needs ' + + 'valid server url and params properties'); + } + oSource = new ol.source.ImageWMS({ + url: source.url, + attributions: createAttribution(source), + crossOrigin: (typeof source.crossOrigin === 'undefined') ? 'anonymous' : source.crossOrigin, + params: source.params, + ratio: source.ratio + }); + break; - if (source.url) { - wmsConfiguration.url = source.url; - } + case 'TileWMS': + if ((!source.url && !source.urls) || !source.params) { + $log.error('[AngularJS - Openlayers] - TileWMS Layer needs ' + + 'valid url (or urls) and params properties'); + } - if (source.urls) { - wmsConfiguration.urls = source.urls; - } + var wmsConfiguration = { + crossOrigin: (typeof source.crossOrigin === 'undefined') ? 'anonymous' : source.crossOrigin, + params: source.params, + attributions: createAttribution(source) + }; - oSource = new ol.source.TileWMS(wmsConfiguration); - break; + if (source.serverType) { + wmsConfiguration.serverType = source.serverType; + } - case 'WMTS': - if ((!source.url && !source.urls) || !source.tileGrid) { - $log.error('[AngularJS - Openlayers] - WMTS Layer needs valid url ' + - '(or urls) and tileGrid properties'); - } + if (source.url) { + wmsConfiguration.url = source.url; + } - var wmtsConfiguration = { - projection: projection, - layer: source.layer, - attributions: createAttribution(source), - matrixSet: (source.matrixSet === 'undefined') ? projection : source.matrixSet, - format: (source.format === 'undefined') ? 'image/jpeg' : source.format, - requestEncoding: (source.requestEncoding === 'undefined') ? - 'KVP' : source.requestEncoding, - tileGrid: new ol.tilegrid.WMTS({ - origin: source.tileGrid.origin, - resolutions: source.tileGrid.resolutions, - matrixIds: source.tileGrid.matrixIds - }), - style: (source.style === 'undefined') ? 'normal' : source.style - }; - - if (isDefined(source.url)) { - wmtsConfiguration.url = source.url; - } + if (source.urls) { + wmsConfiguration.urls = source.urls; + } - if (isDefined(source.urls)) { - wmtsConfiguration.urls = source.urls; - } + oSource = new ol.source.TileWMS(wmsConfiguration); + break; - oSource = new ol.source.WMTS(wmtsConfiguration); - break; + case 'WMTS': + if ((!source.url && !source.urls) || !source.tileGrid) { + $log.error('[AngularJS - Openlayers] - WMTS Layer needs valid url ' + + '(or urls) and tileGrid properties'); + } - case 'OSM': - oSource = new ol.source.OSM({ - attributions: createAttribution(source) - }); + var wmtsConfiguration = { + projection: projection, + layer: source.layer, + attributions: createAttribution(source), + matrixSet: (source.matrixSet === 'undefined') ? projection : source.matrixSet, + format: (source.format === 'undefined') ? 'image/jpeg' : source.format, + requestEncoding: (source.requestEncoding === 'undefined') ? + 'KVP' : source.requestEncoding, + tileGrid: new ol.tilegrid.WMTS({ + origin: source.tileGrid.origin, + resolutions: source.tileGrid.resolutions, + matrixIds: source.tileGrid.matrixIds + }), + style: (source.style === 'undefined') ? 'normal' : source.style + }; + + if (isDefined(source.url)) { + wmtsConfiguration.url = source.url; + } - if (source.url) { - oSource.setUrl(source.url); - } + if (isDefined(source.urls)) { + wmtsConfiguration.urls = source.urls; + } - break; - case 'BingMaps': - if (!source.key) { - $log.error('[AngularJS - Openlayers] - You need an API key to show the Bing Maps.'); - return; - } + oSource = new ol.source.WMTS(wmtsConfiguration); + break; - var bingConfiguration = { - key: source.key, - attributions: createAttribution(source), - imagerySet: source.imagerySet ? source.imagerySet : bingImagerySets[0], - culture: source.culture - }; + case 'OSM': + oSource = new ol.source.OSM({ + attributions: createAttribution(source) + }); - if (source.maxZoom) { - bingConfiguration.maxZoom = source.maxZoom; - } + if (source.url) { + oSource.setUrl(source.url); + } - oSource = new ol.source.BingMaps(bingConfiguration); - break; + break; + case 'BingMaps': + if (!source.key) { + $log.error('[AngularJS - Openlayers] - You need an API key to show the Bing Maps.'); + return; + } - case 'MapQuest': - if (!source.layer || mapQuestLayers.indexOf(source.layer) === -1) { - $log.error('[AngularJS - Openlayers] - MapQuest layers needs a valid \'layer\' property.'); - return; - } + var bingConfiguration = { + key: source.key, + attributions: createAttribution(source), + imagerySet: source.imagerySet ? source.imagerySet : bingImagerySets[0], + culture: source.culture + }; - oSource = new ol.source.MapQuest({ - attributions: createAttribution(source), - layer: source.layer - }); + if (source.maxZoom) { + bingConfiguration.maxZoom = source.maxZoom; + } - break; + oSource = new ol.source.BingMaps(bingConfiguration); + break; - case 'EsriBaseMaps': - if (!source.layer || esriBaseLayers.indexOf(source.layer) === -1) { - $log.error('[AngularJS - Openlayers] - ESRI layers needs a valid \'layer\' property.'); - return; - } + case 'MapQuest': + if (!source.layer || mapQuestLayers.indexOf(source.layer) === -1) { + $log.error('[AngularJS - Openlayers] - MapQuest layers needs a valid \'layer\' property.'); + return; + } - var _urlBase = 'http://services.arcgisonline.com/ArcGIS/rest/services/'; - var _url = _urlBase + source.layer + '/MapServer/tile/{z}/{y}/{x}'; + oSource = new ol.source.MapQuest({ + attributions: createAttribution(source), + layer: source.layer + }); - oSource = new ol.source.XYZ({ - attributions: createAttribution(source), - url: _url - }); + break; - break; + case 'EsriBaseMaps': + if (!source.layer || esriBaseLayers.indexOf(source.layer) === -1) { + $log.error('[AngularJS - Openlayers] - ESRI layers needs a valid \'layer\' property.'); + return; + } - case 'GeoJSON': - if (!(source.geojson || source.url)) { - $log.error('[AngularJS - Openlayers] - You need a geojson ' + - 'property to add a GeoJSON layer.'); - return; - } + var _urlBase = 'http://services.arcgisonline.com/ArcGIS/rest/services/'; + var _url = _urlBase + source.layer + '/MapServer/tile/{z}/{y}/{x}'; - if (isDefined(source.url)) { - oSource = new ol.source.Vector({ - format: new ol.format.GeoJSON(), - url: source.url + oSource = new ol.source.XYZ({ + attributions: createAttribution(source), + url: _url }); - } else { - oSource = new ol.source.Vector(); - var projectionToUse = projection; - var dataProjection; // Projection of geojson data - if (isDefined(source.geojson.projection)) { - dataProjection = new ol.proj.get(source.geojson.projection); - } else { - dataProjection = projection; // If not defined, features will not be reprojected. + break; + + case 'GeoJSON': + if (!(source.geojson || source.url)) { + $log.error('[AngularJS - Openlayers] - You need a geojson ' + + 'property to add a GeoJSON layer.'); + return; } - var features = geojsonFormat.readFeatures( - source.geojson.object, { - featureProjection: projectionToUse, - dataProjection: dataProjection + if (isDefined(source.url)) { + oSource = new ol.source.Vector({ + format: new ol.format.GeoJSON(), + url: source.url }); + } else { + oSource = new ol.source.Vector(); + + var projectionToUse = projection; + var dataProjection; // Projection of geojson data + if (isDefined(source.geojson.projection)) { + dataProjection = new ol.proj.get(source.geojson.projection); + } else { + dataProjection = projection; // If not defined, features will not be reprojected. + } - oSource.addFeatures(features); - } + var features = geojsonFormat.readFeatures( + source.geojson.object, { + featureProjection: projectionToUse, + dataProjection: dataProjection + }); - break; - case 'JSONP': - if (!(source.url)) { - $log.error('[AngularJS - Openlayers] - You need an url properly configured to add a JSONP layer.'); - return; - } + oSource.addFeatures(features); + } - if (isDefined(source.url)) { - oSource = new ol.source.ServerVector({ - format: geojsonFormat, - loader: function(/*extent, resolution, projection*/) { - var url = source.url + - '&outputFormat=text/javascript&format_options=callback:JSON_CALLBACK'; - $http.jsonp(url, { cache: source.cache}) - .success(function(response) { - oSource.addFeatures(geojsonFormat.readFeatures(response)); - }) - .error(function(response) { - $log(response); - }); - }, - projection: projection - }); - } - break; - case 'TopoJSON': - if (!(source.topojson || source.url)) { - $log.error('[AngularJS - Openlayers] - You need a topojson ' + - 'property to add a TopoJSON layer.'); - return; - } + break; + case 'JSONP': + if (!(source.url)) { + $log.error('[AngularJS - Openlayers] - You need an url properly configured to add ' + + 'a JSONP layer.'); + return; + } - if (source.url) { - oSource = new ol.source.Vector({ - format: new ol.format.TopoJSON(), - url: source.url + if (isDefined(source.url)) { + oSource = new ol.source.ServerVector({ + format: geojsonFormat, + loader: function(/*extent, resolution, projection*/) { + var url = source.url + + '&outputFormat=text/javascript&format_options=callback:JSON_CALLBACK'; + $http.jsonp(url, { cache: source.cache}) + .success(function(response) { + oSource.addFeatures(geojsonFormat.readFeatures(response)); + }) + .error(function(response) { + $log(response); + }); + }, + projection: projection + }); + } + break; + case 'TopoJSON': + if (!(source.topojson || source.url)) { + $log.error('[AngularJS - Openlayers] - You need a topojson ' + + 'property to add a TopoJSON layer.'); + return; + } + + if (source.url) { + oSource = new ol.source.Vector({ + format: new ol.format.TopoJSON(), + url: source.url + }); + } else { + oSource = new ol.source.Vector(angular.extend(source.topojson, { + format: new ol.format.TopoJSON() + })); + } + break; + case 'TileJSON': + oSource = new ol.source.TileJSON({ + url: source.url, + attributions: createAttribution(source), + crossOrigin: 'anonymous' }); - } else { - oSource = new ol.source.Vector(angular.extend(source.topojson, { - format: new ol.format.TopoJSON() - })); - } - break; - case 'TileJSON': - oSource = new ol.source.TileJSON({ - url: source.url, - attributions: createAttribution(source), - crossOrigin: 'anonymous' - }); - break; + break; - case 'TileVector': - if (!source.url || !source.format) { - $log.error('[AngularJS - Openlayers] - TileVector Layer needs valid url and format properties'); - } - oSource = new ol.source.TileVector({ - url: source.url, - projection: projection, - attributions: createAttribution(source), - format: source.format, - tileGrid: new ol.tilegrid.createXYZ({ - maxZoom: source.maxZoom || 19 - }) - }); - break; + case 'TileVector': + if (!source.url || !source.format) { + $log.error('[AngularJS - Openlayers] - TileVector Layer needs valid url and format properties'); + } + oSource = new ol.source.TileVector({ + url: source.url, + projection: projection, + attributions: createAttribution(source), + format: source.format, + tileGrid: new ol.tilegrid.createXYZ({ + maxZoom: source.maxZoom || 19 + }) + }); + break; - case 'TileTMS': - if (!source.url || !source.tileGrid) { - $log.error('[AngularJS - Openlayers] - TileTMS Layer needs valid url and tileGrid properties'); - } - oSource = new ol.source.TileImage({ - url: source.url, - maxExtent: source.maxExtent, - attributions: createAttribution(source), - tileGrid: new ol.tilegrid.TileGrid({ - origin: source.tileGrid.origin, - resolutions: source.tileGrid.resolutions - }), - tileUrlFunction: function(tileCoord) { - - var z = tileCoord[0]; - var x = tileCoord[1]; - var y = tileCoord[2]; //(1 << z) - tileCoord[2] - 1; - - if (x < 0 || y < 0) { - return ''; + case 'TileTMS': + if (!source.url || !source.tileGrid) { + $log.error('[AngularJS - Openlayers] - TileTMS Layer needs valid url and tileGrid properties'); + } + oSource = new ol.source.TileImage({ + url: source.url, + maxExtent: source.maxExtent, + attributions: createAttribution(source), + tileGrid: new ol.tilegrid.TileGrid({ + origin: source.tileGrid.origin, + resolutions: source.tileGrid.resolutions + }), + tileUrlFunction: function(tileCoord) { + + var z = tileCoord[0]; + var x = tileCoord[1]; + var y = tileCoord[2]; //(1 << z) - tileCoord[2] - 1; + + if (x < 0 || y < 0) { + return ''; + } + + var url = source.url + z + '/' + x + '/' + y + '.png'; + + return url; } - - var url = source.url + z + '/' + x + '/' + y + '.png'; - - return url; + }); + break; + case 'TileImage': + oSource = new ol.source.TileImage({ + url: source.url, + attributions: createAttribution(source), + tileGrid: new ol.tilegrid.TileGrid({ + origin: source.tileGrid.origin, // top left corner of the pixel projection's extent + resolutions: source.tileGrid.resolutions + }), + tileUrlFunction: function(tileCoord/*, pixelRatio, projection*/) { + var z = tileCoord[0]; + var x = tileCoord[1]; + var y = -tileCoord[2] - 1; + var url = source.url + .replace('{z}', z.toString()) + .replace('{x}', x.toString()) + .replace('{y}', y.toString()); + return url; + } + }); + break; + case 'KML': + var extractStyles = source.extractStyles || false; + oSource = new ol.source.Vector({ + url: source.url, + format: new ol.format.KML(), + radius: source.radius, + extractStyles: extractStyles + }); + break; + case 'Stamen': + if (!source.layer || !isValidStamenLayer(source.layer)) { + $log.error('[AngularJS - Openlayers] - You need a valid Stamen layer.'); + return; } - }); - break; - case 'TileImage': - oSource = new ol.source.TileImage({ - url: source.url, - attributions: createAttribution(source), - tileGrid: new ol.tilegrid.TileGrid({ - origin: source.tileGrid.origin, // top left corner of the pixel projection's extent - resolutions: source.tileGrid.resolutions - }), - tileUrlFunction: function(tileCoord/*, pixelRatio, projection*/) { - var z = tileCoord[0]; - var x = tileCoord[1]; - var y = -tileCoord[2] - 1; - var url = source.url - .replace('{z}', z.toString()) - .replace('{x}', x.toString()) - .replace('{y}', y.toString()); - return url; + oSource = new ol.source.Stamen({ + layer: source.layer + }); + break; + case 'ImageStatic': + if (!source.url || !angular.isArray(source.imageSize) || source.imageSize.length !== 2) { + $log.error('[AngularJS - Openlayers] - You need a image URL to create a ImageStatic layer.'); + return; } - }); - break; - case 'KML': - var extractStyles = source.extractStyles || false; - oSource = new ol.source.Vector({ - url: source.url, - format: new ol.format.KML(), - radius: source.radius, - extractStyles: extractStyles - }); - break; - case 'Stamen': - if (!source.layer || !isValidStamenLayer(source.layer)) { - $log.error('[AngularJS - Openlayers] - You need a valid Stamen layer.'); - return; - } - oSource = new ol.source.Stamen({ - layer: source.layer - }); - break; - case 'ImageStatic': - if (!source.url || !angular.isArray(source.imageSize) || source.imageSize.length !== 2) { - $log.error('[AngularJS - Openlayers] - You need a image URL to create a ImageStatic layer.'); - return; - } - oSource = new ol.source.ImageStatic({ - url: source.url, - attributions: createAttribution(source), - imageSize: source.imageSize, - projection: projection, - imageExtent: projection.getExtent(), - imageLoadFunction: source.imageLoadFunction - }); - break; - case 'XYZ': - if (!source.url && !source.tileUrlFunction) { - $log.error('[AngularJS - Openlayers] - XYZ Layer needs valid url or tileUrlFunction properties'); - } - oSource = new ol.source.XYZ({ - url: source.url, - attributions: createAttribution(source), - minZoom: source.minZoom, - maxZoom: source.maxZoom, - projection: source.projection, - tileUrlFunction: source.tileUrlFunction - }); - break; - case 'Zoomify': - if (!source.url || !angular.isArray(source.imageSize) || source.imageSize.length !== 2) { - $log.error('[AngularJS - Openlayers] - Zoomify Layer needs valid url and imageSize properties'); - } - oSource = new ol.source.Zoomify({ - url: source.url, - size: source.imageSize - }); - break; - } - else + oSource = new ol.source.ImageStatic({ + url: source.url, + attributions: createAttribution(source), + imageSize: source.imageSize, + projection: projection, + imageExtent: projection.getExtent(), + imageLoadFunction: source.imageLoadFunction + }); + break; + case 'XYZ': + if (!source.url && !source.tileUrlFunction) { + $log.error('[AngularJS - Openlayers] - XYZ Layer needs valid url or tileUrlFunction ' + + 'properties'); + } + oSource = new ol.source.XYZ({ + url: source.url, + attributions: createAttribution(source), + minZoom: source.minZoom, + maxZoom: source.maxZoom, + projection: source.projection, + tileUrlFunction: source.tileUrlFunction + }); + break; + case 'Zoomify': + if (!source.url || !angular.isArray(source.imageSize) || source.imageSize.length !== 2) { + $log.error('[AngularJS - Openlayers] - Zoomify Layer needs valid url and imageSize properties'); + } + oSource = new ol.source.Zoomify({ + url: source.url, + size: source.imageSize + }); + break; + } + } else { oSource = source.type; + } // log a warning when no source could be created for the given type if (!oSource) { From a672cd6d121ec49cedad6e1f051a4204b1509630 Mon Sep 17 00:00:00 2001 From: Roman Sharnopolsky Date: Tue, 10 May 2016 16:53:56 +0300 Subject: [PATCH 3/3] feat: Enable providing custom source object to layer through source.type --- src/directives/layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/directives/layer.js b/src/directives/layer.js index 2f1260a9..9fe39435 100644 --- a/src/directives/layer.js +++ b/src/directives/layer.js @@ -59,7 +59,7 @@ angular.module('openlayers-directive').directive('olLayer', function($log, $q, o return; } - scope.$watch('properties', function(properties, oldProperties) { + scope.$watchCollection('properties', function(properties, oldProperties) { if (!isDefined(properties.source) || !isDefined(properties.source.type)) { return; }