I know this question was discussed at many other topics. But I still not able to find a solution for my issue. None of receipts are works for me.
An issue is very simple. I have a features at my Openlayers3 (v3.17.1) map. I should be able to zoom to any of feature I want.
Before zoom:
After zoom:
As I mentioned I use version v3.17.1.
var features = myLayer.getSource().getFeatures();
var myFirstFeature = features[0];
Option 1:
map.zoomToExtent(feature.geometry.getBounds());
Option 2:
var bounds = f.geometry.getBounds().clone();
this._map.zoomToExtent(bounds,false);
there are many ways to do this, for example if you want to zoom to only one feature and you want to define the level of zoom you can use this :
var ext=feature.getGeometry().getExtent();
var center=ol.extent.getCenter(ext);
map.setView( new ol.View({
projection: 'EPSG:4326',//or any projection you are using
center: [center[0] , center[1]],//zoom to the center of your feature
zoom: 12 //here you define the levelof zoom
}));
there is another way in which you can zoom to more that just one feature :
map.getView().fit(extent, map.getSize());
assuming that in extent you have the extent of your feature or features
Related
I'm a newbie using OpenLayers 3 and having the following problem:
I've created a custom control (select box; see image) where I would like to add 3 predefined scale options (see code after image).
let option2 = new Option('1 : 150.000', '2183910.7260319907', false, false);
option2.id = 'opt2';
select.appendChild(option2);
let option3 = new Option('1 : 30.000', '2183910.7260319907', false, false);
option3.id = 'opt3';
select.appendChild(option3);
let option4 = new Option('1 : 15.000', '2183910.7260319907', false, false);
option4.id = 'opt4';
select.appendChild(option4);
From other sources I've found that I "simply" need to pass the correct value (above it would be 2183910.7260319907 for the 1:2M scale) to the respective scale option and then I've already implemented the set resolution function in order to update the map.
Question: How can I now calculate that particular value (I don't even know what it represents...) for the scales of 1:150.000, 1:30.000 and 1:15.000?
Thank you so much in advance & if something is not clear, I'm happy to clarify and provide more code/screenshots if necessary.
Cheers :)
In web cartography, we work with resolutions, not scales. Resolution simply means map units per screen pixel.
If you want to apply the concept of paper map scales, you'll need to make assumptions about the resolution of the user's screen, which is usually expressed in dots per inch (dpi). Then you can calculate the scale like this:
var inchesPerMeter = 39.3700787;
var dpi = 96;
function getResolutionForScale(scaleDenominator) {
return scaleDenominator / inchesPerMeter / dpi;
}
To use this, simply use the scale denominator as value in your options. So e.g. 2000000 for the "1 : 2.000.000" scale. Then it is easy to apply the scale to the map:
map.getView().setResolution(getResolutionForScale(scaleDenominator));
Side note if you want to get super accurate: projections like Web Mercator have different resolutions for different latitudes. To accommodate for that, you could use ol.proj.getPointResolution() to get the true resolution for a specific location on the map, and adjust the result from getResolutionForScale() accordingly:
var view = map.getView();
view.setResolution(ol.proj.getPointResolution(
view.getProjection(),
getResolutionForScale(scaleDenominator),
view.getCenter());
I have several markers in a map, I want to color the area inside the maps of a different color. I've tried L.multiPolygon , L.polygon, L.rectangle, but nothing does but I want. I guess my only option is to calculate the boundings of all the markers and draw the polygon based on these points, right ?
Here the code
<c:forEach var="marker" items="${markers}" varStatus="rowIndex">
var marker${rowIndex.index} = L.marker([${marker.lat},${marker.lng}],{icon: yellowIcon,title: '${marker.title}'}).addTo(mymap)
.bindPopup( "${marker.HTMLMarkerPopupCode}").openPopup();
storeCoordinate(${marker.lat}, ${marker.lng}, polygonPoints);
</c:forEach>
var polygon = L.polygon(polygonPoints);
polygon.setStyle({fillColor: '#0000FF'});
polygon.setStyle({color: 'red'});
polygon.setStyle({weight:1});
polygon.setStyle({fillOpacity: 0.5});
mymap.addLayer(polygon);
I would like to achieve something similar to this picture:
You can use L.Polygon as well.
Just do something like this:
var polygon = L.polygon([
marker1,
marker2,
marker3,
], {
fillColor: '#f03' // My custom color here
}
).addTo(mymap);
Not sure exactly what you are trying to achieve?
You might be interested in computing the Convex Hull of your markers area.
In that case, you should be able to find some JavaScript implementations on the Internet. E.g., you can look at how it is done in Leaflet.markercluster plugin: https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.QuickHull.js
EDIT:
As for creating Convex Hull, you could also use Turf, in particular turf.convex.
Turf also provides you with plenty other functionalities, including turf.concave.
I have a few geometries in map, the point is in polygon, I can highlight the polygon, but the point cannot be highlighted because of polygon enclose it. In new openlayers3 ol.featureoverlay has been removed, If have some ways to solve it, here is an example.
I updated that plunker to this fiddle to work against newer OL versions. It is not ready yet but perhaps it does what you need.
Basically I get a coefficient by comparing pointer coordinate with the coordinate of the closest feature. If this coefficient is short enough than add the feature to a ol.Collection.
To get the selected feature (for now, see https://github.com/openlayers/ol3/issues/4459) you can listen to collection changes:
collection.on('change:length', function(evt) {
if (collection.getLength() > 0) {
var feature = hoverInteraction.getFeatures().item(0);
// can be also
//var feature = collection.item(0);
}
});
I've spent a lot of time realizing this:
var view = new ol.View({
//this doesn't work
//center: [-73.979681,40.7033127],
//this works
center: ol.proj.transform([-73.979681,40.7033127], 'EPSG:4326', 'EPSG:3857'),
zoom: 8
});
I've found on OpenLayer's quickstart how to transform a projection from one to another. However, that isn't very clear on another tutorials. I'm not used to those specific projection codes, neither which layer uses which.
Is there a list where I can know which projection code a layer uses?
By default, when no projection is specified in the options passed to the ol.View constructor, the view projection is Web Mercator (whose EPSG code is EPSG:3857).
You can do map.getView().getProjection() to get the view projection. And you call getCode on the returned projection object to get its code.
To transform coordinates from lon/lat to Web Mercator you need to use the following:
var coords = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
OpenLayers v3.5.0, due next week, will make this a bit more convenient, with a fromLonLat function.
Is it possible to make the symbolizer of a feature be a polygon?
Openlayers 3 has a ol.style.Circle and ol.style.RegularShape symbolizers for example. Is there something equivalent to a hypothetical ol.style.Polygon? Whereby you could make a dynamic symbolizer from multiple points?
The reason I want to do this is because I have markers on my map that are dynamically shaped depending on the data for that marker. It is possible to simply draw a ol.geom.Polygon at each point, but then they are not zoom independent. I want to have markers that are zoom independent, meaning that their size on the screen does not change when I zoom in or out.
And just to be clear, using raster images (for example in ol.style.Icon) is not possible. There are way too many markers in way too many shapes and colours in my project.
Yes, this is possible. ol.style.Style takes a geometry argument that you can use to overwrite the geometry that is used to render a feature.
var style = function(feature, resolution) {
// construct the polygon taking the resolution into account
var polygon = new ol.geom.Polygon(...);
return [
new ol.style.Style({
geometry: polygon,
stroke: ...
fill: ...
}),
];
};
Also see this question: Drawing a Speed Leader line in OpenLayers