Leaflet Panning 清除所有标记
Leaflet Panning clears all markers
我正在使用 leaflet + leaflet 指令,昨晚我注意到如果我向左或向右平移太远,它会创建一个新的地图实例,其中不包含我的 geojson 标记。
这是一个已知问题还是我没有配置我的代码? (在线找不到任何问题)
这个有点难解释所以我做了一张专辑:
有谁知道为什么会这样and/or如何解决?
这里还值得注意的是,如果我进一步向左平移,然后输入 "Instance 3, 4 or 5"(等等...)我将无法看到我的标记,直到我平移回 "Instance 1".
这是我的相关 HTML 和控制器代码:
<div class="main" ng-controller="GeoJSONCenterController">
<div class="container-fluid" id="map-canvas">
<leaflet markers="markers" center="mapCenter" defaults="defaults" geojson="geojson"></leaflet>
</div>
</div>
控制器代码:
app.controller("GeoJSONCenterController", [ '$scope', '$http', '$filter', 'leafletData', 'iconService', function($scope, $http, $filter, leafletData, iconService ) {
$scope.mapCenter = {
lat: 41.152194,
lng: 6.855469,
zoom: 3,
};
$scope.defaults = {
attribution: "",
minZoom: 3,
maxZoom: 18
};
$scope.icons = iconService.local_icons;
// Get the geojson data from the USGS
$http.get("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson").success(function(data, status) {
addGeoJsonLayerWithClustering(data);
});
function addGeoJsonLayerWithClustering(data) {
var markers = L.markerClusterGroup();
var geoJsonLayer = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
marker = new L.marker(latlng, {icon: L.icon($scope.icons.quake_icon)});
return marker;
},
onEachFeature: function (feature, layer) {
var date = $filter('date')(feature.properties.time, "short");
var popupContent = "<p><span class=" + "event-type" + ">" + feature.properties.type + ":</span> " + "<a href=" + feature.properties.url + " target=" + "_blank" + ">" + feature.properties.title + "</a>" + "<br><span class=" + "event-time" + "> Time: </span>" + date + "</span> " + "</p>";
layer.bindPopup(popupContent);
}
});
markers.addLayer(geoJsonLayer);
leafletData.getMap().then(function(map) {
map.addLayer(markers);
//map.fitBounds(markers.getBounds());
});
}
} ]);
默认情况下 worldCopyJump
设置为 false
。将其设置为 true
应该会在平移地图时移动标记。
参见:https://github.com/tombatossals/angular-leaflet-directive/blob/master/doc/defaults-attribute.md 和
我正在使用 leaflet + leaflet 指令,昨晚我注意到如果我向左或向右平移太远,它会创建一个新的地图实例,其中不包含我的 geojson 标记。
这是一个已知问题还是我没有配置我的代码? (在线找不到任何问题)
这个有点难解释所以我做了一张专辑:
有谁知道为什么会这样and/or如何解决?
这里还值得注意的是,如果我进一步向左平移,然后输入 "Instance 3, 4 or 5"(等等...)我将无法看到我的标记,直到我平移回 "Instance 1".
这是我的相关 HTML 和控制器代码:
<div class="main" ng-controller="GeoJSONCenterController">
<div class="container-fluid" id="map-canvas">
<leaflet markers="markers" center="mapCenter" defaults="defaults" geojson="geojson"></leaflet>
</div>
</div>
控制器代码:
app.controller("GeoJSONCenterController", [ '$scope', '$http', '$filter', 'leafletData', 'iconService', function($scope, $http, $filter, leafletData, iconService ) {
$scope.mapCenter = {
lat: 41.152194,
lng: 6.855469,
zoom: 3,
};
$scope.defaults = {
attribution: "",
minZoom: 3,
maxZoom: 18
};
$scope.icons = iconService.local_icons;
// Get the geojson data from the USGS
$http.get("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson").success(function(data, status) {
addGeoJsonLayerWithClustering(data);
});
function addGeoJsonLayerWithClustering(data) {
var markers = L.markerClusterGroup();
var geoJsonLayer = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
marker = new L.marker(latlng, {icon: L.icon($scope.icons.quake_icon)});
return marker;
},
onEachFeature: function (feature, layer) {
var date = $filter('date')(feature.properties.time, "short");
var popupContent = "<p><span class=" + "event-type" + ">" + feature.properties.type + ":</span> " + "<a href=" + feature.properties.url + " target=" + "_blank" + ">" + feature.properties.title + "</a>" + "<br><span class=" + "event-time" + "> Time: </span>" + date + "</span> " + "</p>";
layer.bindPopup(popupContent);
}
});
markers.addLayer(geoJsonLayer);
leafletData.getMap().then(function(map) {
map.addLayer(markers);
//map.fitBounds(markers.getBounds());
});
}
} ]);
默认情况下 worldCopyJump
设置为 false
。将其设置为 true
应该会在平移地图时移动标记。
参见:https://github.com/tombatossals/angular-leaflet-directive/blob/master/doc/defaults-attribute.md 和