Невозможно получить правильный радиус круга в OpenLayers - PullRequest
Новая
       24

Невозможно получить правильный радиус круга в OpenLayers

0 голосов
/ 31 марта 2020

У меня есть jsfiddle ниже, где я пытаюсь создать круг радиусом 1600 метров. Я не думаю, что у меня правильная проекция, потому что этот круг определенно меньше 1600 метров. Измерения на Google Maps, я думаю, что это около 1000 метров вместо этого. Что мне нужно сделать, чтобы исправить это, пожалуйста>

Спасибо. 

var centerLongitudeLatitude = ol.proj.fromLonLat([-1.733014, 51.982989]);
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 1600))]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ]
});


var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-1.733014, 51.982989]),
    zoom: 14
  })
});
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" class="map"></div>

Ответы [ 2 ]

1 голос
/ 31 марта 2020

Благодаря Майку и Cabesuon у меня есть решение, опубликованное здесь для будущих читателей. 

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([-1.733014, 51.982989]),
    zoom: 14
  })
});

var centerLongitudeLatitude = ol.proj.fromLonLat([-1.733014, 51.982989]);
var viewProjection = map.getView().getProjection();
var pointResolution = ol.proj.getPointResolution(viewProjection , 1, centerLongitudeLatitude );
var radius = 1600 / pointResolution;
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, radius))]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ]
});

map.addLayer(layer);
html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" class="map"></div>
0 голосов
/ 31 марта 2020

У вас есть несоответствие между SRS векторного слоя (EPSG:4326), центром и кругом (EPSG:3857). Вам нужно одно из вышеперечисленного, а не оба.

Попробуйте создать слой без указания projection, он будет использовать проекцию вида по умолчанию, в данном случае EPSG:3857 (из-за OSM).

ОБНОВЛЕНИЕ:

После построения фрагмента ниже, я понимаю, что предлагаемое изменение не влияет на результат, не знаю, почему именно сейчас, поэтому я предложил использовать Polygon.circular в качестве альтернативы. 

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Circle features</title>
  </head>
  <body>
    <div id="map" class="map"></div>
		<script type="text/javascript">
		// features
    var radius = 1600;
    var center = [-1.733014, 51.982989]
    var fcircle = new ol.Feature({
      geometry: new ol.geom.Circle(
        ol.proj.fromLonLat(center),
        radius
      )
    });
    fcircle.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2
      })
    }));
    var fcircular = new ol.Feature({
      geometry: ol.geom.Polygon.circular(center, radius, 64).transform('EPSG:4326', 'EPSG:3857')
    });
    fcircular.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 1
      })
    }));
    // map
    var view = new ol.View({
      center: ol.proj.fromLonLat(center),
      zoom: 14
    });
    var map = new ol.Map({
			target: 'map',
			layers: [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				}),
        new ol.layer.Vector({
          source: new ol.source.Vector({
            features: [fcircle, fcircular]
          })
        })
			],
			view
		});
    </script>
  </body>
</html>
...