Question

我对ol.ext中的图表有疑问。它们无法正确显示。

我将图表实施到集群。也许就是这个问题。

谢谢您的回答。

集群和图表：

 var clusterSource = new ol.source.Cluster({
            distance: 40,
            source: source,    
        });
  
        var clusters = new ol.layer.Vector({

            source: clusterSource,
            style: function (feature) {
                var size = feature.get('features').length;
                style = [new ol.style.Style({
                    image: new ol.style.Chart({
                        type: 'donut',
                        data: [20,50,40], 
                        colors: 'pastel',
                        rotateWithView: true,
                        radius: 20,
                      
                        stroke: new ol.style.Stroke({
                            color: '#fff'
                        })
                        
                    }),
               
                    text: new ol.style.Text({
                        text: size.toString(),
                        fill: new ol.style.Fill({
                            color: '#000000',
                            
                        })
                    })
                })];
                return style;
            }
        });

地图：

 var source = new ol.source.Vector({});
     var map = new ol.Map({
    
    
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({
                            url: '{{ map.source_url }}',
                            crossOrigin: null
                        })
                    }),
                    clusters,
                    /*new ol.layer.Vector({
                        source: source
                    })*/
                ],
                controls: ol.control.defaults({
                    attributionOptions: {
                        collapsible: true,
                        zoom: false
                    }
                }).extend([
                    new ol.control.ScaleLine(),
                    new ol.control.ZoomSlider(),
                    new TripsButton(),
                    new CenterButton(),
                ]),
    
                view: new ol.View({
                    center: ol.proj.fromLonLat([13.7207430, 50.1021943]),
                    zoom: 7,
                    maxZoom: {{ map.max_zoom }},
                    minZoom: {{ map.min_zoom }}
                })
            });

Answer 1

现在效果很好。我认为问题在于中风的缺失值。我不确定，但是可以。

    var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: source,    
    });
    
    var clusters = new ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
            var size = feature.get('features').length;
            
            if (size > 1) {
        
                var output = [];
                for (piece of feature.get('features')) {
                    output.push('#' + piece.style_.image_.iconImage_.src_.substr(6, 6));
                }
                var counts = {};
                output.forEach(function(x) {
                    counts[x] = (counts[x] || 0)+1 
                });
                
                var data = [];
                var colors = [];
                Object.keys(counts).forEach(function(key) {
                    data.push(counts[key]);
                    colors.push(key);
                });
                
                style = [new ol.style.Style({
                    image: new ol.style.Chart({
                        type: 'donut',
                        data: data, 
                        colors: colors,
                        rotateWithView: true,
                        radius: 20,
                        stroke: new ol.style.Stroke(
                        {   
                            color: "#fff",
                            width: 2
                        }),
                        
                    }),
            
                    text: new ol.style.Text({
                        text: size.toString(),
                        fill: new ol.style.Fill({
                            color: '#000000',
                            
                        })
                    })
                })];
                return style;
            } 
        }
    });

Openlayers仅显示地图上一半的甜甜圈图

1 个答案: