Маркер и круговой маркер имеют различную визуальную позицию - PullRequest
Новая
       7

Маркер и круговой маркер имеют различную визуальную позицию

0 голосов
/ 21 мая 2018 

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);
.map{
width: auto;
height: 350px
}
<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>

Нажатие на карту добавляет маркер в позиции X, Y к FeatureGroup, затем удаляет маркер для замены на circlemarker в тех же позициях X, Y.

circleMarker в FeatureGroup отображается с правильными координатами, но визуально находится в другой позиции.

Я использую Leaflet версии 1.3.1

1 Ответ

0 голосов
/ 25 мая 2018

circleMarker в FeatureGroup отображается с правильными координатами, но визуально находится в другом положении.

Вероятно, вас обманывает "оптическая иллюзия" из-затот факт, что маркер только указывает на заданные координаты, при этом его значок расположен над в этом месте, тогда как маркер круга находится с центром вокруг того же места.

Эффект можно увидеть, одновременно отображая маркер и маркер круга:

Screenshot Marker and Circle Marker on same position

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);
.map {
  width: auto;
  height: 350px
}
<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>
...