ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Vector rendering example

Browse Source 
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).
This commit is contained in:
Tim Schaub
2013-01-22 01:46:27 -07:00
parent 1dd17fc88f
commit c50fcecf42
3 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
examples/vector-layer.html Normal file
View File

@@ -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>

39
examples/vector-layer.js Normal file
View File

@@ -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
})
});

2
src/ol/renderer/canvas/canvasvectorlayerrenderer.js
View File

@@ -155,8 +155,10 @@ ol.renderer.canvas.VectorLayer.prototype.renderFrame =
filter = filters[i]; filter = filters[i];
type = filter.getType(); type = filter.getType();
features = source.getFeatures(filter); features = source.getFeatures(filter);
if (features.length) {
symbolizer = symbolizers[type]; symbolizer = symbolizers[type];
canvasRenderer.renderFeaturesByGeometryType(type, features, symbolizer); canvasRenderer.renderFeaturesByGeometryType(type, features, symbolizer);
} }
}
}; };