2
Примечание. Проблема не относится к Листовке, но ГИС вообще.Как точно преобразовать метры в долготу или широту при рисовании круга
Я пытаюсь нарисовать дугу на карте. У меня есть функция для создания точек многоугольника, и она работает, например, на холсте, но не на Lng, карте Lat.
Проблема в том, что я не могу понять, как преобразовать внутренний/внешний радиус из Метров в градусы (как в lng/lat), то, что я пробовал до сих пор, выглядит более эллиптическим, чем круговым.
Как точно преобразовать счетчики в долготу или широту в любой точке земли (кроме полюсов)?
Вот что я пробовал (работает) на холсте.
$(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>И вот что я пытался (dosn't хорошо работать) на карте Листовка.
\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>
Спасибо за ответ, я читаю через ваши ссылки. – Aus
Это также сработало http://jsfiddle.net/czguhjrx/7/ – Aus
. Посмотрите на мое решение ниже и посмотрите, насколько это точно для радиуса круга/дуги менее 100 км? – Aus