カスタムオーバーレイはOpenLayersを3

Question

に現在、私は、私が地図上にHTMLのdivとしてカスタマイズされたマーカーを追加するには、GoogleマップのJavascript API v3ではカスタムオーバーレイを使用OpenLayersを3

に取り組んでいます。これらのマーカーはグループ化され、異なるカスタムオーバーレイにプロットされます。

OpenLayers 3で同じものを実装しようとしていますが、OpenLayers 3のオーバーレイは1つのオーバーレイで1つのマーカーを取りますので、解決策は見つかりませんでした。

マーカーをグループ化するために、OpenLayers 3でオーバーレイをグループ化できますか？または他の選択肢がありますか？

Answer 1

複数の可能なオプションがあります。

A）だけデータセットを持っている場合は、StyleFunctionを使用することができます。

var vectorLayer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     url: 'https://openlayers.org/en/v3.20.1/examples/data/geojson/countries.geojson', 
     format: new ol.format.GeoJSON() 
    }), 
    style: function(feature, resolution) { 
     style.getText().setText(resolution < 5000 ? feature.get('name') : ''); 
     return style; 
    } 
    }); 

がstyleプロパティを参照してください：このコードのol3 vector example、より具体的には、このセクションを参照してください？上記のように、ol.style.Styleまたはスタイル関数にすることができます。関数は引数としてマップビューのフィーチャと現在の解像度を受け取り、フィーチャがレンダリング（またはレンダリング）されるたびに呼び出されます。 ol.style.Styleまたはスタイルオブジェクトの配列を返すと、/これらのスタイルを使用して機能がレンダリングされます。

このフィーチャは固有のプロパティを持つことができます。つまり、feature.getProperties()です。そのフィーチャ内の多くのプロパティを使用して、ユニークなスタイルオブジェクトのユニークな配列を返すことができます。

ここでは、解像度に応じてダイナミックなスタイリングの例を見ることができます。complex ol3 example featuring style functionsです。これにより、フィーチャーのプロパティーでできることをよりよく理解できます。

B）あなたは複数のデータセットを持っている場合は、すべて同じ機能をレンダリングすることになる、データセットごとに1つのベクトルレイヤーを作成し、レイヤー上のユニークなスタイルオブジェクトを定義することができます。