☰

Google Maps API v3でGeoJSONレイヤーを個別に操作する 質問する

tag-icon • tag-icon javascript json google-maps google-maps-api-3 geojson
Google Maps API v3でGeoJSONレイヤーを個別に操作する 質問する

マップに 2 つの geojson レイヤーをロードし、異なるルールで個別にスタイルを設定できるようにしたいと考えています。以下のコードを使用して両方の geojson ファイルを表示できますが、どちらも同じ map.data オブジェクトの一部であるため、両方にユニバーサル スタイルしか適用できません。これを回避する方法はありますか? 最終的には (長期的な目標)、チェックボックスを使用してさまざまなレイヤーのオン/オフを切り替えることもできるようになります (問題を複雑にしすぎないように、まずは独立したスタイル設定に焦点を当てています)

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 12,
  center: {lat: 39.218509,  lng: -94.563703}
});

map.data.loadGeoJson('https://url1');
map.data.loadGeoJson('https://url2');

map.data.setStyle(function(feature) { //styling rules here}

google.maps.event.addDomListener(window, 'load', initialize);

どなたか助けていただければ幸いです。関連しそうなスレッドをいくつか見ました（Google マップ GeoJSON - マーカー レイヤーを切り替えますか?) ですが、自分の目的に具体的にどのように適用すればよいかわかりませんでした。

ベストアンサー1

そこで、似たようなことをする必要があり、2 つの geojson ファイルを追加して、それぞれ異なるスタイルを設定する必要がありました。やりたいことは、マップを初期化して、2 つの異なるレイヤーを追加することです。基本的には、両方のスタイルを設定します。以下は、メモ付きのコードです。私は実際に、この関数 Angular をサービスで使用し、Promise を返しました。

マップオプションを設定する

var mapOptions = {
            zoom: 4,
            scrollwheel: false,
            center: new google.maps.LatLng(40.00, -98),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

マップを変数に設定します。

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

レイヤーを取得する 2 つの変数を初期化します。州と郡を実行しました。

var countyLayer = new google.maps.Data();
var stateLayer = new google.maps.Data();

次に、各レイヤーの GeoJson ファイルを読み込みます。

countyLayer.loadGeoJson('counties.json');
stateLayer.loadGeoJson('states.json');

その後、各レイヤーのスタイルを設定します。

stateLayer.setStyle({
  strokeColor: 'red',
  strokeWeight: 5
 });

countyLayer.setStyle({
  strokeColor: 'black',
  strokeWeight: 1
});

最後のステップは、レイヤーをマップに設定することです。

countyLayer.setMap(map);
stateLayer.setMap(map);

この後、Promise を返しましたが、マップ オブジェクトを返すこともできます。これで意味が通じますか、または質問の回答に役立ちますか?

また、各レイヤーの setStyle() 関数内で、関数を使用して動的なスタイルを追加できます。たとえば、GeoJson ファイルのデータに基づいて色を変更する関数を fillColor に追加します。

おすすめ記事