2 votes

Pourquoi le rayon de mon cercle dessiné avec Open Layers est-il énorme?

Je suis en train d'essayer de dessiner un cercle autour d'un ensemble de coordonnées avec un rayon en mètres en utilisant OpenLayers 7. Le centre du cercle est correct, mais le rayon se révèle être environ 10^5 fois plus grand que prévu.

Par exemple, quand je dessine un cercle avec un rayon de 10m, j'obtiens une énorme zone :

énorme zone

au lieu du petit cercle de la taille d'une rue attendu :

petit cercle

Voici un exemple :

        class Map {
            map

            constructor(on, initialCoordinate) {
                const { Map, View } = ol
                const { Tile } = ol.layer
                const { useGeographic } = ol.proj
                const { OSM } = ol.source
                const { Fill, Style, Stroke, Text } = ol.style

                // Initialiser la cible
                const target = document.getElementById(on)
                target.coordinate = initialCoordinate

                // Nous travaillons avec des coordonnées de carte plutôt que des coordonnées de tuiles
                useGeographic()

                // Calques
                // L'indicateur de la position que l'utilisateur a sélectionnée
                const pointLayerSource = new ol.source.Vector({ features: [] })
                const pointLayer = new ol.layer.Vector({
                    source: pointLayerSource,
                })

                // La carte elle-même, provenant de Open Street Map
                const tilesLayer = new Tile({ source: new OSM() })

                // Créer le widget de la carte
                this.map = new Map({
                    layers: [tilesLayer, pointLayer],
                    view: new View({
                        center: [-49.0766336, -26.8992512],
                        zoom: 12,
                        maxZoom: 19,
                    }),
                    target,
                })

                if (initialCoordinate) {
                    // Ajouter une épingle en tant que objet pour que l'emplacement sélectionné soit visible sur la carte
                    const feature = new ol.Feature({
                        geometry: new ol.geom.Point(initialCoordinate),
                    })
                    pointLayerSource.addFeature(feature)
                    this.center(initialCoordinate)
                }

                // Lier cet objet à la cible
                target.map = this
            }

            center(at) {
                this.map.getView().animate({
                    center: at,
                    zoom: 18,
                })
            }

            drawCircle(center, radius) {
                const map = this.map
                const circle = new ol.geom.Circle(center, radius)
                const circleFeature = new ol.Feature({
                    geometry: circle,
                })
                // Source et couches vectorielles
                const vectorSource = new ol.source.Vector({
                    projection: map.getView().getProjection(),
                    features: [circleFeature],
                })
                const vectorLayer = new ol.layer.Vector({
                    source: vectorSource,
                })
                map.addLayer(vectorLayer)
                this.center(center)
            }
        }
        const map = new Map('map')
        const hugeCircle = map.drawCircle([-49.0766336, -26.8992512], 10)
        const expectedCircle = map.drawCircle([-49.0766336, -26.8992512], 10 * 1e-5)

J'ai essayé de transformer le rayon pour tenir compte de la projection et autres comme suggéré sur cette question et des questions similaires : comment dessiner un cercle avec un rayon dans openlayers. Cependant, cela n'a fait aucune différence sur le résultat final.

2voto

adolfohw Points 41

Comme suggéré par Mike (merci !), en appelant la fonction useGeographic, le cercle est dessiné avec le rayon en degrés. En ajustant la géométrie de

new ol.geom.Circle(center, radius)

à

new ol.geom.Circle(center, radius / ol.proj.Units.METERS_PER_UNIT.degrees)

le problème est résolu.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X