Javascript 如何检查标记是否为';t在特定圆的内部
我需要帮助检查标记是否在特定的圆圈内。 我有一个圆圈数组,我必须检查标记是否在里面,并获得目标圆圈的信息。 我试着打电话给distanceTo 有人能帮我吗Javascript 如何检查标记是否为';t在特定圆的内部,javascript,ionic-framework,leaflet,maps,angular8,Javascript,Ionic Framework,Leaflet,Maps,Angular8,我需要帮助检查标记是否在特定的圆圈内。 我有一个圆圈数组,我必须检查标记是否在里面,并获得目标圆圈的信息。 我试着打电话给distanceTo 有人能帮我吗 ... export class PlacesPage { map: Map; placesList = []; ionViewDidEnter() { this.map = new Map("mapId2").setView([41.694941, -8.821054], 13); tileLayer("h
...
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();
}
}
```
。。。
出口类货位{
地图:地图;
placesList=[];
ionViewDidEnter(){
this.map=newmap(“mapId2”).setView([41.694941,-8.821054],13);
tileLayer(“http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png”{
署名:“cityt3ip.com”
}).addTo(此.map);
获取(“./assets/data.json”)
.then(res=>res.json())
。然后(json=>{
this.placesList=json.places;
这个.map();
});
}
单张地图(){
for(此的const place.placesList){
圆([地点.纬度,地点.经度]{
颜色:“红色”,
填充颜色:“f03”,
填充不透明度:0.5,
半径:100
}).addTo(此.map);
}
标记([41.692135,-8.831127]{
真的,
自动扫描:对
})
.addTo(this.map).on('drag',this.masterClick,this);
}
masterClick(e:任意){
控制台日志(e)
var d=this.map.distanceTo(e.latlng,circle.getLatLng());
var isInside=d
传单中没有检测标记是否位于圆圈内的功能。相反,您可以使用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;
}
}
isMarkerInsideCircle(标记标记、圈中心、圈中心){
//markerLatLng和circleCenterLatLng必须是L.latlng类的实例。
//您可以创建这样的实例:L.latLng(lat,lng);
如果(markerLatLng.distanceTo(CircleCenter Latlings)将标记拖动到圆上时,看起来您正试图更改圆的样式
我做了一个演示,我的策略是当标记移动到任何一个圆圈上时,存储当前圆圈
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"
});
}
功能主控点击(e){
var d=e.latlng.distanceTo(myCircle.getLatLng());
var isInside=d这是我的解决方案!谢谢大家
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'
});
}
}
async isMarkerInsideCircle(){
试一试{
this.currentLayer=null;
this.map.eachLayer(层=>{
if(L.Circle的图层实例){
this.circlecenteralng=layer.getLatLng();
this.circleRadius=layer.getRadius();
layer.setStyle({
颜色:“红色”,
填充颜色:'#f03'
});
如果(
this.markerLatLng.distanceTo(this.CircleCenter Latlatlng)