How can I increase the hit area of my features, as at the moment only the text and icon are clickable, making it very hard to click on a tablet device.
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([this.pixelLocation.x, this.pixelLocation.y]),
id: i
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.7, 35],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 1,
src: 'assets/pins/pin-teal.png'
})),
text: new ol.style.Text({
text: this.name,
font: '13px Interstate-Light',
fill: new ol.style.Fill({color: 'white'}),
fontSize: "19px",
textAlign: textA,
offsetX: textOffX,
offsetY: -15
})
});
iconFeature.setStyle(iconStyle);
featuresArr.push(iconFeature);
Related
Is there a way to avoid cropped point styles when rendering in ol.layer.VectorTile Layer using OpenLayers 3 (v3.18.2)?
Here is the relevant code of the example:
layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
url: 'http://localhost:8181/schools/{z}/{x}/{y}.pbf',
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
tilePixelRatio: 16
}),
style: function(feature) {
return new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(105, 105, 105, 1.0)'
}),
stroke: new ol.style.Stroke({
width: 1,
color: 'rgba(105, 105, 105, 0.3)'
}),
radius: 7
}),
text: new ol.style.Text({
color: '#FFFFFF',
fontFamily: 'Calibri,sans-serif',
fontSize: 12,
text: feature.get("count").toString(),
labelYOffset: -12
})
});
}
});
map.addLayer(layer);
You have to generate your vector tiles differently, i.e. with a buffer, so your tiles also include nearby points from neighbouring tiles.
I am doing an internship now and this is my first time to touch OL3.
I try to make a demo to draw and change text with markers.
But I find that I can only change all text of the marker instead of changing the selected one.
Here is a simple jsfiddle I made.
features: select.getFeatures()
This is not work for me I think.
So how can I do that?
You may change you style variable to a ol.FeatureStyleFunction() to get the label from a property stored at the feature.
var style = function () {
return [
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: '//openlayers.org/en/v3.8.2/examples/data/icon.png'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
stroke: new ol.style.Stroke({
color: '#fff', width: 2
}),
// get the text from the feature (`this` is the feature)
text: this.get('text')
})
})
];
};
And to update text, update this property:
var features = select.getFeatures();
features.forEach(function(feature){
feature.set('text', nameElement);
});
http://jsfiddle.net/jonataswalker/b44nxco8/
I am adding features to a map by reading their WKT-String:
var feature = wkt.readFeature(entity.WellKnownText);
feature.bxObject = entity;
src.addFeature(feature);
Each feature has a bxObject-Property, and this Property contains the "radius"-Property.
I style the layer, to which the features are added like so:
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
})
})
});
I want the radius-Property of the style to be dynamic. What I did and works as a workaround is the following:
var layer = new ol.layer.Vector({
source: src,
style: function (feature, resolution) {
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: feature.bxObject.radius || 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
})
})
];
}
});
But this creates a new style for each feature... I potentially draw 100s of features and I even have the subjective opinion, that it slows everything down. Is this really the way it is done?
I found this stackoverflow post. But I had no luck trying to interpolate with "${...}". I guess this is an openLayers 2 feature:
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: "${bxObject.radius}",
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
})
})
});
Yes this is really the way, but you should keep a style cache and re-use when possible. See for instance: http://openlayers.org/en/v3.10.1/examples/kml-earthquakes.html
I've got a roundtrip drawn with openlayers.
The different points have a style like that :
new ol.style.Style({
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({
color: 'rgba(1,0,0,0)'
})
}),
text: new ol.style.Text({
font: 'normal 600 12px Calibri, sans-serif',
text: feature.get('TEXT'),
offsetX: 0,
offsetY: +12,
fill: new ol.style.Fill({
color: 'rgba(1,0,0,0)'
})
})
})
I want to modify the font for a specific event (export png), so for each feature I'm changing the font
for (var i = 0; i < vector_service_port.getSource().getFeatures().length; i++) {
vector_service_port.getSource().getFeatures()[i].setStyle(new ol.style.Style({
text: new ol.style.Text({
font: 'normal 600 14px Calibri, sans-serif'
})
}));
}
But I've got the error
Uncaught AssertionError: Assertion failed: Expected feature to be
removed from index
How can I bypass that?
I would do something like:
var features = vector_service_port.getSource().getFeatures();
features.forEach(function(feature){
feature.getStyle().getText().setFont('your desired font');
});
I'd like to have features in a vector source layer that each have an icon, text, AND a line. I can get the icon and text to display but I can't get a line to draw. Using a different geometry I can get a line with a label to draw but no icon.
Is this possible without creating another feature? What geometry should I use for the feature?
Here's the code I'm using to draw an icon with text:
feature.setGeometry(new ol.geom.Point(
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')
));
feature.setStyle([
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1.0,
scale: 0.75,
src: 'res/ship_a_flash.png',
rotation: 30.0
})
}),
new ol.style.Style({
text: new ol.style.Text({
text: feature.text,
font: 'bold 20px Times New Roman',
offsetY: -25,
fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
stroke: new ol.style.Stroke({color: 'rgb(255,255,255)', width: 1})
})
})
]);
So now I want to add a single line from the first point. I realize I need to add another point to the geometry so I tried MultiPoint and LineString like below.
feature.setGeometry(new ol.geom.MultiPoint([
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([lon+1, lat+1], 'EPSG:4326', 'EPSG:3857')]
));
feature.setStyle([
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1.0,
scale: 0.75,
src: 'res/ship_a_flash.png',
rotation: 30.0
})
}),
new ol.style.Style({
text: new ol.style.Text({
text: feature.text,
font: 'bold 20px Times New Roman',
offsetY: -25,
fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
stroke: new ol.style.Stroke({color: 'rgb(255,255,255)', width: 1})
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(0,0,0)',
width: 2,
})
})
]);
I was hoping that the first point would be used for the Icon and Text and the 2 points would be used for the Stroke. With MultiPoint, the feature (icon and text) are drawn twice - once at each point in the geometry. With LineString, a line and text is drawn between the 2 points but the icon is not drawn.
It seems like I can either have an icon or a line in the feature, not both.
You could do the following: Use a geometry collection which contains a point and a line. Then use a StyleFunction which gets the point and the line and returns two separate styles for them:
var iconFeature = new ol.Feature({
geometry: new ol.geom.GeometryCollection([
new ol.geom.Point([0, 0]),
new ol.geom.LineString([[0,0], [1E6, 1.5E6]])
]),
...
});
var styleFunction = function(feature, resolution) {
var geometries = feature.getGeometry().getGeometries();
var point = geometries[0];
var line = geometries[1];
var iconStyle = new ol.style.Style({
geometry: point,
image: ...,
text: ...
});
var lineStyle = new ol.style.Style({
geometry: line,
stroke: ...
});
return [iconStyle, lineStyle];
};
http://jsfiddle.net/p8tzv9ms/11/