diff --git a/examples/modify-features.js b/examples/modify-features.js index 0c93c7bc93..7e00bdcb5a 100644 --- a/examples/modify-features.js +++ b/examples/modify-features.js @@ -8,9 +8,6 @@ goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.GeoJSON'); goog.require('ol.source.MapQuest'); -goog.require('ol.style.Fill'); -goog.require('ol.style.Stroke'); -goog.require('ol.style.Style'); var raster = new ol.layer.Tile({ @@ -19,27 +16,15 @@ var raster = new ol.layer.Tile({ }) }); -var source = new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/countries.geojson' -}); - var vector = new ol.layer.Vector({ - source: source -}); - -var select = new ol.interaction.Select({ - style: new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: '#3399CC', - width: 2.5 - }), - fill: new ol.style.Fill({ - color: 'rgba(255,255,255,0.6)' - }) + source: new ol.source.GeoJSON({ + projection: 'EPSG:3857', + url: 'data/geojson/countries.geojson' }) }); +var select = new ol.interaction.Select(); + var modify = new ol.interaction.Modify({ features: select.getFeatures() }); diff --git a/examples/select-features.js b/examples/select-features.js index cb4cb3b3d4..b4a4dcfdd7 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -6,10 +6,6 @@ goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.GeoJSON'); 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'}) @@ -22,35 +18,7 @@ var vector = new ol.layer.Vector({ }) }); -var styleCache = {}; -var select = new ol.interaction.Select({ - 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 select = new ol.interaction.Select({}); var map = new ol.Map({ interactions: ol.interaction.defaults().extend([select]), diff --git a/src/ol/feature.js b/src/ol/feature.js index debcf9d43b..e9b1e968f7 100644 --- a/src/ol/feature.js +++ b/src/ol/feature.js @@ -7,6 +7,7 @@ goog.require('goog.events.EventType'); goog.require('goog.functions'); goog.require('ol.Object'); goog.require('ol.geom.Geometry'); +goog.require('ol.geom.GeometryType'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -344,3 +345,68 @@ ol.feature.createStyleFunction = function(obj) { } return styleFunction; }; + + +/** + * Default styles for editing features. + * @return {Object.>} Styles + * @todo stability experimental + */ +ol.feature.createDefaultEditingStyles = function() { + /** @type {Object.>} */ + var styles = {}; + var white = [255, 255, 255, 1]; + var blue = [0, 153, 255, 1]; + var width = 3; + styles[ol.geom.GeometryType.POLYGON] = [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: [255, 255, 255, 0.5] + }) + }) + ]; + styles[ol.geom.GeometryType.MULTI_POLYGON] = + styles[ol.geom.GeometryType.POLYGON]; + + styles[ol.geom.GeometryType.LINE_STRING] = [ + new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: white, + width: width + 2 + }) + }), + new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: blue, + width: width + }) + }) + ]; + styles[ol.geom.GeometryType.MULTI_LINE_STRING] = + styles[ol.geom.GeometryType.LINE_STRING]; + + styles[ol.geom.GeometryType.POINT] = [ + new ol.style.Style({ + image: new ol.style.Circle({ + radius: width * 2, + fill: new ol.style.Fill({ + color: blue + }), + stroke: new ol.style.Stroke({ + color: white, + width: width / 2 + }) + }), + zIndex: Infinity + }) + ]; + styles[ol.geom.GeometryType.MULTI_POINT] = + styles[ol.geom.GeometryType.POINT]; + + styles[ol.geom.GeometryType.GEOMETRY_COLLECTION] = + styles[ol.geom.GeometryType.POLYGON].concat( + styles[ol.geom.GeometryType.POINT] + ); + + return styles; +}; diff --git a/src/ol/interaction/drawinteraction.js b/src/ol/interaction/drawinteraction.js index 226b95bf27..d7ea269531 100644 --- a/src/ol/interaction/drawinteraction.js +++ b/src/ol/interaction/drawinteraction.js @@ -10,6 +10,7 @@ goog.require('ol.FeatureOverlay'); goog.require('ol.Map'); goog.require('ol.MapBrowserEvent'); goog.require('ol.MapBrowserEvent.EventType'); +goog.require('ol.feature'); goog.require('ol.geom.GeometryType'); goog.require('ol.geom.LineString'); goog.require('ol.geom.MultiLineString'); @@ -19,10 +20,6 @@ goog.require('ol.geom.Point'); goog.require('ol.geom.Polygon'); goog.require('ol.interaction.Pointer'); goog.require('ol.source.Vector'); -goog.require('ol.style.Circle'); -goog.require('ol.style.Fill'); -goog.require('ol.style.Stroke'); -goog.require('ol.style.Style'); /** @@ -194,53 +191,7 @@ goog.inherits(ol.interaction.Draw, ol.interaction.Pointer); * @return {ol.feature.StyleFunction} Styles. */ ol.interaction.Draw.getDefaultStyleFunction = function() { - /** @type {Object.>} */ - var styles = {}; - styles[ol.geom.GeometryType.POLYGON] = [ - new ol.style.Style({ - fill: new ol.style.Fill({ - color: [255, 255, 255, 0.5] - }) - }) - ]; - styles[ol.geom.GeometryType.MULTI_POLYGON] = - styles[ol.geom.GeometryType.POLYGON]; - - styles[ol.geom.GeometryType.LINE_STRING] = [ - new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: [255, 255, 255, 1], - width: 5 - }) - }), - new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: [0, 153, 255, 1], - width: 3 - }) - }) - ]; - styles[ol.geom.GeometryType.MULTI_LINE_STRING] = - styles[ol.geom.GeometryType.LINE_STRING]; - - styles[ol.geom.GeometryType.POINT] = [ - new ol.style.Style({ - image: new ol.style.Circle({ - radius: 7, - fill: new ol.style.Fill({ - color: [0, 153, 255, 1] - }), - stroke: new ol.style.Stroke({ - color: [255, 255, 255, 0.75], - width: 1.5 - }) - }), - zIndex: 100000 - }) - ]; - styles[ol.geom.GeometryType.MULTI_POINT] = - styles[ol.geom.GeometryType.POINT]; - + var styles = ol.feature.createDefaultEditingStyles(); return function(feature, resolution) { return styles[feature.getGeometry().getType()]; }; diff --git a/src/ol/interaction/modifyinteraction.js b/src/ol/interaction/modifyinteraction.js index 9912e44ea4..d133822d22 100644 --- a/src/ol/interaction/modifyinteraction.js +++ b/src/ol/interaction/modifyinteraction.js @@ -11,6 +11,7 @@ goog.require('ol.MapBrowserEvent.EventType'); goog.require('ol.ViewHint'); goog.require('ol.coordinate'); goog.require('ol.extent'); +goog.require('ol.feature'); goog.require('ol.geom.GeometryType'); goog.require('ol.geom.LineString'); goog.require('ol.geom.MultiLineString'); @@ -101,7 +102,8 @@ ol.interaction.Modify = function(options) { * @private */ this.overlay_ = new ol.FeatureOverlay({ - style: options.style + style: (goog.isDef(options.style)) ? options.style : + ol.interaction.Modify.getDefaultStyleFunction() }); /** @@ -743,3 +745,14 @@ ol.interaction.Modify.prototype.updateSegmentIndices_ = function( } }); }; + + +/** + * @return {ol.feature.StyleFunction} Styles. + */ +ol.interaction.Modify.getDefaultStyleFunction = function() { + var style = ol.feature.createDefaultEditingStyles(); + return function(feature, resolution) { + return style[ol.geom.GeometryType.POINT]; + }; +}; diff --git a/src/ol/interaction/selectinteraction.js b/src/ol/interaction/selectinteraction.js index 9e133b100d..beca54baba 100644 --- a/src/ol/interaction/selectinteraction.js +++ b/src/ol/interaction/selectinteraction.js @@ -5,6 +5,8 @@ goog.require('goog.functions'); goog.require('ol.Feature'); goog.require('ol.FeatureOverlay'); goog.require('ol.events.condition'); +goog.require('ol.feature'); +goog.require('ol.geom.GeometryType'); goog.require('ol.interaction.Interaction'); @@ -85,7 +87,8 @@ ol.interaction.Select = function(options) { * @type {ol.FeatureOverlay} */ this.featureOverlay_ = new ol.FeatureOverlay({ - style: options.style + style: (goog.isDef(options.style)) ? options.style : + ol.interaction.Select.getDefaultStyleFunction() }); }; @@ -177,3 +180,19 @@ ol.interaction.Select.prototype.setMap = function(map) { goog.base(this, 'setMap', map); this.featureOverlay_.setMap(map); }; + + +/** + * @return {ol.feature.StyleFunction} Styles. + */ +ol.interaction.Select.getDefaultStyleFunction = function() { + var styles = ol.feature.createDefaultEditingStyles(); + goog.array.extend(styles[ol.geom.GeometryType.POLYGON], + styles[ol.geom.GeometryType.LINE_STRING]); + goog.array.extend(styles[ol.geom.GeometryType.GEOMETRY_COLLECTION], + styles[ol.geom.GeometryType.LINE_STRING]); + + return function(feature, resolution) { + return styles[feature.getGeometry().getType()]; + }; +};