GeoJSONポリゴンにラベルを付ける方法は?


9

LeafletとGeoJSON機能を組み合わせて使用​​しています。GeoJSONフィーチャ(この場合はポリゴン)にラベルを付ける方法はありますか?からラベルを取得する必要があります

feature.properties.name 

これは私がラベルを挿入できると思う私のコードです:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }

1
まだ手元にある場合は、ポリゴンのラベル付けに使用したソリューションを投稿していただけませんか?
a1an

回答:


5

リーフレットが使用を想定しているフォーマットを知る必要があります。RFM。例:OpenLayersは、このGeoJSON形式がポイントを作成し、いくつかのカスタム属性を与えることを期待しています:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

ご覧のとおり、ジオメトリ(ポイント)を作成し、それに属性を結合しています。これをOpenLayersに送信すると、結果は@Aragonの例に適合し、「色」と「名前」を(ラベルとして)使用して、マップ内のポイントをカスタマイズします。

このGeoJSONの例をコピーしてhttp://json.parser.online.fr/に貼り付けるか、サイトを使用して独自のものを検証してください。


ポリゴンについての質問ではなかったのですか?ポイントジオメトリに関する回答はどのようにして問題を解決しましたか?
a1an

そして、ポリゴンとは何ですか?同じ名前にします。変わるのは「ジオメトリ」の部分だけです。質問を解決しただけでなく、これまでに5つのupsを受け取りました。
Magno C

言い換えれば、同じ質問があります。ラベルをポリゴンに配置することは、ポイントに配置することとはまったく異なるため、この文脈では、ポリゴンとは複数のエッジを持つ2次元の閉じたオブジェクトを意味します。だからこそ、私はいくつかの詳細に興味があるので、最初のコメントをします。「それで解決しました」という答えはそれほど役に立ちませんが、とにかく感謝します:-)
a1an

1
「プロパティ」のものを追加するだけで、すべてうまくいきます。@Aragonの回答を参照してくださいご覧のとおりreturn feature.properties.color;propertiesfeature属性でありcolor、その属性の1つとして持っています。この方法で、このオブジェクトに必要なものを何でも入れることができます。
Magno C

2
RFMまったく求められていない。使用するジオメトリを知ることは、ここで正確な問題であるため、ポイントとポリゴンの違いは、重要である
スティーブン・鉛

5

これがリーフレットのポリゴンとラベルで解決した方法です。これにより、nameプロパティを使用してポリゴンにフローティングラベルを取得できます。

と仮定します:

  • 変数jsonに解析されたjson応答を取得します
  • jsonに穴のない単純なポリゴンしかありません
  • polygon_styleは、スタイル関数によって返されるスタイルオプションを保持します
  • labels_layerは、リーフレットレイヤーグループ(または直接マップ)です。

次に:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

非常に奇妙なことに、GeoJson(実際にはEPSG:4326)とリーフレットの座標が順番に入れ替わっています。


1
Leaflet 1.0+を使用している人のために、L.LabelはL.TooltipとしてLeafletコアに移動され、プラグインは非推奨になりました。bindLabel()の代わりにbindTooltip()を使用します。github.com/Leaflet/Leaflet.label
aethergy

1

この質問はopenlayers.ifに関するものだと思います。そうであれば、ラベル付けに使用できます。

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

お役に立てば幸いです...


1
OpenLayersではありません。LeafletとGeoJSON機能を組み合わせて使用​​しています。したがって、これは機能しません。しかし、試みてくれてありがとう。
逆流

fillColor: "${color}"関数を作成する代わりに、なぜしないの ですか?
マグノC

1
@Magno Cあなたのポイントの間に違いはありません。両方とも同じです。ランダムな色やその他のより複雑な関数を追加したい場合のためにこれを書きました。まだあなたのポイントをありがとう。
アラゴン

アラゴンを理解した。新しい方法をありがとう。将来役立つかもしれません。いいぞ !
Magno C

ここにGeoJSONを規定している仕様があるので、@ againstflowが表示したフォーマットを使い果たす方法はないと思います。リンク
Magno C
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.