Как программно добавить круг с радиусом, длиной и широтой в Openlayers? - PullRequest
Новая
       53

Как программно добавить круг с радиусом, длиной и широтой в Openlayers?

0 голосов
/ 26 июня 2018

Я пытаюсь добавить круг с latitude, longitude и radius (в метрах или километрах) при нажатии кнопки.

Я могу добавить круг при нажатии кнопки, но он принимает радиус как число между 1-25. Мне нужно дать радиус в метре

Примечание: когда я рисую круги жестами пальцев, я могу получить их радиус в метрах с помощью этого кода 

var radius = geometry.getRadius();

Мой рисунок с функцией жестов пальцев: 

function addInteraction() {
  draw = new ol.interaction.Draw({
    source: source,
    type: shapetype,
    freehand: true
  });
  map.addInteraction(draw);

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Чтобы добавить круг на карту: 

var centerLongitudeLatitude = ol.proj.fromLonLat([longitude, latitude]);
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 4000))]
  }),
  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);

подтверждение концепции скрипки

screenshot of resulting map

фрагмент кода: 

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([-117.1610838, 32.715738]),
    zoom: 12
  })
});
var centerLongitudeLatitude = ol.proj.fromLonLat([-117.1610838, 32.715738]);
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    // radius = 4000 meters
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 4000))]
  }),
  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 href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<div id="map" class="map"></div>
0 голосов
/ 26 июня 2018

Вам просто нужно сделать следующее 

var coordsLongitudeLatitude = [1, 44]
# Convert to map coordinates (usually Spherical Mercator also named EPSG 3857)
var center = ol.proj.fromLonLat(coordsLongitudeLatitude)
# Create Circle geometry, 4000 = distance in meters
var circleGeometry = new ol.geom.Circle(center, 4000);
# If you want/need to transform it to a polygon
var polygonFromCircleGeometry = ol.geom.Polygon.fromCircle(circleGeometry);
...