带有Markercluster自定义图标样式的角形传单

Angular-Leaflet with Markercluster custom icon styling

本文关键字：样式 Markercluster 自定义图标带有更新时间：2023-09-26

我正在尝试让这个应用程序的角度传单地图与传单标记集群和自定义集群逻辑一起工作。我不知道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
    }
  });

我不知道我的代码的哪一部分处理集群逻辑？它们正确地聚类，但我想要基于聚类中的数据的自定义颜色/类。有什么想法吗？

您可以将其添加到中

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)
                            });
                        }
                    }