Skip to content
Browse files

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).
  • Loading branch information...
1 parent 1dd17fc commit c50fcecf42c1048ffe4f40e456d05a4f4d3ae02e @tschaub tschaub committed Jan 22, 2013
Showing with 65 additions and 2 deletions.
  1. +22 −0 examples/vector-layer.html
  2. +39 −0 examples/vector-layer.js
  3. +4 −2 src/ol/renderer/canvas/canvasvectorlayerrenderer.js
View
22 examples/vector-layer.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style type="text/css">
+ html, body, #map {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ <link rel="stylesheet" href="../css/ol.css" type="text/css">
+ <title>ol3 vector demo</title>
+ </head>
+ <body>
+ <div id="map"></div>
+ <script src="loader.js?id=vector-layer" type="text/javascript"></script>
+ </body>
+</html>
View
39 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
+ })
+});
View
6 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);
+ }
}
};

0 comments on commit c50fcec

Please sign in to comment.
Something went wrong with that request. Please try again.