1

我使用 Leaflet.js 创建了一个演示。一切都很好，但是现在我想在集群中的标记小于 10 时显示所有标记。这在 Leaflet.js 中是否可行。我目前正在使用 Leaflet.js 版本 0.7 下面是我的代码。

 var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhdWhhbm1vaGl0IiwiYSI6IjE0YTljYTgyY2IzNDVlMmI0MTZhNzMwOGRkMzI4MGY3In0.vNQxFF8XYPTbbjm7fD72mg',{
            maxZoom: 21,
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
                    }),latlng = L.latLng($scope.search.lat, $scope.search.lang);
$scope.map = L.map('map', {center: latlng, zoom: 16, layers: [tiles]});
//$scope.markers = L.markerClusterGroup({ chunkedLoading: true , disableClusteringAtZoom: 18 });
$scope.markers = L.markerClusterGroup({
        chunkedLoading: true ,
        disableClusteringAtZoom: 18 ,
        });


var LeafIcon = L.Icon.extend({
                options: {
                    shadowUrl: '/map-icon/marker-shadow.png',
                    iconSize:     [45, 45], // size of the icon
                    shadowSize:   [41, 41], // size of the shadow
                }
                });
var greenIcon = new LeafIcon({iconUrl: '/map-icon/mark1.png'}),
        redIcon = new LeafIcon({iconUrl: '/map-icon/mark2.png'}),
        orangeIcon = new LeafIcon({iconUrl: '/map-icon/mark3.png'}),
        purpleIcon = new LeafIcon({iconUrl: '/map-icon/mark4.png'}),
        defaultIcon = new LeafIcon({iconUrl: '/map-icon/marker-icon.png'});

//$http.post('/api/web/data.json', { 'data': $scope.search })
    $http.get('/api/web/data.json?lat='+$scope.search.lat+'&lang='+$scope.search.lang+'&radius='+$scope.search.radius+'&from='+$scope.search.from+'&to='+$scope.search.to+'&type='+$scope.search.type+'&arrest='+$scope.search.arrest ,
{ timeout: canceller.promise })
    .success(function(res,status,config,header){
    $scope.removeOldMarkers();
    $scope.serverData = res ;

        for (var i = 0; i < res.length; i++) {
            var response = getContent(res[i]);
    var image = res[i].primary_type == 'ASSAULT' ? redIcon : res[i].primary_type == 'ROBBERY' ? orangeIcon : res[i].primary_type == 'BATTERY' ? purpleIcon : res[i].primary_type == 'BATTERY' ? defaultIcon: greenIcon ;
            var marker = L.marker(new L.LatLng(res[i].latitude, res[i].longitude),{icon: image});
            marker.bindPopup(response);
    if (marker !== null) $scope.markers.removeLayer(marker);
            $scope.markers.addLayer(marker);
        }
        $scope.map.addLayer($scope.markers);
    $scope.showLoder = false ;
}).error(function(err,status,config,header){
    $scope.showLoder = false ;
    $timeout(function(){
    $scope.showLoder = true ;
    },500);
    console.log("Error comes in this section", err,status);
});
}

下面是我在 heroku 上的演示链接。 http://stagingleaflet.herokuapp.com/

任何形式的帮助表示赞赏？谢谢

4

0 回答 0