web-dev-qa-db-ja.com

OpenLayers、Niceマーカーのクラスタリング

このようなOpenLayersで素敵なクラスタリングを行う方法を知っていますか google example ？

javascriptopenlayersmarkerclusterer
22
apneadiving

上記の例のpointStyleにラベルを追加して、このラベルのコンテキストを説明できます。コードは次のようになります。

var pointStyle = new OpenLayers.Style({
    // ...
    'label': "${label}",
    // ...
  }, {
    context: {
      // ...
      label: function(feature) {
        // clustered features count or blank if feature is not a cluster
        return feature.cluster ? feature.cluster.length : "";  
      }
      // ..
    }
});

var styleMap = new OpenLayers.StyleMap({
  'default': pointStyle,
});

var googleLikeLayer = new OpenLayers.Layer.Vector("GoogleLikeLayer", {
  // ...
  styleMap  : styleMap,
  // ... 
});
22
unibasil

使用する OpenLayers.Strategy.Clusterクラスタリング用。

13
igorti

OpenLayersにいわゆるAnimatedCluster戦略を実装しました。あなたはそれについてもう少し見ることができます： http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

これは最初のバージョンですが、クラスターに素敵なアニメーションを追加します。改善すべき点はたくさんありますが、それは出発点です。

8
EricSonaron

OpenLayers 3には、すばらしい クラスタリングの例 があります。

コードから jsFiddle を作成したので、それを試してみることができます。

基本的には、配列によって形成される ol.source.Cluster からgrouping距離で ol.source.Vector を作成する必要があります ol.Feature の。 ol.Feature の形式でソース座標から作成された各ol.geom.Point。

var features = [
  new ol.Feature(new ol.geom.Point([lon1, lat1])),
  new ol.Feature(new ol.geom.Point([lon2, lat2])),
  ...
];

var cluster = new ol.source.Cluster({
  distance: 50,
  source: new ol.source.Vector({ features: features });
});

var map = new ol.Map({
  layers: [
    new ol.source.MapQuest({layer: 'sat'}), // Map
    new ol.layer.Vector({ source: cluster }) // Clusters
  ],
  renderer: 'canvas',
  target: 'map'
});
3
I.G. Pascual

あなたはイゴルティが言ったようにこれを行うことができます。解決策はOpenLayers.Strategy.Clusterクラスを使用し、OpenLayers.Styleクラスでレイヤーをスタイリングしています...

スタイリング用：

var pointStyle = new OpenLayers.Style({
'default': new OpenLayers.Style({
'pointRadius': '${radius}',
'externalGraphic': '${getgraph}'
....
},{
context:{
radius: function(feature){
    return Math.min(feature.attributes.count,7)+3;
},{
getgraph : function(feature){
    return 'ol/img/googlelike.png';
}}}};

それはあなたを助けなければなりません、あなたにもっと力があります！

2
Aragon

これは、レイヤーに追加されたカスタム属性に基づくクラスタリング用のJSfiddleです。私はこれに少し苦労したので、ここに置きました。また、クラスター化されたデータでズームアウトしたときの要約円グラフ画像の作成も示しています http://jsfiddle.net/alexcpn/518p59k4/

これを説明する小さなopenlayerチュートリアルも作成しました OpenLayers Advanced Clustering

    var getClusterCount = function (feature) {

    var clustercount = {};
    var planningcount = 0;
    var onaircount = 0;
    var inerrorcount = 0;

    for (var i = 0; i < feature.cluster.length; i++) {

        if (feature.cluster[i].attributes.cluster) {
        //THE MOST IMPORTANT LINE IS THE ONE BELOW, While clustering open layers removes the orginial feature layer with its own. So to get the attributes of the feature you have added add it to the openlayer created feature layer
            feature.attributes.cluster = feature.cluster[i].attributes.cluster;
            switch (feature.cluster[i].attributes.cluster) {

 ......
    return clustercount;
};
2
Alex Punnen