diff --git a/examples/drag-and-drop-image-vector.html b/examples/drag-and-drop-image-vector.html index 81d4457810..2635bb9e1a 100644 --- a/examples/drag-and-drop-image-vector.html +++ b/examples/drag-and-drop-image-vector.html @@ -3,7 +3,7 @@ layout: example.html title: Drag-and-Drop Image Vector shortdesc: Example of using the drag-and-drop interaction with image vector rendering. docs: > - Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client. + Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'`. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client. tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image" cloak: - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 diff --git a/examples/drag-and-drop-image-vector.js b/examples/drag-and-drop-image-vector.js index 27073e6622..bfbe18b276 100644 --- a/examples/drag-and-drop-image-vector.js +++ b/examples/drag-and-drop-image-vector.js @@ -4,74 +4,6 @@ import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js'; import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js'; import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js'; import {BingMaps, Vector as VectorSource} from '../src/ol/source.js'; -import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; - - -const defaultStyle = { - 'Point': new Style({ - image: new CircleStyle({ - fill: new Fill({ - color: 'rgba(255,255,0,0.5)' - }), - radius: 5, - stroke: new Stroke({ - color: '#ff0', - width: 1 - }) - }) - }), - 'LineString': new Style({ - stroke: new Stroke({ - color: '#f00', - width: 3 - }) - }), - 'Polygon': new Style({ - fill: new Fill({ - color: 'rgba(0,255,255,0.5)' - }), - stroke: new Stroke({ - color: '#0ff', - width: 1 - }) - }), - 'MultiPoint': new Style({ - image: new CircleStyle({ - fill: new Fill({ - color: 'rgba(255,0,255,0.5)' - }), - radius: 5, - stroke: new Stroke({ - color: '#f0f', - width: 1 - }) - }) - }), - 'MultiLineString': new Style({ - stroke: new Stroke({ - color: '#0f0', - width: 3 - }) - }), - 'MultiPolygon': new Style({ - fill: new Fill({ - color: 'rgba(0,0,255,0.5)' - }), - stroke: new Stroke({ - color: '#00f', - width: 1 - }) - }) -}; - -const styleFunction = function(feature, resolution) { - const featureStyleFunction = feature.getStyleFunction(); - if (featureStyleFunction) { - return featureStyleFunction.call(feature, resolution); - } else { - return defaultStyle[feature.getGeometry().getType()]; - } -}; const dragAndDropInteraction = new DragAndDrop({ formatConstructors: [ @@ -106,8 +38,7 @@ dragAndDropInteraction.on('addfeatures', function(event) { }); map.addLayer(new VectorLayer({ renderMode: 'image', - source: vectorSource, - style: styleFunction + source: vectorSource })); map.getView().fit(vectorSource.getExtent()); }); diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js index 453e3abef3..3ed202752c 100644 --- a/examples/drag-and-drop.js +++ b/examples/drag-and-drop.js @@ -4,74 +4,6 @@ import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js'; import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {BingMaps, Vector as VectorSource} from '../src/ol/source.js'; -import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; - - -const defaultStyle = { - 'Point': new Style({ - image: new CircleStyle({ - fill: new Fill({ - color: 'rgba(255,255,0,0.5)' - }), - radius: 5, - stroke: new Stroke({ - color: '#ff0', - width: 1 - }) - }) - }), - 'LineString': new Style({ - stroke: new Stroke({ - color: '#f00', - width: 3 - }) - }), - 'Polygon': new Style({ - fill: new Fill({ - color: 'rgba(0,255,255,0.5)' - }), - stroke: new Stroke({ - color: '#0ff', - width: 1 - }) - }), - 'MultiPoint': new Style({ - image: new CircleStyle({ - fill: new Fill({ - color: 'rgba(255,0,255,0.5)' - }), - radius: 5, - stroke: new Stroke({ - color: '#f0f', - width: 1 - }) - }) - }), - 'MultiLineString': new Style({ - stroke: new Stroke({ - color: '#0f0', - width: 3 - }) - }), - 'MultiPolygon': new Style({ - fill: new Fill({ - color: 'rgba(0,0,255,0.5)' - }), - stroke: new Stroke({ - color: '#00f', - width: 1 - }) - }) -}; - -const styleFunction = function(feature, resolution) { - const featureStyleFunction = feature.getStyleFunction(); - if (featureStyleFunction) { - return featureStyleFunction.call(feature, resolution); - } else { - return defaultStyle[feature.getGeometry().getType()]; - } -}; const dragAndDropInteraction = new DragAndDrop({ formatConstructors: [ @@ -105,8 +37,7 @@ dragAndDropInteraction.on('addfeatures', function(event) { features: event.features }); map.addLayer(new VectorLayer({ - source: vectorSource, - style: styleFunction + source: vectorSource })); map.getView().fit(vectorSource.getExtent()); });