Beginner questions: squashed map, drawing circles, displaying circles

[bpolaszek]

Hello there,

Thank you for your awesome library!
I'm not sure whether or not it's the right place to ask for help (maybe it could be relevant to enable the "Discussions" feature on that repository?) but I have a few questions that documentation doesn't answer me.

First of all, on all examples, the maps look "squashed". After further investigation using the EPSG:4326 projection seems to be the guilty, as using the default one fixes it. But then, the whole coordinates system is f*cked up, as you have to translate all coordinates to EPSG:3857, which is really annoying. Is it the right thing to do or did I miss something?

Secondly, I managed to draw a circle on the map, but for my use case, I wish that starting to draw a second circle removes the 1st one. Do you have any clue on how to achieve this?

Lastly, when you want to show a circle on the map as described here, zooming in or out doesn't change the size of the circle, which (in my use case of outlining geographical areas) should scale with the zoom, but it remains fixed. I didn't figure out how to handle this, except converting the circle to a polygon then displaying it this way, but that's really overkill / uncomfy. Any ideas?

Thanks!
Ben

[MelihAltintas]

1. You are using openstreetmap tile server. Default projection of this tile server EPSG:3857 and you decided to use 4326 because of this our library makes reprojection and transforms EPSG:3857 to EPSG:4326. ol-source-osm has reprojectionErrorThreshold prop. This prop means Default: 0.5 Maximum allowed reprojection error (in pixels). Higher values can increase reprojection performance but decrease precision. So you can increase the reprojectionErrorThreshold value for precision.

        <ol-source-vector ref="cities" url="https://raw.githubusercontent.com/alpers/Turkey-Maps-GeoJSON/master/tr-cities-airports.json" :format="geoJson" :projection="projection">

            <ol-interaction-modify v-if="drawEnable" @modifyend="modifyend" @modifystart="modifystart">

            </ol-interaction-modify>

            <ol-interaction-draw v-if="drawEnable" :type="drawType" @drawend="drawend" @drawstart="drawstart">

            </ol-interaction-draw>

            <ol-interaction-snap v-if="drawEnable" />

        </ol-source-vector>

        const drawedCircle = ref()
        const cities = ref(null);
        const drawend = (event) => {

            if(drawedCircle.value == undefined){
                 drawedCircle.value = event.feature;
            }else{
                cities.value.source.removeFeature(drawedCircle.value);
                drawedCircle.value = event.feature;
            }
           
        }

3. You should use in overrideStyle function you should get resolution and change the radius of circle.

https://stackoverflow.com/questions/31024715/ol3-openlayers3-change-radius-of-circle-when-zoomed

[bpolaszek]

Hi @MelihAltintas - thank you for taking the time!
It works for the circle, I'll take a look at the other points ASAP.

Thanks! 🙏

[MelihAltintas]

If you like the lib, you can give a star👍

[bpolaszek]

Consider it done 👍

[bpolaszek]

Well, I tried several values for reprojectionErrorThreshold, without success. That's weird because I tried using the "raw" openlayers library to compare, and I don't have this squashed effect with the latter.

Consider I want to center a map on the Eiffel Tower (lon: 2.294459840610045, lat: 48.85849713650979) with a zoom of 15.

With vue3-openlayers

Code

<template>
  <ol-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
    <ol-view ref="view" :center="[2.294459840610045, 48.85849713650979]" :zoom="15" projection="EPSG:4326" />
    <ol-tile-layer>
      <ol-source-osm :reprojection-error-threshold="0.1" />
    </ol-tile-layer>
  </ol-map>
</template>

Result

With openlayers

Code

(From Openlayers Quickstart)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<div id="map" style="height: 400px; width:750px;"></div>
<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM(),
            }),
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([2.294459840610045, 48.85849713650979]),
            zoom: 15,
        }),
    });
</script>

Result

I told you earlier that I found the solution to use the EPSG:3857 projection instead then translate all coordinates, and it seems to work well, except that when I draw a zone (a circle, for instance), the radius lacks of precision (drawn circle appears smaller than the actual covered zone), so my solution doesn't look as a reliable one.

Any clue?