I try to find code to drag a polygon (not modify)....OL3
polygon is created by code (bbox for print area).
can anybody shere code?
var format = new ol.format.WKT();
var feature = format.readFeature(wkt2);
selectInteraction = new ol.interaction.Select({style: styles});
map.addInteraction(selectInteraction);
selectInteraction.getFeatures().push(feature);
modifyInteraction = new ol.interaction.DragAndDrop({
features: selectInteraction.getFeatures()
});
map.addInteraction(modifyInteraction);
vector = new ol.layer.Vector({
style: styles,
source: new ol.source.Vector({
features: [feature]
})
});
map.getLayers().insertAt(1000, vector);
See the drag features example here: http://openlayers.org/en/v3.4.0/examples/drag-features.html
Also there is work in progress on a Translate interaction see: https://github.com/openlayers/ol3/pull/3250
This extension called Transform Interaction work fine with dragging. It also has support for rotating, stretching and scaling. It is definitely worth a look!
Related
A Feature is made of several parts, how do i select just one of them on mouse click in openLayers?
By default the whole feature gets selected.
I think you would need to create a new source containing features with single polygon geometry. Give them a parent property if you need to access the original feature. For example
mainSource.on('addfeature', function(event) {
var geometry = event.feature.getGeometry();
if (geometry.getType() == 'MultiPolygon') {
geometry.getPolygons().forEach(function(polygon) {
splitSource.addFeature(new Feature({
geometry: polygon,
parent: event.feature
});
} else {
splitSource.addFeature(event.feature);
}
});
I am using OpenLayers 3.5.0 to embed a map in my website, and place a marker overlay at specific coordinates. I've also added a fullscreen control. Both work individually, but in full-screen mode the marker is no longer at the specified coordinates. It also moves around when panning instead of staying fixed to one map position.
Here's the code that sets up the map:
function map(lon, lat) {
var coords = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [ layer ],
target: 'map',
view: new ol.View({
maxZoom: 19,
zoom: 15,
center: coords
}),
interactions: ol.interaction.defaults({mouseWheelZoom:false})
});
map.addOverlay(new ol.Overlay({
position: coords,
positioning: 'bottom-center',
element: $('<img>')
.addClass('location-popover')
.attr('src', 'pin.jpg')
}));
}
Is there a way I can make the overlay play nicely in full-screen mode?
I had a similar issue with the popovers/markers being in the wrong position. Not sure if it's the same thing you're experiencing but in my case I was appending data to the page along with the markers, and this was adding a scrollbar to the window. This affected the positioning, so what I had to do was call
map.updateSize();
after I was done adding everything. After that everything lined up correctly.
Using OL3, I set the text on a style dynamically:
var myLayer = new ol.layer.Vector({
source: mySource,
style: function (feature, resolution) {
var style = new ol.style.Style({
text: new ol.style.Text({
text: setText(feature)
})
});
return [style];
}
});
I am trying to later read what is stored in text:
text: setText(feature)
I am trying to retrieve the text on a click event but not sure how to access that property under the feature style (feature is the variable from the event containing the clicked feature):
// Get current display text
var currentFeatureStyle = feature.getStyle();
But when I do that, I get a null currentFeatureStyle.
Also tried looping through the feature:
for (var fid in feature)
{
//what to look for to extract the feature text?
But not sure what to look for to extract the feature text. Any help getting back the feature text from a feature would be appreciated.
Thanks
If someone can come up with a more correct answer please by all means post below. I have created a "workaround" since I could not retrieve the text from the feature. The workaround involves the following:
Inside the method the text is originally set, add the following:
function setText(feature)
{
// First do your normal stuff (set the text of the feature)
var output = "myFeatureText";
// Here is the workaround step 1:
// Create a property and set it to the text
feature.displayText = output;
// Return back value for the setting of the style text
return output;
}
Now the text is also saved in a property called displayText. Note: displayText is a made up property, it does not exist in openlayers.
Step 2 is to retrieve the property you created in step 1 to get the display text. In this example we are retrieving the feature from singleclick but it can be from anywhere else you are using the feature:
map.on('singleclick', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
return feature;
});
// Here is the workaround step 2:
// Get "display text" custom field for this feature
var displayText = feature.displayText;
.
And thats all there is to it. There must be a "correct" way to retrieve the text from the style of the feature but I am not aware of it. If someone know how to by all means post your answer.
I would like you use select interaction to add a feature, but the e.coordinate shows undefined.
var select = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0288D1',
width: 2
})
})
});
map.addInteraction(select);
select.on('select', function(e) {
var feat = new ol.Feature({
geometry: new ol.geom.Point(e.coordinate),
style: style1
});
alert(e.coordinate);
feat.setStyle(style1);
layerVector.getSource().addFeature(feat);
});
If someone know the reason, tell me how to get the coordinate when i click on viewer with this select interaction.
UPDATE
What you ask in comments (about listeners) can be easier if you become a friend of API Docs. In my beginning it was very hard to know them all, but the docs are much, much better so let it be your source.
Each part of OpenLayers has its own listeners, so, for instance, click at ol.Map, scroll to the "Fires:" section and you'll see the several listeners, the same with ol.View and so forth.
To get clicked coordinate inside ol.interaction.Select listener use:
select.on('select', function(evt){
var coord = evt.mapBrowserEvent.coordinate;
console.info(coord);
// ...
});
I draw features on a map (WKT POINTs). Now I would like to give those points a radius. Before I even add Features and the layer to the map I do the following:
var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Circle({
radius: 30
})
});
This throws the following error:
AssertionError: Assertion failed: obj geometry must be an ol.style.Style instance
at goog.asserts.DEFAULT_ERROR_HANDLER (http://localhost:33464/app/lib/openLayers/ol-debug.js:4330:52)
at goog.asserts.doAssertFailure_ (http://localhost:33464/app/lib/openLayers/ol-debug.js:4365:3)
at goog.asserts.assertInstanceof (http://localhost:33464/app/lib/openLayers/ol-debug.js:4575:5)
at ol.style.createStyleFunction (http://localhost:33464/app/lib/openLayers/ol-debug.js:56402:7)
at ol.layer.Vector.prototype.setStyle (http://localhost:33464/app/lib/openLayers/ol-debug.js:58228:3)
at ol.layer.Vector (http://localhost:33464/app/lib/openLayers/ol-debug.js:58115:3)
If instead I add the same style to the "new ol.layer.Tile" I'm using to display the OpenStreetMap (ol.source.OSM) in the background everything works perfect:
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
style: new ol.style.Circle({
radius: 30
})
})
]
});
I don't really understand that. I guess it has something to do with ol.style.Circle extending ol.style.Image (which doesn't sound like something for a vector layer - rather the raster layer "Tile"). But if I add the style to the Tile-Layer, why are the features on the vector-Layer rendering with this style?
My questions:
What is the correct way of doing this?
Is there a "style-Inheritance" going on?
style is not a valid option of the ol.layer.Tile object, thus it is simply ignored. See its documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Tile.html
The style definition defined in the ol.layer.Vector has to be either of the following:
a ol.style.Style object
an array of ol.style.Style objects
a style function, i.e. ol.style.StyleFunction.
So, in order for your example to work, you could define a style that looks like this:
var src = new ol.source.Vector();
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
fill: new ol.style.Fill({color: 'red'})
})
})
});
This example demonstrates custom style: http://openlayers.org/en/v3.10.1/examples/custom-interactions.html
See also the API documentation: http://openlayers.org/en/v3.10.1/apidoc/ol.layer.Vector.html