2

I'm rendering some vector features on top of HDPI tiles. The tiles are crystal clear on my HDPI monitor but the vector features are blurry:

enter image description here

Is there a way to make the vector layer "retina" as well?

2

I figured it out:

I was using the image attribute of ol.style.Style rather than setting the geometry attribute. For example, I did this:

new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({color: '#79FF33'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1}),
        snapToPixel: true
    }),
    zIndex: 1
})

When I should have been doing this:

new ol.style.Style({
        geometry: new ol.geom.Circle(feature.getGeometry().getCoordinates(), (resolution * 5)),
        fill: new ol.style.Fill({color: feature.get("timeColor")}),
        stroke: new ol.style.Stroke({color: 'black', width: 50}),
        zIndex: 1
})
  • Did the points remain scale independent? You have rendered the points as circles with 300 map units (I guess in your case meters) radii. I did not experiment with the geometry property of the style object yet, however it wouldn't be logical for me, if the points remained the same size on different scales. – Gabor Farkas Nov 4 '15 at 18:38
  • I just discovered this issue. Nope. I'm going to have to find a different solution. – CaitlinW Nov 4 '15 at 18:54
  • 1
    Updated post. Using a fixed number of units to represent the circle results in the circles increasing in size as the user zooms in. Instead, I simply multiply the resolution variable passed by ol.style.StyleFunction by the number of pixels I want the circle to take up: (resolution * 5) – CaitlinW Nov 5 '15 at 8:12
  • 1
    Additionally, if you don't want the size flicker when zooming in or out, set updateWhileAnimating: true on the vector layer. – CaitlinW Nov 5 '15 at 8:23
  • Sadly, I haven't found a way to similarly style ol.geom.Multipoint yet. – CaitlinW Nov 5 '15 at 9:29

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.