オープンレイヤーでマルチポリゴンごとに1つのラベルを表示する方法3？

Question

OL3のマルチポリゴンごとに1つのラベルを表示する方法を見つけようとしています。現在のところ、このシナリオでは、あらゆる状況下で理想的ではないすべてのポリゴンのラベルを示しています。

var vector = new ol.layer.Vector({ 
source: new ol.source.Vector({ 
    format: new ol.format.GeoJSON(), 
    projection: 'EPSG:4326', 
    url: 'resources/ol3/countries.geojson' 
}), 
style: function (feature, resolution) { 
    style.getText().setText(resolution < 10000 ? feature.get('NAME') : ''); 
    style.getFill().setColor('rgba(255, 255, 255, 0)'); 
    return styles; 
}}); 

私は、可能な場合は、最大ポリゴンにラベルを表示したいと思います。

Answer 1

クライアント側のもう1つのオプションは、マルチポリゴンのポリゴンパーツのうち大きいほうにラベルを付けることです。 このオプションでは、サーバー側のコントロールは必要ありません。したがって、次のコードを使用したり、アクションでそれを見るためにfiddleにdireclty行く：

var vector = new ol.layer.Vector({ 
     style: function (feature, resolution) { 
     var polyStyleConfig = { 
         stroke: new ol.style.Stroke({ 
        color: 'rgba(255, 255, 255, 1)', 
        width: 1 
        }), 
       fill: new ol.style.Fill({ 
        color: 'rgba(255, 0, 0,0.3)' 
       }) 
     } 
     var textStyleConfig = { 
     text:new ol.style.Text({ 
     text:resolution < 100000 ? feature.get('NAME') : '' , 
     fill: new ol.style.Fill({ color: "#000000" }), 
     stroke: new ol.style.Stroke({ color: "#FFFFFF", width: 2 }) 
     }), 
     geometry: function(feature){ 
     var retPoint; 
      if (feature.getGeometry().getType() === 'MultiPolygon') { 
      retPoint = getMaxPoly(feature.getGeometry().getPolygons()).getInteriorPoint(); 
      } else if (feature.getGeometry().getType() === 'Polygon') { 
      retPoint = feature.getGeometry().getInteriorPoint(); 
      } 
      console.log(retPoint) 
     return retPoint; 
     } 
     } 
     var textStyle = new ol.style.Style(textStyleConfig); 
     var style = new ol.style.Style(polyStyleConfig); 
     return [style,textStyle]; 
    }, 
    source: new ol.source.Vector({ 
     url: 'http://openlayers.org/en/v3.8.2/examples/data/geojson/countries.geojson', 
     format: new ol.format.GeoJSON(), 
     wrapX: false 
     }) 

}); 

ます。また大きなポリゴン

function getMaxPoly(polys) { 
    var polyObj = []; 
    //now need to find which one is the greater and so label only this 
    for (var b = 0; b < polys.length; b++) { 
    polyObj.push({ poly: polys[b], area: polys[b].getArea() }); 
    } 
    polyObj.sort(function (a, b) { return a.area - b.area }); 

    return polyObj[polyObj.length - 1].poly; 
} 

Answer 2

あなたがしたいことは、少なくとも「ネイティブ」ではなく、ol3によってサポートされていません。あなたが望むものを達成するにはいくつかの方法がありますが、私はそれを「クライアント側」で行うのが最良のアプローチだとは思わないのです。

1 - シンプルかつ迅速な方法、サーバ側

あなたのデータ/サーバーを管理している場合は、私はそこから、表示するラベルを管理したいです。表示するテキストのコピーを含む「ラベル固有の」フィールドと、空白のままにしないフィールドを作成できます。それはあなたが島の最大の塊に常にラベルを付けるだけであればうまくいくでしょう。あなたのスタイル機能では、クライアント側では、クライアント側

、あなたは可能性があり、各機能でループし、その後、機能がラベル付けされるようにしようと同じ名前を持つものを集める -

2 - 複雑で遅い方法それらのジオメトリ領域を比較する。より大きな面積を持つ同じ名前の他のフィーチャがない場合にのみフィーチャにラベルを付けます。

このソリューションは、サーバー側で実装することもできます。同じ名前を共有する人の中で最大の面積を持つものがある場合は値1の余分なフィールドを返し、そうでない場合は0を返します。