标记和圆形标记具有不同的视觉位置

Question

＆＃13;

＆＃13;

var map = L.map('map').setView([51.505, -0.09], 18);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var marker1 = L.marker([51.505, -0.09]);
var FeatureGroup = L.geoJson([],{
  pointToLayer: function(f,l){
    return L.circleMarker(l);
  }
});
//Many features
var index = 4000; 
var yindex= 0;
while(index){
y= "51.5"+index
y=y*1
FeatureGroup.addData({
  type:"Feature",
  properties: {},
  geometry:{ type:"Point", coordinates:[-0.09, y]}
});
index--;
}



//var Coordinates = marker1.getLatLng();
var feature = {
  type:"Feature",
  properties: {},
  geometry:{ type:"Point", coordinates:[marker1.getLatLng().lng, marker1.getLatLng().lat]}
};
//var circleMarker = L.circleMarker(Coordinates);
FeatureGroup.addLayer(marker1);

map.addLayer(FeatureGroup);

setTimeout(function(){
//remove the marker 
FeatureGroup.removeLayer(marker1._leaflet_id);
//adds the circle marker
FeatureGroup.addData(feature);
},2000);

＆＃13;

.map{
width: auto;
height: 350px
}

＆＃13;

<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<div id=map class="map"></div>

＆＃13;

＆＃13;

＆＃13;

点击地图会在位置X，Y处添加一个标记到FeatureGroup，然后在相同的位置X，Y中删除要由circlemarker替换的标记。

circleMarker中的FeatureGroup以正确的坐标显示，但在视觉上位于另一个位置。

我使用Leaflet版本1.3.1

Answer 1

  

circleMarker中的FeatureGroup以正确的坐标显示，但在视觉上位于另一个位置。

你可能被一个＆＃34;光学错觉＆＃34;所愚弄，因为标记只有点到给定的坐标，其图标位于 此位置，而圆形标记以为中心位置。

您可以通过同时显示标记和圆形标记来查看效果：

＆＃13;

＆＃13;

var map = L.map('map').setView([51.505, -0.09], 18);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var marker1 = L.marker([51.505, -0.09]);

var FeatureGroup = L.geoJson([], {
  pointToLayer: function(f, l) {
    return L.circleMarker(l);
  }
});
var feature = {
  type: "Feature",
  properties: {},
  geometry: {
    type: "Point",
    coordinates: [marker1.getLatLng().lng, marker1.getLatLng().lat]
  }
};
FeatureGroup.addLayer(marker1);
//adds the circle marker
FeatureGroup.addData(feature);

map.addLayer(FeatureGroup);

＆＃13;

.map {
  width: auto;
  height: 350px
}

＆＃13;

<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<div id=map class="map"></div>

＆＃13;

＆＃13;

＆＃13;