web-dev-qa-db-ja.com

マーカーとクラスターマーカーの異なる画像Openlayers

イベントタイプごとに異なるマーカーを表示したい。スキー（スキーの小さな男）、セーリング（小さなボート）。私はビューを使用しているので、これは難しくありません。

楽しみはクラスタリングから始まります。複数の「サブ」マーカーがクラスター化されたマーカーを使用したい。また、簡単です。しかし、これをどのように行い、クラスタリングを超えてズームしたときにアイコンマーカーにスワップするのですか？

7viewsjavascript
3
mediaashley

この投稿をチェックアウト http://drupal.org/node/158588

コンテンツタイプごとに異なるマーカーを取得する方法の例が含まれています。

1
Francisco Luz

どんな効果があるのか​​完全にはわかりませんが、クラスタリングとカスタムマーカーを使用するマップがあります。回答の最後にコードを追加しました。コードはマーカーを動的に変更します。複数のタイプ（分類用語）の目に見えるマーカーがある場合、汎用マーカーを表示します。表示されているすべてのマーカーが1つのタイプに属している場合は、そのタイプのマーカーが表示されます。これは、カスタムコンテキストオブジェクトを使用して Styleオブジェクト のコピーを作成することで機能します。これにより、クラスターを引数として取り、プレースホルダーを置き換える値を返すプレースホルダーにちなんで名付けられたJS関数を指定できます。 deleteレンダーインテントを使用してマーカーの非表示を示したので、標準的ではない可能性があります（ただし、私には有効です）。私はOpenLayersの第一人者ではないので、これが最善の方法であるという保証はありません。

var style_properties = settings.styles.service_providers;
var default_marker_path = style_properties.externalGraphic;
// Convert the path to an internal one. This can't be done via the
// OpenLayers interface.
// @see http://drupal.org/node/1166076#comment-5633868
default_marker_path = default_marker_path.replace(new RegExp('http(s)?://.*?' + Drupal.settings.basePath), '');

var options = {
  context: {
    /**
     * Dynamic attribute replacement function. Returns the path to the
     * appropriate marker for this cluster. It will return a specific
     * service type's marker if there's only one kind of visible marker
     * within the cluster; the default marker otherwise.
     *
     * @param OpenLayers.Feature cluster
     *   The cluster containing the pseudo features.
     *
     * @todo Create a TID-based index into the features array for
     *   performance benefits.
     */
    field_service_type_marker_path: function (cluster) {

      var marker_path = default_marker_path;

      for (var i = 0; i < cluster.cluster.length; i++) {
        var feature = cluster.cluster[i];
        if (feature.renderIntent !== 'delete') {
          // Feature is visible.
          if (marker_path === default_marker_path) {
            marker_path = feature.attributes.field_service_type_marker_path;
          }
          else if (marker_path !== feature.attributes.field_service_type_marker_path) {
            // There's more than one type of visible marker - early out
            // and use the default marker.
            marker_path = default_marker_path;
            break;
          }
        }
      }
      return marker_path;
    },
    /**
     * Checks through the features in the cluster and returns whether
     * this cluster should be visible (ie whether or not it has any
     * visible features).
     */
    cluster_display: function (cluster) {
      for (var i = 0; i < cluster.cluster.length; i++) {
        var feature = cluster.cluster[i];
        // I could use .getVisibility(), but there's no need at the
        // moment, because the only way that a feature might not be
        // visible is if I changed its renderIntent.
        if (feature.renderIntent !== 'delete') {
          // Any return value that's not 'none' will cause the cluster
          // to be rendered.
          return '';
        }
      }
      return 'none';
    }
  }
};

// Set up the variable externalGraphic to allow different marker images
// based on the TID.s
style_properties.externalGraphic = Drupal.settings.basePath + '${field_service_type_marker_path}';
// Set up variable display, so that the clusters can be hidden if every
// feature inside them is.
style_properties.display = '${cluster_display}';

// Set up new styles for both 'default' and 'selected' renderIntents.
layer.styleMap.styles['default'].destroy();
layer.styleMap.styles['default'] = new OpenLayers.Style(style_properties, options);
layer.redraw();
1
Andy