Javascript 使用带AngularJS传单指令的PruneCluster
我在使用PruneCluster加载geojson数据的集群标记时遇到问题。群集不显示,控制台中也没有错误以帮助排除故障。以下是我当前的controller.js代码:Javascript 使用带AngularJS传单指令的PruneCluster,javascript,angularjs,leaflet,angular-leaflet-directive,Javascript,Angularjs,Leaflet,Angular Leaflet Directive,我在使用PruneCluster加载geojson数据的集群标记时遇到问题。群集不显示,控制台中也没有错误以帮助排除故障。以下是我当前的controller.js代码: angular.module('bizvizmap').controller('controller', [ '$scope', '$http', '$filter', 'leafletData', function ($scope, $http, $filter, leafletData){ $sco
angular.module('bizvizmap').controller('controller', [
'$scope', '$http', '$filter', 'leafletData',
function ($scope, $http, $filter, leafletData){
$scope.center = {
lat: 39.5500507,
lng: -105.7820674,
zoom: 4
},
$scope.defaults = {
scrollWheelZoom: false
},
$scope.events = {
map: {
enable: ['zoomstart', 'drag', 'click', 'mousemove'],
logic: 'emit'
}
},
$scope.layers = {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
markers:{}
},
$scope.map = null;
leafletData.getMap("bizvizmap").then(function(map){
$scope.map = map;
});
function renderMarkers(data, map){
var markerLayer = new PruneClusterForLeaflet();
for (var i=0; i < data.length; i++){
var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
markerLayer.RegisterMarker(marker);
}
map.addLayer(markerLayer);
markerLayer.ProcessView();
}
$scope.geojson = {};
$http.get('data/bizvizmap.geojson').success(function (data){
$scope.data = data;
// Render clustered markers
renderMarkers(data, $scope.map);
});
]);
angular.module('bizvizmap').controller('controller')[
“$scope”、“$http”、“$filter”、“传单数据”,
函数($scope、$http、$filter、数据){
$scope.center={
拉脱维亚:39.5500507,
液化天然气:-105.7820674,
缩放:4
},
$scope.defaults={
滚轮缩放:错误
},
$scope.events={
地图:{
启用:['zoomstart','drag','click','mousemove'],
逻辑:“发射”
}
},
$scope.layers={
基层:{
osm:{
名称:“OpenStreetMap”,
url:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
键入:“xyz”
}
},
标记:{}
},
$scope.map=null;
getMap(“bizvizmap”)。然后(函数(map){
$scope.map=map;
});
功能渲染器(数据、地图){
var markerLayer=新的pruneclusterforleaft();
对于(变量i=0;i
我的代码的问题是它没有访问GeoJson文件中的功能,无法显示聚集标记。我解决了这个问题,如下所示:
function renderMarkers(data, map){
var markerLayer = new PruneClusterForLeaflet();
for (var i=0; i < data.length; i++){
var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
markerLayer.RegisterMarker(marker);
}
map.addLayer(markerLayer);
markerLayer.ProcessView();
}
$scope.geojson = {};
$http.get('data/bizvizmap_final.geojson').success(function (data){
$scope.data = data;
// Render clustered markers
renderMarkers(data.features, $scope.map);
});
功能渲染器(数据、地图){
var markerLayer=新的pruneclusterforleaft();
对于(变量i=0;i