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.
Related
I have a GeoJson from brazil which is a more detailed version of the official HighMaps Brazil map. In this JSON I have the states divided into its mesoregions.
When I tried to draw a point on top of this GeoJson I got the message telling me that this functionality was only supported with official highmaps maps. Reading the documentation I found out that I should create an object hc-transform on my geojson. I thought it would make sense to use the same hc-transform used by the official HighMaps Brazil map, and when I did, it kinda works ok: It gives me the the same point with fromLatLonToPoint() method but then when I use the method toPixels() to get the "canvas" position (and draw something on top of it) it gives me different values.
The code Im using is this (it works fine for brazil official highmaps):
let point = chart.fromLatLonToPoint({lat: n.lat, lon: n.long});
let x = chart.xAxis[0].toPixels(point.x, true);
let y = chart.yAxis[0].toPixels(point.y, true);
// Draw the div / point / whatever on the (x, y) position
The GeoJson I am talking about you can find here: https://github.com/Menighin/HighmapsExperiment/blob/master/geo/mesorregiao.json
Checking Highmaps oficial Brazilian map I can see that each polygon also has some highcharts attributes (hc-middle-x, hc-middle-y, etc). Does that make any difference? If not, what am I doing wrong?
EDIT
Turns out my hc-transform doesn't seem to be right as we can see on this fiddle:
http://jsfiddle.net/0vm8a4x3/
If we uncoment the line 8, we can see that the city Belo Horizonte, is not plotted on the right position on the Mesoregion map.
So, how can I get the hc-transform right?
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
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);
}
});
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
I was wondering if there is a way to get the bounding box of not the complete layer, but only the part of the layer that is visible in the current zoom level of the map?
So, I need to get the screen coordinates of the bounding box of the layer drawn on the screen. I could not find a way to achieve this.
EDIT:
Unfortunately this is not solving my problem. This is exactly the point that I got to latest and in some cases it is not working. Since stackoverflow does not allow me to upload images because of my reputation I will try to describe:
Imagine that I have a path which is crossing the screen almost parallel to y axis, however outside the screen it is at least x-axis long. In this case the solution proposed will return min and max screen coordinates for x axis, where it needs to be a short interval that it is crossing the screen. In a way I need the bounding box of the visible part of the layer.
EDIT 2:
Thank you all for your answers. I tried to use "getFeaturesInExtent" function, but I get an error saying: "Uncaught TypeError: undefined is not a function". I am using the latest OpenLayers which is version 3.4.0. I suppose I am getting this error because this function is not implemented in this version.
The way I am using is the following:
var mapExtent = map.getView().calculateExtent(map.getSize());
var features = result.getSource().getFeaturesInExtent(mapExtent);
What kind of solution do you suggest for me? (I tried to use master version downloading ZIP from: https://github.com/openlayers/ol3, but the map did not work in this case.)
Thanks again!
I think the only things what you need is the extent of the view and the extent of the layer and the ol.extent.getIntersection() Function.
You can get the Extent of the current View by f.ex
map.getView().calculateExtent(map.getSize());
The global extent of your layer by
`layer.getExtent()`.
And the intersecting Extent with.
ol.extent.getIntersection(extent1, extent2,opt_extent)
Should return the intersecting extent of the current view and your layer. Be aware that not all mentioned functions are stable.
I found the solution in the following:
var mapExtent = map.getView().calculateExtent(map.getSize());
var intersectedFeatures = [];
for (var i = 0; i < points.length; i++){
if(ol.extent.containsCoordinate(mapExtent, points[i]))
intersectedFeatures.push(points[i]);
}
var visibleLayerExtent = ol.extent.boundingExtent(intersectedFeatures);
Thank you all for the help!