2017-12-08 2 views
-1

단일 영역 유형 geojson 파일의 확장을 확대하려면 Google지도가 필요합니다.단일 영역 유형 geojson 파일의 확장을 얻는 방법은 무엇입니까?

내가지도를 구글과 그것을 데이터 계층 만들기 위해 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- 데이터 레이어에는 많은 정보를 찾지 못했습니다.

나는 예를 들면 시도 :

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

나는 또한 수동으로 확장 찾기 위해 시도 : 성공하지

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

. 나는 문제가 Google 데이터 레이어의 개념에 있다고 생각하지만,이 문제를 해결할만한 것을 찾지 못했습니다. 어떤 아이디어가 단일 geojson Google지도 데이터 영역의 경계를 얻는 방법?

+0

문제가된다는 것을 입증 [mcve] 주시기 바랍니다 GeoJson 파일 ("yourgeojsonfile을") (포인트 또는 라인되지 않음). 첫 번째 예제는 작동해야합니다 (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 (데이터)에 인수로 부여하는"데이터 ") ". 나는 "데이터"로 무엇을 넣을 지 모른다. geojson 데이터를 myArea.loadGeoJson ('myArea.geojson')과 함께로드했으나이를 "map.data.addGeoJson (myArea)"와 같은 인수로 제공하면 작동하지 않습니다. –

+0

해당 발행물을 나타내는 [mcve]를 제공했다면 귀하의 데이터를 활용하여 본보기가 될 수 있습니다. '.addGeoJson (data)'는 유효한 GeoJSON을 문자열로 취하고,'loadGeoJson (URL)'은 외부 URL에서 유효한 GeoJSON을로드합니다. – geocodezip

+0

코드에서 geoJson은 분명히 코드 하단으로 파싱되어 "데이터"변수로 저장됩니다. 귀하의 코드에서 geoJson 파일에 대한 참조가 보이지 않습니다.geoJson 파일이 있지만 참조 할 수 없습니다. 제공 한 코드를 사용하면 "초기화시 데이터가 정의되지 않았습니다"오류가 발생합니다. –

0

을 당신이 경우 N EED는 한 지역 형의 확장에 따른지도를 설정하는

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); 
             }); 
        } 
} 
관련 문제