Merge pull request #6817 from ahocevar/topojson-layer

Multiple layers in TopoJSON vector tiles
2017-05-20 16:58:19 +02:00
parent 342c49f0bb 7ecb2c0185
commit 8b9f994cea
6 changed files with 154 additions and 80 deletions
--- a/examples/osm-vector-tiles.html
+++ b/examples/osm-vector-tiles.html
@@ -3,7 +3,7 @@ layout: example.html
 title: OSM Vector Tiles
 shortdesc: Using OpenStreetMap vector tiles.
 docs: >
-  A simple vector tiles map with Mapzen vector tiles. **Note**: TopoJSON vector tiles are not optimized for rendering - they might clip geometries exactly at the tile boundary instead of adding a buffer, and use geographic coordinates instead of tile relative pixel coordinates in view projection.
+  A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol.format.MVT`](../apidoc/ol.format.MVT.html) is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
  vector-tiles-5eJz6JX: Your Mapzen API key from https://mapzen.com/developers
--- a/examples/osm-vector-tiles.js
+++ b/examples/osm-vector-tiles.js
@@ -1,4 +1,3 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.TopoJSON');
@@ -13,11 +12,6 @@ goog.require('ol.tilegrid');

 var key = 'vector-tiles-5eJz6JX';

-var attribution = [new ol.Attribution({
-  html: '&copy; OpenStreetMap contributors, Who’s On First, Natural Earth, and openstreetmapdata.com'
-})];
-var format = new ol.format.TopoJSON();
-var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
 var roadStyleCache = {};
 var roadColor = {
  'major_road': '#776',
@@ -34,65 +28,58 @@ var buildingStyle = new ol.style.Style({
    width: 1
  })
 });
+var waterStyle = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: '#9db9e8'
+  })
+});
+var roadStyle = function(feature) {
+  var kind = feature.get('kind');
+  var railway = feature.get('railway');
+  var sort_key = feature.get('sort_key');
+  var styleKey = kind + '/' + railway + '/' + sort_key;
+  var style = roadStyleCache[styleKey];
+  if (!style) {
+    var color, width;
+    if (railway) {
+      color = '#7de';
+      width = 1;
+    } else {
+      color = roadColor[kind];
+      width = kind == 'highway' ? 1.5 : 1;
+    }
+    style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: color,
+        width: width
+      }),
+      zIndex: sort_key
+    });
+    roadStyleCache[styleKey] = style;
+  }
+  return style;
+};

 var map = new ol.Map({
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
-        attributions: attribution,
-        format: format,
-        tileGrid: tileGrid,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/water/{z}/{x}/{y}.topojson?api_key=' + key
+        attributions: '&copy; OpenStreetMap contributors, Who’s On First, ' +
+            'Natural Earth, and openstreetmapdata.com',
+        format: new ol.format.TopoJSON({
+          layerName: 'layer',
+          layers: ['water', 'roads', 'buildings']
+        }),
+        tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
+        url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
      }),
-      style: new ol.style.Style({
-        fill: new ol.style.Fill({
-          color: '#9db9e8'
-        })
-      })
-    }),
-    new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        attributions: attribution,
-        format: format,
-        tileGrid: tileGrid,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/roads/{z}/{x}/{y}.topojson?api_key=' + key
-      }),
-      style: function(feature) {
-        var kind = feature.get('kind');
-        var railway = feature.get('railway');
-        var sort_key = feature.get('sort_key');
-        var styleKey = kind + '/' + railway + '/' + sort_key;
-        var style = roadStyleCache[styleKey];
-        if (!style) {
-          var color, width;
-          if (railway) {
-            color = '#7de';
-            width = 1;
-          } else {
-            color = roadColor[kind];
-            width = kind == 'highway' ? 1.5 : 1;
-          }
-          style = new ol.style.Style({
-            stroke: new ol.style.Stroke({
-              color: color,
-              width: width
-            }),
-            zIndex: sort_key
-          });
-          roadStyleCache[styleKey] = style;
+      style: function(feature, resolution) {
+        switch (feature.get('layer')) {
+          case 'water': return waterStyle;
+          case 'roads': return roadStyle(feature);
+          case 'buildings': return (resolution < 10) ? buildingStyle : null;
+          default: return null;
        }
-        return style;
-      }
-    }),
-    new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        attributions: attribution,
-        format: format,
-        tileGrid: tileGrid,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=' + key
-      }),
-      style: function(f, resolution) {
-        return (resolution < 10) ? buildingStyle : null;
      }
    })
  ],
--- a/examples/topojson.js
+++ b/examples/topojson.js
@@ -29,13 +29,14 @@ var style = new ol.style.Style({
 var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/topojson/world-110m.json',
-    format: new ol.format.TopoJSON(),
+    format: new ol.format.TopoJSON({
+      // don't want to render the full world polygon (stored as 'land' layer),
+      // which repeats all countries
+      layers: ['countries']
+    }),
    overlaps: false
  }),
-  style: function(feature) {
-    // don't want to render the full world polygon, which repeats all countries
-    return feature.getId() !== undefined ? style : null;
-  }
+  style: style
 });

 var map = new ol.Map({
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -2040,7 +2040,11 @@ olx.format.PolylineOptions.prototype.geometryLayout;


 /**
- * @typedef {{defaultDataProjection: ol.ProjectionLike}}
+ * @typedef {{
+ *     defaultDataProjection: ol.ProjectionLike,
+ *     layerName: (string|undefined),
+ *     layers: (Array.<string>|undefined)
+ * }}
 */
 olx.format.TopoJSONOptions;

@@ -2053,6 +2057,38 @@ olx.format.TopoJSONOptions;
 olx.format.TopoJSONOptions.prototype.defaultDataProjection;


+/**
+ * Set the name of the TopoJSON topology `objects`'s children as feature
+ * property with the specified name. This means that when set to `'layer'`, a
+ * topology like
+ * ```
+ * {
+ *   "type": "Topology",
+ *   "objects": {
+ *     "example": {
+ *       "type": "GeometryCollection",
+ *       "geometries": []
+ *     }
+ *   }
+ * }
+ * ```
+ * will result in features that have a property `'layer'` set to `'example'`.
+ * When not set, no property will be added to features.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.TopoJSONOptions.prototype.layerName;
+
+
+/**
+ * Names of the TopoJSON topology's `objects`'s children to read features from.
+ * If not provided, features will be read from all children.
+ * @type {Array.<string>|undefined}
+ * @api
+ */
+olx.format.TopoJSONOptions.prototype.layers;
+
+
 /**
 * @typedef {{altitudeMode: (ol.format.IGCZ|undefined)}}
 */
--- a/src/ol/format/topojson.js
+++ b/src/ol/format/topojson.js
@@ -10,7 +10,6 @@ goog.require('ol.geom.MultiPoint');
 goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
-goog.require('ol.obj');
 goog.require('ol.proj');


@@ -29,6 +28,18 @@ ol.format.TopoJSON = function(opt_options) {

  ol.format.JSONFeature.call(this);

+  /**
+   * @private
+   * @type {string|undefined}
+   */
+  this.layerName_ = options.layerName;
+
+  /**
+   * @private
+   * @type {Array.<string>}
+   */
+  this.layers_ = options.layers ? options.layers : null;
+
  /**
   * @inheritDoc
   */
@@ -202,18 +213,21 @@ ol.format.TopoJSON.readMultiPolygonGeometry_ = function(object, arcs) {
 * @param {Array.<Array.<ol.Coordinate>>} arcs Array of arcs.
 * @param {Array.<number>} scale Scale for each dimension.
 * @param {Array.<number>} translate Translation for each dimension.
+ * @param {string|undefined} property Property to set the `GeometryCollection`'s parent
+ *     object to.
+ * @param {string} name Name of the `Topology`'s child object.
 * @param {olx.format.ReadOptions=} opt_options Read options.
 * @return {Array.<ol.Feature>} Array of features.
 * @private
 */
 ol.format.TopoJSON.readFeaturesFromGeometryCollection_ = function(
-    collection, arcs, scale, translate, opt_options) {
+    collection, arcs, scale, translate, property, name, opt_options) {
  var geometries = collection.geometries;
  var features = [];
  var i, ii;
  for (i = 0, ii = geometries.length; i < ii; ++i) {
    features[i] = ol.format.TopoJSON.readFeatureFromGeometry_(
-        geometries[i], arcs, scale, translate, opt_options);
+        geometries[i], arcs, scale, translate, property, name, opt_options);
  }
  return features;
 };
@@ -226,12 +240,15 @@ ol.format.TopoJSON.readFeaturesFromGeometryCollection_ = function(
 * @param {Array.<Array.<ol.Coordinate>>} arcs Array of arcs.
 * @param {Array.<number>} scale Scale for each dimension.
 * @param {Array.<number>} translate Translation for each dimension.
+ * @param {string|undefined} property Property to set the `GeometryCollection`'s parent
+ *     object to.
+ * @param {string} name Name of the `Topology`'s child object.
 * @param {olx.format.ReadOptions=} opt_options Read options.
 * @return {ol.Feature} Feature.
 * @private
 */
 ol.format.TopoJSON.readFeatureFromGeometry_ = function(object, arcs,
-    scale, translate, opt_options) {
+    scale, translate, property, name, opt_options) {
  var geometry;
  var type = object.type;
  var geometryReader = ol.format.TopoJSON.GEOMETRY_READERS_[type];
@@ -246,8 +263,15 @@ ol.format.TopoJSON.readFeatureFromGeometry_ = function(object, arcs,
  if (object.id !== undefined) {
    feature.setId(object.id);
  }
-  if (object.properties) {
-    feature.setProperties(object.properties);
+  var properties = object.properties;
+  if (property) {
+    if (!properties) {
+      properties = {};
+    }
+    properties[property] = name;
+  }
+  if (properties) {
+    feature.setProperties(properties);
  }
  return feature;
 };
@@ -283,21 +307,24 @@ ol.format.TopoJSON.prototype.readFeaturesFromObject = function(
    }
    /** @type {Array.<ol.Feature>} */
    var features = [];
-    var topoJSONFeatures = ol.obj.getValues(topoJSONTopology.objects);
-    var i, ii;
-    var feature;
-    for (i = 0, ii = topoJSONFeatures.length; i < ii; ++i) {
-      if (topoJSONFeatures[i].type === 'GeometryCollection') {
+    var topoJSONFeatures = topoJSONTopology.objects;
+    var property = this.layerName_;
+    var objectName, feature;
+    for (objectName in topoJSONFeatures) {
+      if (this.layers_ && this.layers_.indexOf(objectName) == -1) {
+        continue;
+      }
+      if (topoJSONFeatures[objectName].type === 'GeometryCollection') {
        feature = /** @type {TopoJSONGeometryCollection} */
-            (topoJSONFeatures[i]);
+            (topoJSONFeatures[objectName]);
        features.push.apply(features,
            ol.format.TopoJSON.readFeaturesFromGeometryCollection_(
-                feature, arcs, scale, translate, opt_options));
+                feature, arcs, scale, translate, property, objectName, opt_options));
      } else {
        feature = /** @type {TopoJSONGeometry} */
-            (topoJSONFeatures[i]);
+            (topoJSONFeatures[objectName]);
        features.push(ol.format.TopoJSON.readFeatureFromGeometry_(
-            feature, arcs, scale, translate, opt_options));
+            feature, arcs, scale, translate, property, objectName, opt_options));
      }
    }
    return features;
--- a/test/spec/ol/format/topojson.test.js
+++ b/test/spec/ol/format/topojson.test.js
@@ -176,6 +176,29 @@ describe('ol.format.TopoJSON', function() {
      });
    });

+    it('sets the topology\'s child names as feature property', function(done) {
+      afterLoadText('spec/ol/format/topojson/world-110m.json', function(text) {
+        var format = new ol.format.TopoJSON({
+          layerName: 'layer'
+        });
+        var features = format.readFeatures(text);
+        expect(features[0].get('layer')).to.be('land');
+        expect(features[177].get('layer')).to.be('countries');
+        done();
+      });
+    });
+
+    it('only parses features from specified topology\'s children', function(done) {
+      afterLoadText('spec/ol/format/topojson/world-110m.json', function(text) {
+        var format = new ol.format.TopoJSON({
+          layers: ['land']
+        });
+        var features = format.readFeatures(text);
+        expect(features.length).to.be(1);
+        done();
+      });
+    });
+
  });

 });