타일의 레이어 중심에 리플 릿에지도 중심 맞추기

Question

장소의 평면 이미지를 사용하여 물류 센터지도를 만들려고합니다. 나는 이미지의 좋은 품질을 유지하고 확대 할 수 있어야합니다. 지금까지 저는 Leaflet을 사용하여지도와 MapTiler를 그려서 품질 저하 및 성능 저하없이 확대/축소가 가능한 타일 스키마를 만들었습니다.

나는 모든 것을 설정하고 작동하지만지도 센터와 일치하도록 타일 센터가 필요합니다. 타일 ​​레이어 왼쪽 상단 모서리는 항상지도의 (0,0) 좌표에서 시작됩니다.

예를 들어 확대/축소 수준 3에서 내 이미지는 1536x1280 픽셀이므로 절대 픽셀 좌표를 말하면 왼쪽 위 모퉁이가지도의 좌표 (-768,640)에 있어야합니다.

여기 내 주요 스크립트입니다

내가 중심, setView과 범위,하지만 타일 계층 이동을 만들기에 성공하지 엉망

var map = L.map('map',{ 
    crs: L.CRS.Simple, 
    center:[0,0] 
}).setView([0,0],3); 

//mapHeight and mapWidth are the pixel dimensions of the flat image at max zoom level. 
//In this case it's 6144x4608px. By default the tiles size is 256x256px. 

var southWest = map.unproject([ 0, mapHeight], getMaxZoom()); 
var northEast = map.unproject([ mapWidth, 0 ], getMaxZoom()); 
var mapBounds = new L.LatLngBounds(southWest, northEast); 

L.tileLayer('tile/{z}/{x}/{y}.png',{ 
    minZoom: 2, 
    maxZoom: 5, 
    noWrap:true,   
    bounds:mapBounds 
}).addTo(map); 

.

리플릿의 문서는 당신이 할 수있는 경우 http://leafletjs.com/reference.html

이 제발 도와주세요 여기에서 찾을 수 있습니다. 고맙습니다.

Answer 1

전단지에서 타일 좌표는 내부 메커니즘 (픽셀 좌표)과 밀접하게 관련되어 있습니다. 모든 줌 레벨에 대한

는 CRS 좌표에 투영받을 LatLng 좌표 (즉, EPSG입니다 : 4326 EPSG → : 지구지도와 L.CRS.Simple 맵 수직 플립에 대한 3857), 다음 CRS는에 의존 요인에 의해 조정됩니다 좌표 줌 레벨은 픽셀 좌표를 제공합니다. 레이어 (타일, 마커 등)는이 픽셀 좌표를 사용하여 그려집니다.

( GridLayer 및 TileLayer 모두의) "정상"타일

은 타일 템플릿 URL에 {x} 및 {y} 필드는 단순히 픽셀이 타일 크기로 나눈 좌표입니다. 픽셀 [0, 0]의 타일 256px에는 타일 코드 [0, 0]이 있고 픽셀 [512, 256]의 타일에는 [2, 1] 등이 있습니다.

그러나 L.TileLayer.WMS 코드를 읽으면 타일 URL이 반드시 타일 좌표에 의존하지 않는 것을 알 수 있습니다.

문제로 돌아 가기. 일이 어디에 그들이해야 맞도록

var t = L.tileLayer(…); 

t.getTileUrl = function(coords) { 
    var myZ = coords.z; 
    var myX = coords.x + (8 * Math.pow(2, myZ - 3)); 
    var myY = coords.y + (6 * Math.pow(2, myZ - 3)); 

    return '/tile/' + myZ + '/' + myX + '/' + myY + '.png'; 
} 

코드는 단순한 (그리고 나는 수학을 귀찮게하지 않은 : 같은과 함께 getTileUrl 메서드를 재정의 : 당신은 L.TileLayer.WMS 같은 전략을 사용하여 극복 할 수있다), 그러나 그것은 당신을 바른 길로 인도해야합니다.

---

CRS 좌표 LatLng들간에 변환하는 변환 변환을 적용 L.CRS.Simple에 기초하여 정의 L.CRS를 생성하는 것과 동일한을 달성하기 위해 다른 방법. 리플릿 레포의 src/geo/crs/CRS.Simple.js 및 src/geometry/Transformation.js의 코드가 의미가있는 경우이 방법을 시도해보십시오.