web-dev-qa-db-ja.com

リーフレット-マップの色を変更する

このようなリーフレットマップのスタイルを設定することは可能ですか（水：灰色;土地：黄色;）？ドキュメントでリファレンスを見つけることができませんでした。 http://leafletjs.com/features.html

はいの場合、グーグルマップのように簡単ですか、それとも土地と水を表すポリゴンに何らかの方法で色を付ける必要がありますか？

リーフレットの情報ウィンドウを利用したいのですが、このようにマップのスタイルを設定する必要があります。

enter image description here

leaflet
8
Philipp Gfeller

最も簡単な方法は、LeafletのL.GeoJSONによってポリゴンとして追加することです。まず、世界の境界の適切なデータセットを見つける必要があります。ここで見つけました： https://github.com/johan/world.geo.jsonworld.geo.jsonファイルを保存して、自分のサーバーで使用できるようにします。次に、単純なマップを初期化します。

var map = L.map('map', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © OpenStreetMap contributors'
        })
    ]
});

お気に入りのXHRライブラリ（この例ではjQueryを使用しています）を使用してGeoJSONファイルを取得し、そのデータを使用してGeoJSONレイヤーを初期化し、スタイルを設定します。

$.getJSON('world.geo.json', function (geojson) { // load file
    L.geoJson(geojson, { // initialize layer with data
        style: function (feature) { // Style option
            return {
                'weight': 1,
                'color': 'black',
                'fillColor': 'yellow'
            }
        }
    }).addTo(map); // Add layer to map
});

それだけです、それをもっと簡単にすることはできません。 Plunkerの実際の例を次に示します。

http://plnkr.co/edit/UGQ9xt?p=preview

（GioJSONファイルをGitraw/Github経由で直接ロードしますが、本番サイトでロードすることは想定されていません）

そして、これがL.GeoJSONのリファレンスです。

http://leafletjs.com/reference.html#geojson

編集：他のオプションはもっと複雑ですが、コメントで言及したいくつかの欠点はありません。これが私が考えることができる最高のものです：

LeafletとMikeBostockによる素晴らしい D ライブラリの組み合わせを使用します。簡単な例を次に示します。 http://bost.ocks.org/mike/leaflet/ パンでの再描画の影響はありませんが、把握するのは困難です。

別の解決策は Mapbox を使用することです TileMill と呼ばれるツールがあり、独自のタイルセットを生成できます。それは完璧な解決策であり、前述の欠点はなく、ほとんどすべてのスタイルを設定できます。唯一の欠点は、自分でタイルを作成するためにホストする必要があることです。

10
iH8

答えに追加するために@ iH8は与えました：

TileMill と TileStache を使用して、かなり基本的な世界地図をカスタマイズしましたが、見栄えがしました。作業は本当に簡単でした。また、シェープファイルの使用もサポートしています。

TileMill example

これが、必要な配色に近づくためにいじり始めることができる.mssです。

Map {
  background-color: #e0e0e0;
}

#countries {
  ::outline {
    line-color: #000000;
    line-width: 2;
    line-join: round;
  }
  polygon-fill: #ffce0c;
}

美しいマップを作成したら、MBtilesを生成し、TileStacheで提供できます。

これがTileStacheの使用に関する tut です。お役に立てば幸いです。

3
FredFury