diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js index dc79f50a73..ee60be23bd 100644 --- a/examples/drag-and-drop.js +++ b/examples/drag-and-drop.js @@ -6,14 +6,85 @@ goog.require('ol.interaction'); goog.require('ol.interaction.DragAndDrop'); goog.require('ol.layer.Tile'); goog.require('ol.source.BingMaps'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); +var defaultStyle = { + 'Point': [new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ + color: 'rgba(255,255,0,0.5)' + }), + radius: 5, + stroke: new ol.style.Stroke({ + color: '#ff0', + width: 1 + }) + }) + })], + 'LineString': [new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: '#f00', + width: 3 + }) + })], + 'Polygon': [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(0,255,255,0.5)' + }), + stroke: new ol.style.Stroke({ + color: '#0ff', + width: 1 + }) + })], + 'MultiPoint': [new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ + color: 'rgba(255,0,255,0.5)' + }), + radius: 5, + stroke: new ol.style.Stroke({ + color: '#f0f', + width: 1 + }) + }) + })], + 'MultiLineString': [new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: '#0f0', + width: 3 + }) + })], + 'MultiPolygon': [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(0,0,255,0.5)' + }), + stroke: new ol.style.Stroke({ + color: '#00f', + width: 1 + }) + })] +}; + +var styleFunction = function(feature, resolution) { + var featureStyleFunction = feature.getStyleFunction(); + if (featureStyleFunction) { + return featureStyleFunction.call(feature, resolution); + } else { + return defaultStyle[feature.getGeometry().getType()]; + } +}; + var map = new ol.Map({ interactions: ol.interaction.defaults().extend([ new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.KML - ] + ], + styleFunction: styleFunction }) ]), layers: [