如何检查标记是否在特定圆圈内

Question

我需要帮助来检查标记是否在特定圆圈内。我有一系列圆圈，我必须检查标记是否在里面并获取目标圆圈的信息。我试着打电话给 distanceTo 谁能帮帮我？

...
export class PlacesPage {
  map: Map;
  placesList = [];

  ionViewDidEnter() {
    this.map = new Map("mapId2").setView([41.694941, -8.821054], 13);

    tileLayer("http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", {
      attribution: "cityt3ip.com"
    }).addTo(this.map);

    fetch("./assets/data.json")
      .then(res => res.json())
      .then(json => {
        this.placesList = json.places;
        this.leafletMap();
      });
  }

  leafletMap() {
    for (const place of this.placesList) {
      circle([place.latitude, place.longitude], {
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.5,
        radius: 100
      }).addTo(this.map);
    }

    marker([41.692135, -8.831127], {
      draggable: true,
      autoPan: true
    })
      .addTo(this.map).on('drag', this.masterClick, this);
  }

  masterClick(e: any) {
    console.log(e)
    var d = this.map.distanceTo(e.latlng, circle.getLatLng());
    var isInside = d < circle.getRadius();
    console.log(isInside)
    circle.setStyle({
      fillColor: isInside ? "green" : "#f03"
    });
  }

  ionViewWillLeave() {
    this.map.remove();
  }
}



```

Answer 1

Leaflet 中没有检测标记是否位于圆内的功能。相反，您可以使用 distanceTo 方法来测试一个点是否在圆心的某个半径范围内，结果相同。

isMarkerInsideCircle(markerLatLng, circleCenterLatLng, circleRadius){
    // markerLatLng and circleCenterLatLng must be instance of L.latlng class.
    // you can create an instance like this L.latLng(lat, lng);
    if (markerLatLng.distanceTo(circleCenterLatLng) <= circleRadius){
        return true;
    } else {
        return false;
    }
}

Answer 2

当您将标记拖到圆上时，您似乎想更改圆的样式。

我做了一个 fiddle 来显示这个。我的策略是当标记移动到任何圆上时存储当前圆。

function createCircles() {
  circleCoords.forEach(circ => {
    const ll = L.latLng(circ[0], circ[1]);
    let curCirc = L.circle(ll, {
      radius: 100
    }).addTo(map);
    curCirc.on('mouseover', (evt) => {
      myCircle = evt.target;
    })
  })
}

然后我像这样修改了你的 masterClick 函数：

function masterClick(e) {
  var d = e.latlng.distanceTo(myCircle.getLatLng());
  var isInside = d < myCircle.getRadius();
  myCircle.setStyle({
    fillColor: isInside ? "green" : "#f03"
  });
}

Answer 3

这是我的解决方案！谢谢大家！

  async isMarkerInsideCircle() {
    try {
      this.currentLayer = null;

      this.map.eachLayer(layer => {
        if (layer instanceof L.Circle) {
          this.circleCenterLatLng = layer.getLatLng();
          this.circleRadius = layer.getRadius();
          layer.setStyle({
            color: 'red',
            fillColor: '#f03'
          });

          if (
            this.markerLatLng.distanceTo(this.circleCenterLatLng) <=
            this.circleRadius
          ) {
            this.currentLayer = layer;
          } else {
          }
        }
      });
    } catch (e) {
      console.log(e);
    }

    if (this.currentLayer !== null) {
      console.log(this.currentLayer);
      for (const pl of this.places) {
        if (
          pl.latitude == this.currentLayer.getLatLng().lat &&
          pl.longitude == this.currentLayer.getLatLng().lng
        ) {
          console.log(pl.title);

          this.spotVisited = pl.id;
          this.isLoading = true;
        }
      }

      this.currentLayer.setStyle({
        color: 'green',
        fillColor: '#ddd'
      });
    }
  }

如何检查标记是否在特定圆圈内

How can I check if the marker is or isn't in the inside a specific circle

javascript

maps

leaflet

ionic-framework

angular8