From c50fcecf42c1048ffe4f40e456d05a4f4d3ae02e Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 22 Jan 2013 01:46:27 -0700 Subject: [PATCH] Vector rendering example There is a ton of room for optimization here. The vector layer renderer should only render dirty areas and could maintain a cache of rendered canvas tiles. The vector source could have a simple spatial index for features (by tile coord). Need to also discuss how to work with this animation framework (to avoid the excess work while waiting for tiles to load on every other layer). --- examples/vector-layer.html | 22 +++++++++++ examples/vector-layer.js | 39 +++++++++++++++++++ .../canvas/canvasvectorlayerrenderer.js | 6 ++- 3 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 examples/vector-layer.html create mode 100644 examples/vector-layer.js diff --git a/examples/vector-layer.html b/examples/vector-layer.html new file mode 100644 index 0000000000..fa79b0bcd5 --- /dev/null +++ b/examples/vector-layer.html @@ -0,0 +1,22 @@ + + + + + + + + + ol3 vector demo + + +
+ + + diff --git a/examples/vector-layer.js b/examples/vector-layer.js new file mode 100644 index 0000000000..3060620341 --- /dev/null +++ b/examples/vector-layer.js @@ -0,0 +1,39 @@ +goog.require('ol.Collection'); +goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.Projection'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.Vector'); + + +var raster = new ol.layer.TileLayer({ + source: new ol.source.MapQuestOpenAerial() +}); + +var source = new ol.source.Vector({ + projection: ol.Projection.getFromCode('EPSG:3857') +}); + +source.addFeatures([ + new ol.Feature( + new ol.geom.LineString([[-10000000, -10000000], [10000000, 10000000]])), + new ol.Feature( + new ol.geom.LineString([[-10000000, 10000000], [10000000, -10000000]])), + new ol.Feature(new ol.geom.Point([-10000000, 5000000])) +]); + +var vector = new ol.layer.Vector({ + source: source +}); + +var map = new ol.Map({ + layers: new ol.Collection([raster, vector]), + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: new ol.Coordinate(0, 0), + zoom: 0 + }) +}); diff --git a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js index 010364e5e0..0b576701c2 100644 --- a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js +++ b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js @@ -155,8 +155,10 @@ ol.renderer.canvas.VectorLayer.prototype.renderFrame = filter = filters[i]; type = filter.getType(); features = source.getFeatures(filter); - symbolizer = symbolizers[type]; - canvasRenderer.renderFeaturesByGeometryType(type, features, symbolizer); + if (features.length) { + symbolizer = symbolizers[type]; + canvasRenderer.renderFeaturesByGeometryType(type, features, symbolizer); + } } };