대규모 래스터 이미지에서 unproject() 및 GeoJSON 데이터와 함께 전단지 flyTo()를 사용하는 방법은 무엇입니까?

Question

'현실 세계'지도 데이터가 아닌 타일로 슬라이스 된 큰 이미지를 사용하여 전단지로 스토리 맵을 제작하고 있습니다. https://commenthol.github.io/leaflet-rastercoords/이 REPO : :이 플러그인을 사용하고 정확하게 좌표를 내 GeoJSON 데이터를로드 및 unprojecting https://github.com/jackdougherty/leaflet-storymap

나의 이미지 맵에 그들을을 나타내는 :

$.getJSON('map.geojson', function(data) { 
    var geojson = L.geoJson(data, { 
    // correctly map the geojson coordinates on the image 
    coordsToLatLng: function (coords) { 
     return rc.unproject(coords) 
    }, 

을하지만 onEachFeature에 도착하면, 나는 충돌

map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], feature.properties['zoom']); 

나는 unproject를 전달하는 시도 : 지리지도 떨어져 방법을 좌표로 내 JSON 파일에서 geometry.coordinates를 호출하지만, 그들에게 너무 빠른 이동을 (unprojecting되지 map.flyTo())와 벽을 해석한다 ed 좌표를 변수에 대입하고 map.flyTo() 및 map.flyTo.unproject (...와 같은 중첩 함수의 변형)를 나타냅니다.

어떻게 래스터 좌표를 flyTo()에 전달합니까?

저는 리플릿에 익숙하지 않고 JavaScript를 처음 사용합니다. 나는 지금까지 내 길을 해킹했지만, 난 곤경에 처해있다. 나는 해결책이 확실하다고 확신한다. 어떤 도움이라도 대단히 감사합니다.

말했다되고 그건

map.flyTo(
    rc.unproject(feature.geometry.coordinates), 
    feature.properties['zoom'] 
); 

, 내가 정확히 표시되지 않는 인정해야합니다 귀하의 경우

Answer 1

당신은 아마 당신이 flyTo에 전달할 수있는 LatLng를로 좌표를 변환하는 rc.unproject을 사용해야합니다 Leaflet 튜토리얼 "Non-geographical maps"을 따라 쉽게 동일한 작업을 수행 할 수 있으므로 전단지 래스터 스코프 플러그인을 사용하는 시점입니다. 당신이 당신의 "래스터"를 변환 할 때마다이와

var yx = L.latLng; 

var xy = function(x, y) { 
    if (L.Util.isArray(x)) { // When doing xy([x, y]); 
    return yx(x[1], x[0]); 
    } 
    return yx(y, x); // When doing xy(x, y); 
}; 

는 전단지로 사용할 수있는 무언가로 조정, 당신은 단지 x이 수평 값 및 y 당신의 수직 하나 인 상태 xy(x, y)을 사용합니다.

추가 된 이점은 다른 많은 것들이 쉽게 호환 될 수 있다는 것입니다.

대신 하나의 이미지의 타일 (즉,이 좌표를 맞추기 위해 튜토리얼 ImageOverlay으로 뻗어있다) 즉, 줌 0에서, 당신의 타일 0/0/0가 전체 좌표를 맞도록, 당신의 CRS 변환을 수정해야합니다 사용하기 때문에 . 또한보십시오 Leaflet custom coordinates on image

ie. 전단 - rastercoords 예의 경우 : 3831 픽셀 너비 X 3101 픽셀 높이

타일 사이즈 :

• 원본 래스터 화상 사이즈
  256 X 256 픽셀
• 수직 "래스터"좌표가 내려가는 동안 증가 (전단지 자습서에서는 위도처럼 올라가는 경향이 큽니다).실제로, 원 화상보다더 포함 4096 X 4096 픽셀이었다 후자 것처럼 (나머지는 흰색으로 채워진) 0/0/0
• 타일 새로운 CRS의

결정 :

• 타일을 0/0/0의 좌표를 포함한다 왼쪽 상단 [0,0] 우하 [4096, 4096] (즉 2^256 * 4 = 256 * 16 = 4096) =>transformation 계수 1로 cients a 및 c 같아야 1/16
• 없음 b 및 d가 0
• 아니오 복귀있다 => 오프셋 필요한 오프셋되지 y 세로 =>c 양수 좌표 따라서

것이 사용될 새로운 CRS :

이제 flyTo은 매우 유사하지만 다른 많은 th INGS도 호환됩니다

map.flyTo(
    xy(feature.geometry.coordinates), 
    feature.properties['zoom'] 
); 

데모 전단지 - rastercoords 예에서 적응하고, 호환성을 입증하기 위해 별도의 플러그인을 사용하여 : https://plnkr.co/edit/Gvei5I0S9yEo6fCYXPuy?p=preview