2014-11-13 3 views
0

기능을 추가하고 모두 클러스터링하는 간단한 코드와 간단한 맵이 있습니다. 바로 예제에서 :openlayers에서 클러스터 레이어의 모든 기능을 선택하는 방법 3

var vectorSource = new ol.source.Vector({ 
     projection: 'EPSG:4326' 
    }); 

    var clusterSource = new ol.source.Cluster({ 
     distance: 30, 
     source: vectorSource 
    }); 

    var styleCache = {}; 
    var clusters = new ol.layer.Vector({ 
     source: clusterSource, 
     style: function(feature, resolution) { 
     var size = feature.get('features').length; 
     var style = styleCache[size]; 
     var src; 
     if (!style) { 
      if(size == 1){ 
       src = 'images/location-single.png'; 
      }else{ 
       src = 'images/location-multi.png'; 
      } 
      style = [ 
      new ol.style.Style({ 
       image: new ol.style.Circle({ 
        radius: 5, 
        fill: new ol.style.Fill({ 
        color: '#5bc0de' 
        }) 
       }) 
      }), 
      new ol.style.Style({ 
       image: new ol.style.Icon(({ 
        // scale: 1 + rnd, 
        // rotateWithView: (rnd < 0.9) ? true : false, 
        // rotation: 360 * rnd * Math.PI/180, 
        anchor: [0.45, 1], 
        anchorXUnits: 'fraction', 
        anchorYUnits: 'fraction', 
        // opacity: rnd, 
        src: src 
       })), 
       text: new ol.style.Text({ 
        text: size.toString(), 
        fill: new ol.style.Fill({ 
        color: '#000' 
        }) 
       }) 
      }) 

      ]; 
      styleCache[size] = style; 
     } 
     return style; 
     } 
    }); 


    var map = new ol.Map({ 
     target: 'map', // The DOM element that will contains the map 
     renderer: 'canvas', // Force the renderer to be used 
     layers: [ 
      // Add a new Tile layer getting tiles from OpenStreetMap source 
      new ol.layer.Tile({ 
       source: new ol.source.OSM() 
      }), 
      clusters 
     ], 
     // Create a view centered on the specified location and zoom level 
     view: new ol.View({ 
      center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'), 
      zoom: 6 
     }) 
    }); 

이제 클러스터 기능이 정상적으로 작동합니다. 하지만 내가 클러스터의 모든 지점에 대한 좌표를 보여줄 필요가, 나는 map.forEachFeatureAtPixel를 사용하려고했지만 그것은 클러스터의 모든 기능에 대해 작동하지 않습니다. 어떻게 그들을 모두 선택합니까?

답변

0

오. 나는 그것을 얻었다라고 생각한다! 클러스터는 기능이며 속성을가집니다.

map.on('singleclick', function(event) { 
    map.forEachFeatureAtPixel(event.pixel, function(feature) { 
     var featuresInCluster = feature.getProperties().features; 
    }); 
}); 

하지만 난 정말 다른 방법이 있는지 알고 싶습니다 : 그래서 우리는 .getProperties()

에서와를 사용하여 클러스터에있는 모든 기능을 얻을 수 있나요?

+0

'feature.get ('features')'는 'feature.getProperties(). features'보다 간단합니다. – nachtigall

관련 문제