Wenden Sie "vector" auf Point oder LatLng in Leaflet

Question

Zeichnung z. Ein Umkreis von 4 km auf einer Leaflet-Karte ist todschick. Das Markieren dieses Kreises (ohne Plugins) ist jedoch nicht mehr so ​​einfach. Die folgende Geige funktioniert etwas, aber das 4km Label tanzt um, wie Sie Zoomstufen ändern:

https://jsfiddle.net/svoop/y1jqoxu7/

Jede Idee, wie ich das verbessern könnte?

(Bitte machen Sie keine Plugins, wenn sie nicht sehr gut gepflegt und bereit für Leaflet 1.0, danke!)

Answer 1

Das Etikett in Ihrem Beispiel versetzt ist, weil Sie Meter/Pixel in einer unzuverlässigen Weise kalkulieren. Es gibt keine Garantie, dass centerLatLng genau in der Mitte eines Pixels auf der Karte liegt. In der Tat ist es fast garantiert nicht zu, so map.containerPointToLatLng([centerPoint.x, centerPoint.y]) wird nicht die gleichen Koordinaten wie centerLatLng, und Ihre Entfernungen werden um so viel wie 50%. Sie werden ein zufriedenstellendes Ergebnis erhalten, indem Sie Ihre metersPerPixelY wie diese Berechnung:

metersPerPixelY = map.containerPointToLatLng([centerPoint.x, centerPoint.y + 1]).distanceTo(map.containerPointToLatLng([centerPoint.x, centerPoint.y])); 

Es wird jedoch noch einige Fehler mit dieser Methode, da der wahre Meter/Pixel mit der geographischen Breite variiert. Mein Vorschlag wäre, leaflet-geodesy zu verwenden, um ~ zirkuläre Polygone zu erstellen und Ihre Beschriftungen basierend auf den Grenzen dieser Polygone zu platzieren. L.circle Objekte bieten keine Methode, um ihre Grenzen zu bekommen, also ist das Plugin notwendig. Im Folgenden wird ein 144-seitiges Polygon (fein genug in jeder Größenordnung sehen circular) erstellen und platzieren Sie ein Label am nördlichen Rand des Kreises:

var circ = LGeo.circle(centerLatLng, radiusMeters, {parts: 144}).addTo(map); 
var labelLatLng = [circ.getBounds().getNorth(),centerLatLng[1]]; 
var labelUp = L.divIcon({ className: 'four', html: '4km' }); 
L.marker(labelLatLng, { icon: labelUp }).addTo(map); 

Dies ist sicherlich nicht der einzige Weg, um das Etikett Standort zu erhalten Sie wollen, aber es ist relativ einfach, und das Plugin funktioniert gut mit Leaflet 1.0. Hier ist ein Beispiel Geige:

http://jsfiddle.net/nathansnider/a022bL4q/