GeoJSON vector layer labels are not fixed in respect to WMS layers

Question

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:

Zoomed in:

Do you have any idea how to fix this?

Answer 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]
}));

Answer 2

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'
            }))
          });