传单markercluster不识别layeroptions
leaflet markercluster does not recognize layeroptions
我正在使用 angular-leaflet-directive 和 Leaflet.markercluster。我能够在服务中加载标记,现在我想在地图上显示这些标记。标记以标准标记簇方式打印和聚集。
看来markercluster根本无法识别我的配置。无论我在叠加层中配置什么,似乎都被忽略了。这是我的 javascript 代码:
front_app.factory('SiteWorkingsFactory', function ($http) {
var _placemarks = function () {
return $http({
method: 'GET',
url: '/map/getMarkersLeaflet',
}).then(function (result) {
return result.data;
});
};
return {
placemarks: _placemarks
};
});
front_app.controller('MapController', ['$scope', 'SiteWorkingsFactory', function ($scope, SiteWorkingsFactory) {
var markerPromise = SiteWorkingsFactory.placemarks();
markerPromise.then(function (result) {
$scope.markers = result;
});
angular.extend($scope, {
initial_center: {
lat: 51.06073,
lng: 13.71877,
zoom: 16
},
map_defaults: {
zoomControlPosition: 'topleft',
tileLayerOptions: {
detectRetina: true,
reuseTiles: true,
},
doubleClickZoom: true
},
layers: {
baselayers: {
osmbase: {
name: 'OpenStreetMap (XYZ)',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {
eiqcluster: {
name: "eiqcluster",
type: "markercluster",
visible: true,
layerOptions: {
singleMarkerMode: true,
showCoverageOnHover: false,
}
},
}
}
});
}]);
和一个 html-片段:
<div class="mapcontrollerstyles" ng-controller="MapController">
<leaflet id="map" defaults="map_defaults" lf-center="initial_center" layers="layers" markers="markers"></leaflet>
</div>
加载的json,看起来像这样:
{
"1":{"lat": 51.06075495, "lng": 13.71900225, "group": "eiqcluster", "properties": {"name": "xyz", "project_type": "model_project", "id": 1}},
"2":{"lat": 51.0582824267003, "lng": 13.7182974815369, "group": "eiqcluster", "properties": {"name": "xyz2", "project_type": "other", "id": 2}},
"3":{"lat": 51.0620861, "lng": 13.7194437, "group": "eiqcluster", "properties": {"name": "xyz3pe", "project_type": "other", "id": 3}}
}
我希望 markercluster 的 layerOptions 能够得到尊重,但事实并非如此。我怀疑 markercluster 是在不知道 angular 指令的情况下初始化的,但我不明白发生了什么。请帮忙!
更新: 这是一个简化版的 plnkr:http://plnkr.co/edit/vVo3QWzlms8Gun3OhdjM?p=preview
在您指定标记数据的 JSON 中,您必须使用 "layer"
而不是 "group"
来指示标记应该进入的层的名称。
否则,它们将被添加到一个默认组,该组不同于您创建的和您指定的组 layerOptions
。
我正在使用 angular-leaflet-directive 和 Leaflet.markercluster。我能够在服务中加载标记,现在我想在地图上显示这些标记。标记以标准标记簇方式打印和聚集。
看来markercluster根本无法识别我的配置。无论我在叠加层中配置什么,似乎都被忽略了。这是我的 javascript 代码:
front_app.factory('SiteWorkingsFactory', function ($http) {
var _placemarks = function () {
return $http({
method: 'GET',
url: '/map/getMarkersLeaflet',
}).then(function (result) {
return result.data;
});
};
return {
placemarks: _placemarks
};
});
front_app.controller('MapController', ['$scope', 'SiteWorkingsFactory', function ($scope, SiteWorkingsFactory) {
var markerPromise = SiteWorkingsFactory.placemarks();
markerPromise.then(function (result) {
$scope.markers = result;
});
angular.extend($scope, {
initial_center: {
lat: 51.06073,
lng: 13.71877,
zoom: 16
},
map_defaults: {
zoomControlPosition: 'topleft',
tileLayerOptions: {
detectRetina: true,
reuseTiles: true,
},
doubleClickZoom: true
},
layers: {
baselayers: {
osmbase: {
name: 'OpenStreetMap (XYZ)',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {
eiqcluster: {
name: "eiqcluster",
type: "markercluster",
visible: true,
layerOptions: {
singleMarkerMode: true,
showCoverageOnHover: false,
}
},
}
}
});
}]);
和一个 html-片段:
<div class="mapcontrollerstyles" ng-controller="MapController">
<leaflet id="map" defaults="map_defaults" lf-center="initial_center" layers="layers" markers="markers"></leaflet>
</div>
加载的json,看起来像这样:
{
"1":{"lat": 51.06075495, "lng": 13.71900225, "group": "eiqcluster", "properties": {"name": "xyz", "project_type": "model_project", "id": 1}},
"2":{"lat": 51.0582824267003, "lng": 13.7182974815369, "group": "eiqcluster", "properties": {"name": "xyz2", "project_type": "other", "id": 2}},
"3":{"lat": 51.0620861, "lng": 13.7194437, "group": "eiqcluster", "properties": {"name": "xyz3pe", "project_type": "other", "id": 3}}
}
我希望 markercluster 的 layerOptions 能够得到尊重,但事实并非如此。我怀疑 markercluster 是在不知道 angular 指令的情况下初始化的,但我不明白发生了什么。请帮忙!
更新: 这是一个简化版的 plnkr:http://plnkr.co/edit/vVo3QWzlms8Gun3OhdjM?p=preview
在您指定标记数据的 JSON 中,您必须使用 "layer"
而不是 "group"
来指示标记应该进入的层的名称。
否则,它们将被添加到一个默认组,该组不同于您创建的和您指定的组 layerOptions
。