Support tiled vector data and Mapbox vector tiles

[ahocevar]

This pull request adds support for rendering tiled vector data. The key elements to achieve this are

1. ol.layer.VectorTile. A simple layer to hint renderers that a tiled renderer is to be used, instead of a viewport renderer like for ol.layer.Vector.
2. ol.source.VectorTile and ol.VectorTile. Features are handled by the tile, not the source. Like image tiles, vector tiles can be cached. The existing ol.source.TileVector is removed, and its functionality is integrated into ol.source.VectorTile. To improve the inheritance chain, ol.source.UrlTile was added. Both ol.source.ImageTile and ol.source.VectorTile inherit common functionality related to url loading from that new class.
3. ol.renderer.canvas.VectorTileLayer. This renderer gets tiles from ol.source.VectorTile, creates a replay group for each tile, and stores the replay group on the tile for rendering. Tiles are clipped at the tile boundary, so stroked polygons won't have a stroke at the tile boundary when a buffer is used on the server that creates the vector tiles.

Support for Mapbox vector tiles is provided by the new ol.format.MVT format, which relies on https://www.npmjs.com/package/pbf to read the protobuffers and https://www.npmjs.com/package/vector-tile to parse layers and features. To support pixel relative coordinates,ol.proj.Units.TILE_PIXELS was introduced. For efficient feature and geometry creation, a lightweight, read-only ol.render.Feature was added, which does not register any event listeners. Another performance improvement was achieved by skipping lineTo/moveTo calls for repeated coordinates when replaying vector batches at a lower resolution than it was created for.

[jonataswalker]

A little typo here - http://mapbox.com

[marcjansen]

Awesome work. Very impressive!

[fredj]

minor but version 1.3.5 was release yesterday

[marcjansen]

Typo:

…takes an {@link ol.Feature} or {@link ol.render.Feature}…

[bartvde]

LGTM @ahocevar please merge once Travis gives the final okay

[ahocevar]

Thanks @bartvde for this thorough review - the code is much simpler, cleaner and smaller now.

[ahocevar]

Some metrics regarding build size. Configuration used:

  "exports": [
    "ol.Map", "ol.Map#*",
    "ol.View", "ol.View#*",
    "ol.layer.Vector", "ol.layer.Vector#*",
    "ol.source.Vector", "ol.source.Vector#*",
    "ol.format.GeoJSON",
    "ol.style.*"
  ],
  "compile": {
    "define": [
      "ol.ENABLE_VECTOR_TILE=false",
    ]
  }
}

So no vector tiles in this configuration.

Before:

uncompressed: 194232 bytes
  compressed: 63595 bytes

After:

uncompressed: 195050 bytes
  compressed: 63998 bytes

The increase of 818 bytes in code size comes mostly from performance optimisations in the canvas replay, and the support for array buffers in vector formats.

[tonio]

Nice work!
Did you notice the gap between tiles in FF ?

Sounds like a rounding issue.

[ahocevar]

@tonio I saw it only on Linux. Did you observe this on other platforms as well?

[pksorensen]

How do you guys feel about the performance of http://openlayers.org/en/master/examples/mapbox-vector-tiles-advanced.html?q=vectortile using the canvas renderer? On my machine its suboptimale compared to the mapbox GL render.

Dont get me wrong - its really amazing work.

[bartvde]

Right I observed the same performance "issue", especially on pan.

[bartvde]

@ahocevar @tonio I see it in FF on OSX as well, hadn't opened up the example in FF as yet to be honest

[ahocevar]

@s093294 @bartvde In the process of working on this pull request, I spent a long time profiling and optimizing. The bottleneck is now in the renderer code itself. The majority of the time is spent applying strokes and fills. If the canvas renderer did a better job combining geometries and stroking/filling them at once, performance would be better. But that's a separate issue, as it affects all canvas rendering in OpenLayers. The goal is to reduce the number of stroke and fill instructions.

[bartvde]

@ahocevar should we at least open up a new issue for this? So we don't loose your valuable information here?

[ahocevar]

@bartvde Please do so.

[tonio]

@ahocevar yep, I reproduce on win 7 & 10, too (browserstack).

[ahocevar]

@tonio Please create a ticket for that.

[tonio]

@ahocevar see #4329

[ahocevar]

Thanks @tonio.

[NathanW2]

@ahocevar is it possible to read tiles from a local folder and not from over the web e.g for offline use?

[nicholas-l]

Hi @NathanW2 I don't think this is possible as there are security issues with accessing files using AJAX, see http://stackoverflow.com/a/18137280

[ahocevar]

@NathanW2 You can define a custom tileLoadFunction on your ol.source.VectorTile if you want to use something else than AJAX to load your tile data.

[kurundkar123]

Hello, Can anyone help me with how to create simple vector tile and how to add layers in it, how to add structures in it.