diff --git a/examples/image-vector-layer.html b/examples/image-vector-layer.html new file mode 100644 index 0000000000..b8a37b6d5f --- /dev/null +++ b/examples/image-vector-layer.html @@ -0,0 +1,53 @@ + + + + + + + + + + + Image vector layer example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Image vector example

+

Example of an image vector layer.

+
+

This example uses a ol.source.ImageVector source. That source gets vector features from the + ol.source.Vector it's configured with and draw these features to an HTML5 canvas element that + is then used as the image of an image layer.

+

See the image-vector-layer.js source to see how this is done.

+
+
vector, image
+
+ +
+ +
+ + + + + + diff --git a/examples/image-vector-layer.js b/examples/image-vector-layer.js new file mode 100644 index 0000000000..76e6e83dae --- /dev/null +++ b/examples/image-vector-layer.js @@ -0,0 +1,46 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.Image'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.GeoJSON'); +goog.require('ol.source.ImageVector'); +goog.require('ol.source.MapQuest'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + + +var styleArray = [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.6)' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3', + width: 1 + }) +})]; + +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.MapQuest({layer: 'sat'}) + }), + new ol.layer.Image({ + source: new ol.source.ImageVector({ + source: new ol.source.GeoJSON({ + url: 'data/countries.geojson' + }), + styleFunction: function(feature, resolution) { + return styleArray; + } + }) + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 1 + }) +});