如何在Openlayers中根据地图上的点创建一个圆

Question

我正在尝试根据 point/coordinate 用户点击创建一个圈子。我知道如何创建一个点并找到一个函数来根据该点创建一个圆（如 buffer/range 环），但它似乎只适用于 x,y 点 (0,0)。我尝试使用 ol.proj.transform 将我的经度和纬度坐标转换为 X 和 Y，但它根本没有呈现一个圆。

这就是我要创建的

function createCircle(circleCenterX, circleCenterY, circleRadius, pointsToEnd) {
            let angleToAdd = 360 / pointsToEnd;
            let coords = [];
            let angle = 0;
            for (let i = 0; i < pointsToEnd; i++) {
                angle += angleToAdd;
                let coordX = circleCenterX + circleRadius * Math.cos(angle * Math.PI / 180);
                let coordY = circleCenterY + circleRadius * Math.sin(angle * Math.PI / 180);
                coords.push([coordX, coordY]);
            }
            return coords;
        }

        function addMarker(coordinates) {
            console.log(coordinates);
            var marker = new ol.Feature(new ol.geom.Point([708683.3598450683, 1850098.1965979263]));
            marker.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 5,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                })
            }));
            vectorSource.addFeature(marker);
        }

        function addCircle(coords) {
            // var lonlat1 = ol.proj.transform([coords[0], coords[1]], 'EPSG:4326','EPSG:3857');
            // console.log('var lonlat1',lonlat1)
            var circleCoords = createCircle(708683.3598450683, 1850098.1965979263, 20, 180);
            console.log(circleCoords);
            var polygon = new ol.geom.Polygon([circleCoords]);
            polygon.transform('EPSG:4326', 'EPSG:3857');
            polygon = new ol.Feature(polygon);
            vectorSource.addFeature(polygon);
        }

jsfiddle

Answer 1

你的问题是 addMarker 函数在 EPSG:3857 投影中获取坐标，addCircle 函数在 EPSG:4326 投影中获取坐标。

如果要传入相同的坐标，则必须使它们保持一致。

[708683.3598450683, 1850098.1965979263] 没有显示圆圈，因为它远离地图（纬度的最大值为 90 度）。

addCircle(ol.proj.toLonLat([708683.3598450683, 1850098.1965979263]));
addMarker([708683.3598450683, 1850098.1965979263]);

updated fiddle with the same center (but in different projections)

代码片段：

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([0, 0]),
    zoom: 3
  })
});
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: []
  }),
});
map.addLayer(layer);
var vectorSource = layer.getSource();

function createCircle(circleCenterX, circleCenterY, circleRadius, pointsToEnd) {
  let angleToAdd = 360 / pointsToEnd;
  let coords = [];
  let angle = 0;
  for (let i = 0; i < pointsToEnd; i++) {
    angle += angleToAdd;
    let coordX = circleCenterX + circleRadius * Math.cos(angle * Math.PI / 180);
    let coordY = circleCenterY + circleRadius * Math.sin(angle * Math.PI / 180);
    coords.push([coordX, coordY]);
  }
  return coords;
}

function addMarker(coordinates) {
  console.log(coordinates);
  var marker = new ol.Feature(new ol.geom.Point(coordinates));
  marker.setStyle(new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'red'
      })
    })
  }));
  vectorSource.addFeature(marker);
}

function addCircle(coords) {
  // var lonlat1 = ol.proj.transform([0, 0], 'EPSG:4326','EPSG:3857');
  // console.log('var lonlat1',lonlat1)
  var circleCoords = createCircle(coords[0], coords[1], 20, 180);
  console.log(circleCoords);
  var polygon = new ol.geom.Polygon([circleCoords]);
  polygon.transform('EPSG:4326', 'EPSG:3857');
  polygon = new ol.Feature(polygon);
  vectorSource.addFeature(polygon);
}

addCircle(ol.proj.toLonLat([708683.3598450683, 1850098.1965979263]));
addMarker([708683.3598450683, 1850098.1965979263]);

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
<link rel="stylesheet" type="text/css" href="https://openlayers.org/en/v6.4.3/css/ol.css" />
<div id="map" class="map"></div>

如何在Openlayers中根据地图上的点创建一个圆

How to create a circle based on the point on the map in Openlayers

javascript

proximity

openlayers