Hinweis: Das Problem ist nicht spezifisch für Leaflet, sondern allgemein für GIS.So konvertieren Sie Meter in Längen- oder Breitengrade beim Zeichnen eines Kreises
Ich versuche, einen Bogen auf einer Karte zu zeichnen. Ich habe eine Funktion, um die Polygonpunkte zu erzeugen, und es funktioniert zum Beispiel auf einer Leinwand, aber nicht auf Lng, Lat Karte.
Das Problem ist, dass ich nicht herausfinden kann, wie man den inneren/äußeren Radius von Metern in Grad umwandelt (wie in lng/lat), was ich bisher versucht habe, sieht elliptischer als kreisförmig aus.
Wie kann man Meter an jedem Punkt der Erde (mit Ausnahme der Pole) in Längen- oder Breitengrade umrechnen?
Hier ist, was ich versucht (funktioniert) auf Leinwand.
$(document).ready(function() {
var d_canvas = document.getElementById('canvas');
var c2 = d_canvas.getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
var fromDeg = 0;
var toDeg = 90;
var fromRad = getAngle(fromDeg);
var toRad = getAngle(toDeg);
var segments = 100;
var step = getAngle(toDeg-fromDeg)/segments;
var x = 250;
var y = 250;
var outR = 250;
var inR = 230;
c2.moveTo(x+(Math.sin(fromRad)*inR),y-(Math.cos(fromRad)*inR));
//c2.moveTo(x,y);
for (var i = fromRad; i<=toRad; i=i+step){
\t c2.lineTo(x+(Math.sin(i)*inR),y-(Math.cos(i)*inR));
}
//c2.closePath();
for (var i = toRad; i>=fromRad; i=i-step){
\t c2.lineTo(x+(Math.sin(i)*outR),y-(Math.cos(i)*outR));
}
c2.lineTo(x+(Math.sin(fromRad)*inR),y-(Math.cos(fromRad)*inR));
//c2.closePath();
c2.stroke();
});
function getAngle(deg){
\t var val = 2*(deg/360);
\t return Math.PI*val;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>Und hier ist, was ich versucht (dosn't Arbeit gut) auf der Karte Prospekt.
\t \t var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
\t \t osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
\t \t osm = L.tileLayer(osmUrl, {
\t \t maxZoom: 18,
\t \t attribution: osmAttrib
\t \t });
\t \t // initialize the map on the "map" div with a given center and zoom
\t \t var map = L.map('map').setView([59.56667, 150.80000], 12).addLayer(osm);
\t \t // Script for adding marker on map click
\t \t L.polygon(getPolygon()).addTo(map);
\t \t function getPolygon() {
\t \t var fromDeg = 0;
\t \t var toDeg = 90;
\t \t var fromRad = getAngle(fromDeg);
\t \t var toRad = getAngle(toDeg);
\t \t var segments = 100;
\t \t var step = getAngle(toDeg - fromDeg)/segments;
\t \t var y = 150.84229;
\t \t var x = 59.55416;
\t \t var outR = 0.05; // <------ should be dynamic?
\t \t var inR = 0.025; // <------ this also?
\t \t var polygon = [];
\t \t polygon.push([x + (Math.sin(fromRad) * inR), y + (Math.cos(fromRad) * inR)]);
\t \t for (var i = fromRad; i <= toRad; i = i + step) {
\t \t polygon.push([x + (Math.sin(i) * inR), y + (Math.cos(i) * inR)]);
\t \t }
\t \t //c2.closePath();
\t \t for (var i = toRad; i >= fromRad; i = i - step) {
\t \t polygon.push([x + (Math.sin(i) * outR), y + (Math.cos(i) * outR)]);
\t \t }
\t \t polygon.push([x + (Math.sin(fromRad) * inR), y + (Math.cos(fromRad) * inR)]);
\t \t return polygon;
\t \t }
\t \t function getAngle(deg) {
\t \t var val = 2 * (deg/360);
\t \t return Math.PI * val;
\t \t }#map {
height: 500px;
width: 80%;
}<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />
<script src="http://unpkg.com/leaflet-arc/bin/leaflet-arc.min.js"></script>
<div id="map"></div>
Danke für die Antwort, ich bin durch Ihre Links zu lesen. – Aus
Dies funktioniert auch http://jsfiddle.net/czguhjrx/7/ – Aus
Würden Sie meine Lösung unten betrachten und sehen, ob dies für Kreis/Bogenradius unter 100km genau ist? – Aus