0

I have three layers on my map. Two are from a WMS service (orthophoto and green linestrings) and one is vector layer (points - yellow labels) with GeoJSON source:

OL3Source = new ol.source.GeoJSON({
  //SRID: 102067
  'url': mapp['maprouter']+'?act=get_layer_data&layer='+layer_id+url_params
});

The GeoJSON looks like this (there are 3 times 2 same points - it's an issue in our database):

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-642906.776502149,-1040547.16261086]},"properties":{"feature_data_getter_route":"get_cf_data_overview","feature_data_container":"popup","layer_id":"celni_fotky.overview","id":2}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-647061.5440096,-1036457.97874901]},"properties":{"feature_data_getter_route":"get_cf_data_overview","feature_data_container":"popup","layer_id":"celni_fotky.overview","id":1}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-642906.776502149,-1040547.16261086]},"properties":{"feature_data_getter_route":"get_cf_data_overview","feature_data_container":"popup","layer_id":"celni_fotky.overview","id":7}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-647061.5440096,-1036457.97874901]},"properties":{"feature_data_getter_route":"get_cf_data_overview","feature_data_container":"popup","layer_id":"celni_fotky.overview","id":6}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-642906.776502149,-1040547.16261086]},"properties":{"feature_data_getter_route":"get_cf_data_overview","feature_data_container":"popup","layer_id":"celni_fotky.overview","id":12}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-647061.5440096,-1036457.97874901]},"properties":{"feature_data_getter_route":"get_cf_data_overview","feature_data_container":"popup","layer_id":"celni_fotky.overview","id":11}}]}

The label is set as follows:

OL3Layer = new ol.layer.Vector({
            source: OL3Source,
            visible: true,
            style: styles.get(layer_id)
        });

where

new ol.style.Style({
 image: new ol.style.Icon(({
   anchor: [0.5, 1.5],
   anchorXUnits: 'fraction',
   anchorYUnits: 'fraction', 
   src: 'images/map/photo-marker.png'
 }))
});

and the view is set like this:

view: new ol.View({
 center: ol.extent.getCenter(mapp['CR_feataure'].getGeometry().getExtent()),
 zoom: 8,
 projection: ol.proj.get('EPSG:102067')
})

The projection is enabled like this:

proj4.defs("EPSG:102067", "+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=0 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=570.8,85.7,462.8,4.998,1.587,5.261,3.56 +units=m +no_defs");

The projections are all EPSG::102067. WMS is provided by MapServer. Coordinates for the vector layer are converted on geometry from lat/lon using the following query:

UPDATE cf_metadata SET geom = ST_Transform(ST_SetSRID(ST_MakePoint(degrees(lon),degrees(lat)), 4326),102067);

The problem is that when I zoom in or out of the map. The WMS layers stays fixed in relation to each other but the vector labels are not fixed at the point and are gently sliding away from their position.

Zoomed out:

http://i59.tinypic.com/xgiss2.jpg

Zoomed in:

http://i59.tinypic.com/2u55aon.jpg

Do you have any idea how to fix this?

|improve this question
  • Is your vector data a line, or a Point? And how are you setting a Label? It looks like a Marker from the Images – Devdatta Tengshe Mar 25 '15 at 7:54
  • Can you share a snippet from your GeoJSON and your ol.View configuration? – ahocevar Mar 25 '15 at 8:19
  • I edited the question. The vector layer is layer of 2D points labeled by the yellow icon. – khamyl Mar 25 '15 at 9:32
  • If you do ol.proj.get('EPSG:102067' ); on the console, does it return undefined? If so, you need to define 'EPSG:102067'. Either by using proj4js, or by using new ol.proj.Projection('EPSG:102067', {...}); – ahocevar Mar 25 '15 at 9:56
  • No the projection is set up correctly. It returns an object with projection info: code_:"EPSG:102067".. etc. – khamyl Mar 25 '15 at 10:12
1

Without seeing more of your code, it is hard to answer this question. I created a working JSFiddle with your GeoJSON data and a public WMS server: http://jsfiddle.net/nc7m8460/1/. That should help you to fix your application. My guts feeling says that something might be wrong with your projection definition. If you're not using proj4js (which you don't need, because you're not transforming any coordinates it seems), it should look like this:

ol.proj.addProjection(new ol.proj.Projection({
    code: 'EPSG:102067',
    units: 'm',
    extent: [-1104196.9818, -1398626.3325, -276590.4283, -758318.1159]
}));
|improve this answer
  • What part of code you would need to see? Btw, I use proj4js. But if I replaced the proj4JS with ol.proj.addProjection() with your data .. it was still sliding away :/ – khamyl Mar 25 '15 at 11:44
  • Try to go one step at a time. Start from my JSFiddle and replace bit by bit with your app code. You can also try to create a JSFiddle that shows your issue. – ahocevar Mar 25 '15 at 12:25
0

Well the problem was the setting of the style and the fact, that the point was not exactly on the line, so it was weirdly sliding to its exact position as zoomed. Also changing the style to pixels helped. Fraction units [0.5, 1] worked exactly the same. I checked against other points without style. 

          new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [16, 37],
                anchorXUnits: 'pixels', //fraction|pixels
                anchorYUnits: 'pixels', //fraction|pixels
                src: 'images/map/photo-marker.png'
            }))
          });
|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.