diff --git a/examples/select-features.js b/examples/select-features.js index 5244b6af9f..d1c16603c9 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -9,6 +9,7 @@ goog.require('ol.source.MapQuest'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); +goog.require('ol.style.Text'); var raster = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) @@ -18,23 +19,37 @@ var vector = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', url: 'data/geojson/countries.geojson' - }), - style: new ol.style.Style({ - fill: new ol.style.Fill({ - color: 'rgba(255,255,255,0.25)' - }), - stroke: new ol.style.Stroke({ - color: '#6666ff' - }) }) }); +var styleCache = {}; var select = new ol.interaction.Select({ - style: new ol.style.Style({ - fill: new ol.style.Fill({ - color: 'rgba(255,255,255,0.5)' - }) - }) + style: function(feature, resolution) { + var text = feature.get('name'); + if (!styleCache[text]) { + styleCache[text] = [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255,0,0,0.3)' + }), + stroke: new ol.style.Stroke({ + color: 'rgba(255,0,0,1)', + size: 2 + }), + text: new ol.style.Text({ + font: '12px Calibri,sans-serif', + text: text, + fill: new ol.style.Fill({ + color: '#000' + }), + stroke: new ol.style.Stroke({ + color: '#fff', + width: 3 + }) + }) + })]; + } + return styleCache[text]; + } }); var map = new ol.Map({