2017-12-08 12 views
-1

私は、単一エリア型geojson-fileの拡張を拡大するためにGoogleマップが必要です。シングルエリア型geojsonファイルの拡張を取得するには?

私はGoogleマップとそのデータ層にするにGeoJSONファイルを読み込むことができます。

var myArea = new google.maps.Data(); 
myArea.loadGeoJson('myArea.geojson'); 

私はその設定を設定することができます。

myArea.setStyle({ 
strokeColor:"#F00", 
fillColor:"#00F" 
}; 

しかし、私はそのに応じてビューをズームすることはできませんボーダー。

"map.fitBounds()"が機能するためには、myAreaのLatLngBoundsを取得する必要があります。

geoJson-googleマップデータレイヤーからLatLngBoundsを取得するにはどうすればよいですか?

私は、他の多くの種類のデータ(シート、ポリゴン、複数のレイヤー、ポイント、ライン)について多くの情報を見つけましたが、単一のgeojson-dataレイヤーの情報は見つかりませんでした。

私は例えば試してみました:

var SW = myArea.getSouthWest(); 
var NW = myArea.getNorthEast(); 
var bounds = new google.maps.LatLngBounds(SW,NE); 

成功しません:

var bounds = new google.maps.LatLngBounds(); 
map.data.forEach(function(myArea){ 
    myArea.getGeometry().forEachLatLng(function(latlng){ 
    bounds.extend(latlng); 
    }); 
}); 
map.fitBounds(bounds); 

私はまた、手動で拡張を見つけることを試みました。私は問題がGoogleのデータ層の概念にあると思うが、私はこの問題を回避するために何も見つけ出していない。任意のアイデアはどのように単一のgeojsonのGoogleマップのデータ層の境界を取得するには?

+0

の延長に基づいてマップを設定するためのEEDは[MCVE]問題を実証しているしてください。最初の例は動作しなければなりません(forEachはおそらく非同期なので、それを考慮する必要があります) – geocodezip

答えて

0

forEachは非同期です。各関数呼び出しでマップ境界を設定するか、すべてが完了したときにマップ境界を設定する必要があります。これは私の作品:

map.data.forEach(function(myArea) { 
    myArea.getGeometry().forEachLatLng(function(latlng) { 
    bounds.extend(latlng); 
    map.fitBounds(bounds); 
    }); 
}); 

proof of concept fiddle

enter image description here

コードスニペット:

function initialize() { 
 
    // Create a simple map. 
 
    features = []; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 4, 
 
    center: { 
 
     lat: -28, 
 
     lng: 137.883 
 
    } 
 
    }); 
 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 
    // process the loaded GeoJSON data. 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    map.data.addGeoJson(data); 
 
    map.data.forEach(function(myArea) { 
 
    myArea.getGeometry().forEachLatLng(function(latlng) { 
 
     bounds.extend(latlng); 
 
     map.fitBounds(bounds); 
 
    }); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var data = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "name": "test", 
 
     "desc": "test desc", 
 
     "inDailyProgram": true, 
 
     "color": "red" 
 
    }, 
 
    "geometry": { 
 
     "type": "Polygon", 
 
     "coordinates": [ 
 
     [ 
 
      [ 
 
      35.188327, 
 
      31.699929, 
 
      0 
 
      ], 
 
      [ 
 
      35.187895, 
 
      31.699669, 
 
      0 
 
      ], 
 
      [ 
 
      35.187014, 
 
      31.699729, 
 
      0 
 
      ], 
 
      [ 
 
      35.186867, 
 
      31.700016, 
 
      0 
 
      ], 
 
      [ 
 
      35.186783, 
 
      31.700395, 
 
      0 
 
      ], 
 
      [ 
 
      35.186921, 
 
      31.700787, 
 
      0 
 
      ], 
 
      [ 
 
      35.187232, 
 
      31.701291, 
 
      0 
 
      ], 
 
      [ 
 
      35.18763, 
 
      31.701844, 
 
      0 
 
      ], 
 
      [ 
 
      35.187442, 
 
      31.702328, 
 
      0 
 
      ], 
 
      [ 
 
      35.18692, 
 
      31.702779, 
 
      0 
 
      ], 
 
      [ 
 
      35.187064, 
 
      31.703654, 
 
      0 
 
      ], 
 
      [ 
 
      35.187433, 
 
      31.703794, 
 
      0 
 
      ], 
 
      [ 
 
      35.188155, 
 
      31.70344, 
 
      0 
 
      ], 
 
      [ 
 
      35.188921, 
 
      31.702917, 
 
      0 
 
      ], 
 
      [ 
 
      35.189348, 
 
      31.702887, 
 
      0 
 
      ], 
 
      [ 
 
      35.189828, 
 
      31.70302, 
 
      0 
 
      ], 
 
      [ 
 
      35.190313, 
 
      31.703443, 
 
      0 
 
      ], 
 
      [ 
 
      35.190359, 
 
      31.704104, 
 
      0 
 
      ], 
 
      [ 
 
      35.190224, 
 
      31.704348, 
 
      0 
 
      ], 
 
      [ 
 
      35.189797, 
 
      31.704585, 
 
      0 
 
      ], 
 
      [ 
 
      35.189753, 
 
      31.704948, 
 
      0 
 
      ], 
 
      [ 
 
      35.189847, 
 
      31.705107, 
 
      0 
 
      ], 
 
      [ 
 
      35.190187, 
 
      31.705015, 
 
      0 
 
      ], 
 
      [ 
 
      35.190604, 
 
      31.705041, 
 
      0 
 
      ], 
 
      [ 
 
      35.190931, 
 
      31.705171, 
 
      0 
 
      ], 
 
      [ 
 
      35.191435, 
 
      31.70526, 
 
      0 
 
      ], 
 
      [ 
 
      35.191861, 
 
      31.705231, 
 
      0 
 
      ], 
 
      [ 
 
      35.192482, 
 
      31.705008, 
 
      0 
 
      ], 
 
      [ 
 
      35.192945, 
 
      31.704893, 
 
      0 
 
      ], 
 
      [ 
 
      35.193564, 
 
      31.704449, 
 
      0 
 
      ], 
 
      [ 
 
      35.192869, 
 
      31.704004, 
 
      0 
 
      ], 
 
      [ 
 
      35.192256, 
 
      31.703737, 
 
      0 
 
      ], 
 
      [ 
 
      35.191754, 
 
      31.703371, 
 
      0 
 
      ], 
 
      [ 
 
      35.191306, 
 
      31.703001, 
 
      0 
 
      ], 
 
      [ 
 
      35.190838, 
 
      31.702632, 
 
      0 
 
      ], 
 
      [ 
 
      35.190546, 
 
      31.70221, 
 
      0 
 
      ], 
 
      [ 
 
      35.190348, 
 
      31.701739, 
 
      0 
 
      ], 
 
      [ 
 
      35.190323, 
 
      31.701589, 
 
      0 
 
      ], 
 
      [ 
 
      35.189814, 
 
      31.701624, 
 
      0 
 
      ], 
 
      [ 
 
      35.189443, 
 
      31.701456, 
 
      0 
 
      ], 
 
      [ 
 
      35.189108, 
 
      31.701217, 
 
      0 
 
      ], 
 
      [ 
 
      35.188509, 
 
      31.700359, 
 
      0 
 
      ], 
 
      [ 
 
      35.188327, 
 
      31.699929, 
 
      0 
 
      ] 
 
     ] 
 
     ] 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "properties": { 
 
     "name": "test", 
 
     "desc": "test desc", 
 
     "inDailyProgram": true, 
 
     "color": "red" 
 
    }, 
 
    "geometry": { 
 
     "type": "Polygon", 
 
     "coordinates": [ 
 
     [ 
 
      [ 
 
      35.209224, 
 
      31.718497, 
 
      0 
 
      ], 
 
      [ 
 
      35.209775, 
 
      31.718459, 
 
      0 
 
      ], 
 
      [ 
 
      35.210282, 
 
      31.717788, 
 
      0 
 
      ], 
 
      [ 
 
      35.210741, 
 
      31.71723, 
 
      0 
 
      ], 
 
      [ 
 
      35.21132, 
 
      31.716803, 
 
      0 
 
      ], 
 
      [ 
 
      35.211748, 
 
      31.716193, 
 
      0 
 
      ], 
 
      [ 
 
      35.212124, 
 
      31.715632, 
 
      0 
 
      ], 
 
      [ 
 
      35.212315, 
 
      31.714798, 
 
      0 
 
      ], 
 
      [ 
 
      35.21227, 
 
      31.714137, 
 
      0 
 
      ], 
 
      [ 
 
      35.212647, 
 
      31.713599, 
 
      0 
 
      ], 
 
      [ 
 
      35.21316, 
 
      31.713412, 
 
      0 
 
      ], 
 
      [ 
 
      35.214134, 
 
      31.713095, 
 
      0 
 
      ], 
 
      [ 
 
      35.215018, 
 
      31.712675, 
 
      0 
 
      ], 
 
      [ 
 
      35.215822, 
 
      31.7119, 
 
      0 
 
      ], 
 
      [ 
 
      35.21577, 
 
      31.711156, 
 
      0 
 
      ], 
 
      [ 
 
      35.215564, 
 
      31.710175, 
 
      0 
 
      ], 
 
      [ 
 
      35.215104, 
 
      31.709128, 
 
      0 
 
      ], 
 
      [ 
 
      35.21473, 
 
      31.708518, 
 
      0 
 
      ], 
 
      [ 
 
      35.214301, 
 
      31.707911, 
 
      0 
 
      ], 
 
      [ 
 
      35.214086, 
 
      31.707207, 
 
      0 
 
      ], 
 
      [ 
 
      35.213709, 
 
      31.706154, 
 
      0 
 
      ], 
 
      [ 
 
      35.213519, 
 
      31.705807, 
 
      0 
 
      ], 
 
      [ 
 
      35.212415, 
 
      31.705441, 
 
      0 
 
      ], 
 
      [ 
 
      35.211313, 
 
      31.705103, 
 
      0 
 
      ], 
 
      [ 
 
      35.210114, 
 
      31.704964, 
 
      0 
 
      ], 
 
      [ 
 
      35.20915, 
 
      31.705031, 
 
      0 
 
      ], 
 
      [ 
 
      35.208402, 
 
      31.704612, 
 
      0 
 
      ], 
 
      [ 
 
      35.207939, 
 
      31.704119, 
 
      0 
 
      ], 
 
      [ 
 
      35.207657, 
 
      31.704636, 
 
      0 
 
      ], 
 
      [ 
 
      35.207123, 
 
      31.704922, 
 
      0 
 
      ], 
 
      [ 
 
      35.206421, 
 
      31.705164, 
 
      0 
 
      ], 
 
      [ 
 
      35.205969, 
 
      31.70529, 
 
      0 
 
      ], 
 
      [ 
 
      35.205926, 
 
      31.705613, 
 
      0 
 
      ], 
 
      [ 
 
      35.205553, 
 
      31.705808, 
 
      0 
 
      ], 
 
      [ 
 
      35.205577, 
 
      31.706157, 
 
      0 
 
      ], 
 
      [ 
 
      35.205694, 
 
      31.706459, 
 
      0 
 
      ], 
 
      [ 
 
      35.205902, 
 
      31.70686, 
 
      0 
 
      ], 
 
      [ 
 
      35.206285, 
 
      31.707193, 
 
      0 
 
      ], 
 
      [ 
 
      35.206113, 
 
      31.707375, 
 
      0 
 
      ], 
 
      [ 
 
      35.206005, 
 
      31.707544, 
 
      0 
 
      ], 
 
      [ 
 
      35.206139, 
 
      31.707746, 
 
      0 
 
      ], 
 
      [ 
 
      35.206713, 
 
      31.708194, 
 
      0 
 
      ], 
 
      [ 
 
      35.207228, 
 
      31.708428, 
 
      0 
 
      ], 
 
      [ 
 
      35.207474, 
 
      31.708798, 
 
      0 
 
      ], 
 
      [ 
 
      35.207463, 
 
      31.709435, 
 
      0 
 
      ], 
 
      [ 
 
      35.207359, 
 
      31.709878, 
 
      0 
 
      ], 
 
      [ 
 
      35.207255, 
 
      31.710418, 
 
      0 
 
      ], 
 
      [ 
 
      35.207232, 
 
      31.71089, 
 
      0 
 
      ], 
 
      [ 
 
      35.20712, 
 
      31.711257, 
 
      0 
 
      ], 
 
      [ 
 
      35.206802, 
 
      31.711473, 
 
      0 
 
      ], 
 
      [ 
 
      35.206408, 
 
      31.711645, 
 
      0 
 
      ], 
 
      [ 
 
      35.206061, 
 
      31.711753, 
 
      0 
 
      ], 
 
      [ 
 
      35.205639, 
 
      31.711857, 
 
      0 
 
      ], 
 
      [ 
 
      35.205398, 
 
      31.711766, 
 
      0 
 
      ], 
 
      [ 
 
      35.205213, 
 
      31.711698, 
 
      0 
 
      ], 
 
      [ 
 
      35.205289, 
 
      31.711992, 
 
      0 
 
      ], 
 
      [ 
 
      35.205266, 
 
      31.712464, 
 
      0 
 
      ], 
 
      [ 
 
      35.205096, 
 
      31.712808, 
 
      0 
 
      ], 
 
      [ 
 
      35.204885, 
 
      31.713348, 
 
      0 
 
      ], 
 
      [ 
 
      35.204829, 
 
      31.71414, 
 
      0 
 
      ], 
 
      [ 
 
      35.204947, 
 
      31.714644, 
 
      0 
 
      ], 
 
      [ 
 
      35.205089, 
 
      31.715104, 
 
      0 
 
      ], 
 
      [ 
 
      35.205489, 
 
      31.715687, 
 
      0 
 
      ], 
 
      [ 
 
      35.205906, 
 
      31.716113, 
 
      0 
 
      ], 
 
      [ 
 
      35.206464, 
 
      31.716586, 
 
      0 
 
      ], 
 
      [ 
 
      35.20684, 
 
      31.716421, 
 
      0 
 
      ], 
 
      [ 
 
      35.207254, 
 
      31.716005, 
 
      0 
 
      ], 
 
      [ 
 
      35.207524, 
 
      31.715517, 
 
      0 
 
      ], 
 
      [ 
 
      35.207901, 
 
      31.714965, 
 
      0 
 
      ], 
 
      [ 
 
      35.207949, 
 
      31.714464, 
 
      0 
 
      ], 
 
      [ 
 
      35.208022, 
 
      31.713919, 
 
      0 
 
      ], 
 
      [ 
 
      35.20835, 
 
      31.713855, 
 
      0 
 
      ], 
 
      [ 
 
      35.208542, 
 
      31.714229, 
 
      0 
 
      ], 
 
      [ 
 
      35.208847, 
 
      31.71465, 
 
      0 
 
      ], 
 
      [ 
 
      35.209151, 
 
      31.715044, 
 
      0 
 
      ], 
 
      [ 
 
      35.20929, 
 
      31.71545, 
 
      0 
 
      ], 
 
      [ 
 
      35.209362, 
 
      31.715694, 
 
      0 
 
      ], 
 
      [ 
 
      35.209315, 
 
      31.716214, 
 
      0 
 
      ], 
 
      [ 
 
      35.209177, 
 
      31.716619, 
 
      0 
 
      ], 
 
      [ 
 
      35.209031, 
 
      31.716906, 
 
      0 
 
      ], 
 
      [ 
 
      35.208958, 
 
      31.717132, 
 
      0 
 
      ], 
 
      [ 
 
      35.208853, 
 
      31.717333, 
 
      0 
 
      ], 
 
      [ 
 
      35.208878, 
 
      31.717691, 
 
      0 
 
      ], 
 
      [ 
 
      35.209224, 
 
      31.718497, 
 
      0 
 
      ] 
 
     ] 
 
     ] 
 
    } 
 
    }] 
 
};
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

