I am working with a version of OpenLayers 3. I am attempting to add the ability to drag a feature on the map. The problem I am running into is when adding a drag interaction to the map, I break the base functionality of moving around the map location.
I created a jsfiddle to demonstrate. When opening, try changing location of the map.
http://jsfiddle.net/mcroteau/w8bj1htb/
Any help resolving would be most appreciated.
Javascript
var mapTile = new ol.layer.Tile({ source: new ol.source.OSM() }); var lineStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }) var verticeStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 6, stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 0.8)', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.5)' }) }), geometry: function(feature) { var coordinates = feature.getGeometry().getCoordinates()[0]; return new ol.geom.MultiPoint(coordinates); } }) var mapView = new ol.View({ center: [-11000000, 4600000], zoom: 3 }); var map = new ol.Map({ layers: [mapTile], target: 'map', view: mapView }); /** * TODO : Issue 1 Drag Interaction * * adding drag interaction to map breaks ability to move map location * **/ var dragInteraction = new ol.interaction.Pointer({ handleDownEvent : function(event){ var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; }); if (feature) { this.coordinate_ = event.coordinate; this.feature_ = feature; } return !!feature; }, handleDragEvent : function(event){ var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; }); var deltaX = event.coordinate[0] - this.coordinate_[0]; var deltaY = event.coordinate[1] - this.coordinate_[1]; if(feature){ var geometry = feature.getGeometry(); geometry.translate(deltaX, deltaY); this.coordinate_[0] = event.coordinate[0]; this.coordinate_[1] = event.coordinate[1]; } }, handleMoveEvent : function(){ //console.log('handle move') }, handleUpEvent : function(event){ //console.log('handle up event') } }) map.addInteraction(dragInteraction); var features = new ol.Collection(); var vector_source = new ol.source.Vector({ features: features, }); var featureOverlay = new ol.layer.Vector({ source: vector_source, style: [ lineStyle, verticeStyle ] }) featureOverlay.setMap(map); var geometryFunction = function(coordinates, geometry) { var start = coordinates[0]; var end = coordinates[1]; if (!geometry) { geometry = new ol.geom.Polygon(null); } geometry.setCoordinates([ [start, [start[0], end[1]], end, [end[0], start[1]], start] ]); return geometry; } var draw = new ol.interaction.Draw({ condition: function(event) { return ol.events.condition.shiftKeyOnly(event) }, features: features, type: 'LineString', geometryFunction: geometryFunction, maxPoints: 2 }); map.addInteraction(draw);
أكثر...
I created a jsfiddle to demonstrate. When opening, try changing location of the map.
http://jsfiddle.net/mcroteau/w8bj1htb/
Any help resolving would be most appreciated.
Javascript
var mapTile = new ol.layer.Tile({ source: new ol.source.OSM() }); var lineStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }) var verticeStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 6, stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 0.8)', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.5)' }) }), geometry: function(feature) { var coordinates = feature.getGeometry().getCoordinates()[0]; return new ol.geom.MultiPoint(coordinates); } }) var mapView = new ol.View({ center: [-11000000, 4600000], zoom: 3 }); var map = new ol.Map({ layers: [mapTile], target: 'map', view: mapView }); /** * TODO : Issue 1 Drag Interaction * * adding drag interaction to map breaks ability to move map location * **/ var dragInteraction = new ol.interaction.Pointer({ handleDownEvent : function(event){ var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; }); if (feature) { this.coordinate_ = event.coordinate; this.feature_ = feature; } return !!feature; }, handleDragEvent : function(event){ var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; }); var deltaX = event.coordinate[0] - this.coordinate_[0]; var deltaY = event.coordinate[1] - this.coordinate_[1]; if(feature){ var geometry = feature.getGeometry(); geometry.translate(deltaX, deltaY); this.coordinate_[0] = event.coordinate[0]; this.coordinate_[1] = event.coordinate[1]; } }, handleMoveEvent : function(){ //console.log('handle move') }, handleUpEvent : function(event){ //console.log('handle up event') } }) map.addInteraction(dragInteraction); var features = new ol.Collection(); var vector_source = new ol.source.Vector({ features: features, }); var featureOverlay = new ol.layer.Vector({ source: vector_source, style: [ lineStyle, verticeStyle ] }) featureOverlay.setMap(map); var geometryFunction = function(coordinates, geometry) { var start = coordinates[0]; var end = coordinates[1]; if (!geometry) { geometry = new ol.geom.Polygon(null); } geometry.setCoordinates([ [start, [start[0], end[1]], end, [end[0], start[1]], start] ]); return geometry; } var draw = new ol.interaction.Draw({ condition: function(event) { return ol.events.condition.shiftKeyOnly(event) }, features: features, type: 'LineString', geometryFunction: geometryFunction, maxPoints: 2 }); map.addInteraction(draw);
أكثر...