带有Markercluster自定义图标样式的Angular-Leaflet

时间:2016-03-24 23:15:41

标签: javascript angularjs leaflet angular-leaflet-directive

我试图让这个应用程序的角度传单映射与传单标记集群和自定义集群逻辑一起使用。我无法弄清楚iconCreateFunction应该居住的地方。

我已尝试将其包含在$scope.markers[id] = {}块中以及以下块中。

  var bingRoad = { bingRoad: { name: 'Bing Road', type: 'bing', key: bing_key, layerOptions: { type: 'Road',  } } };
  var bingAerialWithLabels = { bingAerialWithLabels: { name: 'Bing Aerial With Labels', type: 'bing', key: bing_key, layerOptions: { type: 'AerialWithLabels', position: 'front' } } };
  var baselayers = { bingRoad: bingRoad.bingRoad, bingAerialWithLabels: bingAerialWithLabels.bingAerialWithLabels };

  angular.extend($scope, {
    center: {
      lat: someLat,
      lng: someLong,
      zoom: 7
    },
    icons: local_icons,
    markers: {},
    layers: {
      baselayers: baselayers
    }
  });

我无法弄清楚我的代码的哪个部分处理群集逻辑?它们正确聚类,但我希望基于群集内的数据自定义颜色/类。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

你可以在

中添加它
layerOptions: {
                        showCoverageOnHover: false,
                        disableClusteringAtZoom: 12,
                        iconCreateFunction: function (cluster) {
                            var className = '';
                            _($scope.songs).forEach(function(song) {
                                switch (song.genre) {
                                    case 3:
                                        className = 'red';
                                        break;
                                    case 2:
                                        className = 'yellow';
                                        break;
                                    default:
                                        className = 'green';
                                        break;
                                }
                            });


                            return new L.DivIcon({
                                className: className,
                                iconSize: new L.Point(40, 40)
                            });
                        }
                    }
相关问题