+0

問題は "map.data.addGeoJson"の引数として与えている "データ" )」。私は "データ"として何を入れるべきかわかりません。私はmyArea.loadGeoJson( 'myArea.geojson')でgeojsonデータをロードしましたが、 "map.data.addGeoJson(myArea)"のような引数として与えても機能しません。 –

+0

あなたが発行物を示す[mcve]を提供していれば、私はあなたのデータで私の例を作ることができます。 '.addGeoJson(data)'は有効なGeoJSONを文字列として取り、 'loadGeoJson(URL)'は有効なGeoJSONを外部URLからロードします。 – geocodezip

+0

あなたのコードでは、geoJsonは明らかにコードの最後まで解析され、 "データ"変数として保存されます。あなたのコードでは、geoJsonファイルへの参照が表示されません。私はgeoJsonファイルを持っていますが、私はそれを参照することはできません。あなたが提供したコードを使用すると、「データは初期化時に定義されていません」というエラーが出ます。 –

0

をあなたの場合はn個1エリアタイプ(ポイントやラインではない)にGeoJSONファイル(「yourgeojsonfile」)

function initialize() { 
// Create new base map to your div called "map". 
// Map options removed since map zoomed according to your geojson file 
    var map = new google.maps.Map(document.getElementById("map"))   
// Load yourgeojsonfile and zoom the map to its extends 
        map.data.loadGeoJson('yourgeojsonfile',null,function(){ 
         var bounds = new google.maps.LatLngBounds(); 
             map.data.forEach(function(feature){ 
                 processPoints(feature.getGeometry(),bounds.extend,bounds); 
             }); 
        map.fitBounds(bounds); 
       }); 
} 

// Function for getting the boundaries of geojson (one point area possibility removed) 
function processPoints(geometry,callback,thisArg){ 
    if(geometry instanceof google.maps.LatLng){ 
             callback.call(thisArg,geometry); 
        } 
        else{ 
             geometry.getArray().forEach(function(x){ 
                 processPoints(x,callback,thisArg); 
             }); 
        } 
} 
関連する問題