diff --git a/examples/drag-and-drop-image-vector.html b/examples/drag-and-drop-image-vector.html new file mode 100644 index 0000000000..e19c422047 --- /dev/null +++ b/examples/drag-and-drop-image-vector.html @@ -0,0 +1,55 @@ + + + + + + + + + + Drag-and-Drop image vector example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Drag-and-Drop image vector example

+

Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.

+
+

See the drag-and-drop-image-vector.js source to see how this is done.

+
+
drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image
+
+
+
+   +
+
+ +
+ +
+ + + + + + + diff --git a/examples/drag-and-drop-image-vector.js b/examples/drag-and-drop-image-vector.js new file mode 100644 index 0000000000..9a6886af52 --- /dev/null +++ b/examples/drag-and-drop-image-vector.js @@ -0,0 +1,156 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.format.GPX'); +goog.require('ol.format.GeoJSON'); +goog.require('ol.format.IGC'); +goog.require('ol.format.KML'); +goog.require('ol.format.TopoJSON'); +goog.require('ol.interaction'); +goog.require('ol.interaction.DragAndDrop'); +goog.require('ol.layer.Image'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.BingMaps'); +goog.require('ol.source.ImageVector'); +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'); + + +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 dragAndDropInteraction = new ol.interaction.DragAndDrop({ + formatConstructors: [ + ol.format.GPX, + ol.format.GeoJSON, + ol.format.IGC, + ol.format.KML, + ol.format.TopoJSON + ] +}); + +var map = new ol.Map({ + interactions: ol.interaction.defaults().extend([dragAndDropInteraction]), + layers: [ + new ol.layer.Tile({ + source: new ol.source.BingMaps({ + imagerySet: 'Aerial', + key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3' + }) + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + +dragAndDropInteraction.on('addfeatures', function(event) { + var vectorSource = new ol.source.Vector({ + features: event.getFeatures(), + projection: event.getProjection() + }); + map.getLayers().push(new ol.layer.Image({ + source: new ol.source.ImageVector({ + source: vectorSource, + styleFunction: styleFunction + }) + })); + var view2D = map.getView().getView2D(); + view2D.fitExtent(vectorSource.getExtent(), map.getSize()); +}); + +var displayFeatureInfo = function(pixel) { + var features = []; + map.forEachFeatureAtPixel(pixel, function(feature, layer) { + features.push(feature); + }); + if (features.length > 0) { + var info = []; + var i, ii; + for (i = 0, ii = features.length; i < ii; ++i) { + info.push(features[i].get('name')); + } + document.getElementById('info').innerHTML = info.join(', ') || ' '; + } else { + document.getElementById('info').innerHTML = ' '; + } +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('singleclick', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); +});