리프 렛지도에 추가 확대/축소 수준 추가

Question

leaflet을 사용하여 예상대로 작동하는 내 타일이있는 사진지도를 만듭니다. 나는이 Quadtree 형식 패턴 다음에서 줌을 방지 할 수있는 방법을 해결하려고 노력

임 :

• 줌 레벨 0 - 전체 맵 폭 = 256px;
• 확대/축소 레벨 1 - 전체 너비 = 512px;
• 확대/축소 레벨 2 - 전체 너비 = 1024px;
• 등등 ... 나는 확대 할 수 있도록하고 싶습니다

25 %의 증가를 말하거나 100 픽셀.

100 개 픽셀 단위의 예 :

• 줌 레벨 0 - 전체 맵 폭 = 200 픽셀;
• 확대/축소 레벨 1 - 전체지도 너비 = 300px;
• 확대/축소 레벨 2 - 전체 너비 = 400px;
• 등등 ...

---

질문 : 이 작업을 수행하는 논리는 무엇입니까? 가능하다면? (노멀 맵과 같은 포장 나던) 내 사진지도 responsive 이상이어야하고, 사용자가 잘 크기를 화면에 맞게 할 수 있도록이 작업을 수행하고자 대한

---

내 이유입니다.

나는 here

Answer 1

볼 짧은 대답은 당신이 아니라 당신은 타일을 미리 렌더링 한있는 줌 레벨을 표시 할 수 있다는 것입니다 수 있습니다 내 문제의 데모를했다. 전단지는 중개 확대 레벨을 생성하지 않습니다.

긴 대답은 할 이것을 사용하기 위해, 당신은 예를 들어, 자신의 CRS 스케일 방법을 정의하고지도에 전달할 필요가있다 :

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, { 
    scale: function (zoom) { 
     // This method should return the tile grid size 
     // (which is always square) for a specific zoom 
     // We want 0 = 200px = 2 tiles @ 100x100px, 
     // 1 = 300px = 3 tiles @ 100x100px, etc. 
     // Ie.: (200 + zoom*100)/100 => 2 + zoom 

     return 2 + zoom; 
    } 
}); 

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

을이 예제에서는 확장했습니다 L.CRS.Simple하지만 원하는 API에서 CRS를 확장하거나 처음부터 직접 만들 수도 있습니다.

확대/축소 비율을 사용하면지도 픽셀 크기가 타일 크기의 배수가 아니므로 오른쪽/아래쪽 가장자리 타일의 일부만지도 데이터로 채워집니다. 이러한 타일의 비 맵 부분을 100 % 투명하게 만들거나 배경과 같은 색상으로 만들면 해결할 수 있습니다.

그러나 내 의견으로는 타일 수가 가장 작은 공통 분모 (이 경우 100 픽셀)와 일치하도록 설정하는 것이 더 좋습니다. 타일 ​​레이어에 tileSize 옵션을 사용하여이를 반영해야합니다. 물론 현재 사용중인 256x256 타일 대신 100x100 픽셀 타일로 이미지를 다시 렌더링해야합니다.

LeafletJS (0.5)의 현재 버전은 TileLayer 클래스가 2의 2 확대/축소 배율을 사용하도록 하드 코드되어 있기 때문에 사용자 정의 scale() 메서드가 작동하지 못하게하는 버그가 있습니다. 그러나, 당신이해야 할 변경 사항은 사소한 것이며 잘하면이 책자의 향후 릴리스에서 해결 될 것입니다.

_getWrapTileNum: function() { 
    // TODO refactor, limit is not valid for non-standard projections 
    return Math.pow(2, this._getZoomForUrl()); 
}, 

하려면 : 간단히에서 TileLayer._getWrapTileNum()을 변경

_getWrapTileNum: function() { 
    return this._map.options.crs.scale(this._getZoomForUrl()); 
},