Leaflet: Webkit 브라우저의 부분 확대 / 축소 수준에서 타일 사이의 공간

몰라. :( Safari에서만 문제를 보았지만 — Chrome / Opera는 정상적으로 작동했습니다.

누구든지 이것이 어떻게 고칠 수 있는지 아이디어가 있습니까?

아이디어가 있지만 "급진적"과 "실험적"이라는 단어와 연결되어 있습니다.

https://github.com/IvanSanchez/Leaflet.gl

제가 발견 한 것 중 하나는 텍스처를 고정해야한다는 것입니다. 즉,이 줄이 제거 된 경우 : https://github.com/IvanSanchez/Leaflet.gl/blob/master/src/core/GlUtil.js#L74 슬라이 버 ( "타일 사이의 공백")가 나타납니다 (텍스처가 삼각형과 타일의 다른면의 절반 픽셀이 표시됩니다). 그래서, 내 추측은 Webkit이 각 이미지의 가장자리에 반 픽셀을 안티 앨리어싱하고 있다는 것입니다.

현재 타일 레이어 삼각형은 은색없이 렌더링되는 완전한 메시를 형성합니다. 그러나 "실험적"이라는 단어는 당분간 그 모든 것입니다.

@mourner Safari에서는 더 강력한 효과가 있지만 Chrome에서도 볼 수 있습니다.

@IvanSanchez 와우 좋은 일이지만 (아직) 사용할 수 있다고 생각하지 않습니다.

@Eschon 예, Retina 화면에서는 눈에 덜 띄기 때문에 아마도 이것을 눈치 채지 못했을 것입니다.

이것은 어떤 경우에는 Firefox에도 영향을 미치는 것 같습니다.
jsFiddle에서 재현 할 수 없지만 해당 사이트 를 보면
Firefox 39와 41.0a2에서 같은 공간을 얻습니다.

편집 : 이것은 iframe의 문제인 것 같습니다. 지도를 직접 열면 재생되지 않습니다.

나는 이것이 많은 해킹없이 1.0에서 가능할 것이라고 의심한다. 백 로그의 맨 아래로 밀고 있습니다.

최신 Chrome에서도 동일한 문제가 발생합니다. OpenStreet지도가 이러한 선으로 잘 표시되지 않으므로 가능한 수정 사항을 찾길 바랍니다. 감사.

특히 어두운지도 나 이미지 (제 경우에는)에서 문제가 상당히 두드러집니다. Ivan이 언급했듯이 브라우저의 앤티 앨리어싱으로 인해 확대 / 축소 중에 _fractional_ 변환으로 인해 타일 사이의 공간이 발생한다고 생각합니다.

더 나은 솔루션을 사용할 수있을 때까지이 해결 방법 (또는 해킹)을 사용하여 타일을 1 픽셀 더 크게 만들고 부작용이 1 픽셀만큼 겹치도록합니다. 그 외에도 타일이 약간 확대되고 크기가 조정됩니다 (1px).

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

@cmulders 해결해 주셔서 감사합니다!
주로 흰색과 파란색의 스키 리조트지도가 있기 때문에. 지금은 공백을 무시했지만 해결 방법이 훨씬 좋아 보입니다.

cartodb 어두운 타일로 jsbin을 만들면 레티 나 화면에서도 선이 보입니다.
http://jsbin.com/ratoli/5/edit?html , js, output

Safari / Chrome 버그, FF 괜찮습니다.

이에 대해 Leaflet없는 Chrome 버그 보고서를 작성해야하므로 향후 Chrome 버전에서 수정됩니다.

@hyperknot 이미 Chrome 버그 보고서가있는 것 같지만 지금은 찾을 수 없습니다.

저는 leafletjs 1.0 베타를 사용하고 있으며 때때로 osx El Capitan의 (최신 : chrome, safari, firefox)에서이 버그를보고 있습니다. 이미지의 transform css 속성을 1px 씩 편집하면 편집 된 타일이 옆에있는 타일과 정렬됩니다.

// ex.
 transform: translate3d(1556px, -81px, 0px);
 // to
 transform: translate3d(1555px, -80px, 0px);

때때로이 버그는 나타나지 않습니다 (1px 차이) !! 이유는 확실하지 않지만 현재지도 컨테이너의 스타일과 관련이 있다고 생각합니다.

편집 : 타일이 렌더링시 올바르게 정렬되고 1px의 차이가 표시되지 않으면지도 이동 이벤트에 간격이 표시됩니다. 동작은 타일 주위에 1px 테두리가 깜박이는 것과 같습니다.

OS X El Capitan의 Safari 9.1에서 문제를 해결하는 CSS 해결 방법을 찾았습니다.

.leaflet-tile-container img {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}

나는 많은 신용을 얻을 수는 없지만 _why_에 힌트를주는 다음 Stackoverflow 답변에서 가져 왔습니다 .

box-shadow를 사용하면 문제가보다 직접적으로 해결됩니다. 상자의 다시 칠하기 크기를 확장하여 WebKit이 추가 픽셀을 다시 칠하도록합니다. 모바일 브라우저에서 박스 섀도우의 알려진 성능 영향은 사용되는 블러 반경과 직접 관련이 있으므로 1 픽셀 섀도우는 거의 영향을주지 않습니다.

다른 사람들이 먼저 시도하면 좋을 수도 있지만 적절한 수정으로 사용할 수 있습니다. 그러나 그것은 나를 위해 작동하며 다른 브라우저에서 문제를 일으키지 않는 것 같습니다.

@href 아마도 그 수정으로 풀 요청을 할 수 있습니까? 그러면 테스트하기가 더 쉬워집니다.

@href @IvanSanchez 이것이 렌더링 성능에 영향을 미치지 않겠습니까? 예를 들어 알파 불투명도가있는 박스 섀도우를 추가하면 모바일 장치에 어떤 영향을 미치는지 프로파일 링해야한다고 생각합니다. 예를 들어 성능에 가시적 인 영향을 미치거나 하드웨어 가속을 비활성화 할 수도 있습니다.

@IvanSanchez 끝났습니다.

이것이 렌더링 성능에 영향을 미치지 않습니까? 예를 들어 알파 불투명도가있는 박스 섀도우를 추가하는 것이 모바일 장치에 어떤 영향을 미치는지 프로파일 링해야한다고 생각합니다. 예를 들어 성능에 가시적 인 영향을 미치거나 패닝을 위해 하드웨어 가속을 비활성화 할 수도 있습니다.

나는 이것의 효과가 무엇인지 전혀 확신하지 못합니다. Stackoverflow 답변에서 이것은 효과가없는 것 같지만 접선 관련 문제에 대한 다른 사람의 의견을 신뢰하는 것입니다. 더 많은 지식을 가진 사람이 그것을 조사하고 내 해결 방법을 프로파일 링 할 수 있다면 확실히 좋은 생각이 될 것입니다.

내가 주변을 검색했을 때 운이 좋았고 다른 사람들이 알기를 원했습니다.

@hyperknot @href 몇 주 안에 테스트 브라우저 세트에 대해 몇 가지 벤치 마크를 수행 할 것입니다.

@IvanSanchez @href 또한이 해킹을 전 세계적으로 적용하는 것이 아니라 영향을받는 브라우저로만 제한하는 것이 좋습니다.

@IvanSanchez 는 Leaflet 렌더링 성능을 프로파일 링하는 데 권장되는 워크 플로가 있습니까?

또한이 해킹을 전 세계적으로 적용하는 것이 아니라 영향을받는 브라우저로만 제한하는 것이 좋습니다.

개인적으로 사파리에서만 볼 수 있으므로 사파리로 제한하는 것이 합리적입니다. 그러나 Chrome에서 이것을 본 사람들에 대한 언급이있었습니다. 다른 웹킷 브라우저에서 여전히이 버그를 보는 사람이 있습니까?

L.Map 생성자 항목에서 선택한 브라우저에 대해서만지도에 CSS 클래스를 추가하는 것은 매우 간단합니다.

@href 내 Chromium 49에 문제가 있습니다.

@hyperknot 이런 종류의 것들을 프로파일 링하는 가장 좋은 방법을

@href 또한이 수정은 내 Chromium 49의 타일을 엉망으로 만듭니다 ... 가장자리가 아닌 전체 이미지를 흐리게 만듭니다. 원본, .leaflet-container { background: black } :

img.leaflet-tile.leaflet-tile-loaded { box-shadow: 0 0 1px rgba(0, 0, 0, 0.05); } :

: crying_cat_face :

이상 하네. Chromium 49 (OS X El Capitan)에서는이 문제가 발생하지 않으며, 박스 섀도우도 영향을 미치지 않는 것 같습니다.

최신 플레이 그라운드 : http://playground-leaflet.rhcloud.com/yid/1/edit?html , output

Webkit 및 Blink 팀에 Leaflet없는 버그를 제출할 것입니다.

좋습니다. 문제를 재현하는 최소한의 Leaflet없는 예제를 성공적으로 만들었습니다.
http://playground-leaflet.rhcloud.com/say/1/edit?html , 출력

제출 된 Chromium 버그 보고서 : https://bugs.chromium.org/p/chromium/issues/detail?id=600120

제출 된 Webkit 버그 : https://bugs.webkit.org/show_bug.cgi?id=156130

img-less 버전 : http://playground-leaflet.rhcloud.com/foqi/1/edit?html , output

[email protected]의 Chromium 버그 보고서의 일부 업데이트

안녕하세요, 여러분들에게 빠른 업데이트를 제공하고 싶습니다. 이 문제에 대해 적극적으로 노력하고 있습니다.

문제는 요소의 로컬 공간에서 사물을 래스터했기 때문입니다. 요소에 부분 변환이 있으면 래스터 화 된 텍스처가 선형 리샘플링을 사용하는 부분 변환과 함께 화면에 붙여 져서 블러가 발생합니다.

해결책은 실제 화면에 픽셀 정렬 된 공간에서 사물을 래스터하는 것입니다. 즉, 래스터 텍스처 대신 벡터 그래픽 명령에 분수 변환을 적용합니다.

수정 사항은 두 부분으로 나뉩니다.

1. 래스터 시스템이 모든 일반 매트릭스로 래스터 할 수있는 첫 번째 부분입니다. 이 부분은 거의 완료되었습니다. WIP가 있지만 여전히 성능 회귀를 일으키는 버그가 있습니다. 며칠 내로 끝낼 것으로 예상됩니다.
   https://codereview.chromium.org/2075873002/
2. 타일링 관리가 다른 래스터 변환과 함께 제공되는 텍스처 세트를 관리 할 수 ​​있도록하는 두 번째 부분입니다. 원래 일반 행렬을 사용했지만 타일 적용 범위 계산이 매우 어려워졌습니다. 대신 번역과 크기 조정 만 지원하는 더 간단한 버전을 작성하겠습니다. 나는 이것이 또 일주일의 작업이 필요할 것이라고 추정한다.

M53 지점으로 착륙하려고하는데 시간이 촉박합니다. 이것은 M54로 고칠 수 있다고 확신합니다.

https://bugs.chromium.org/p/chromium/issues/detail?id=600120

버그 리포터에게 :

업로드 한 테스트 케이스가 Chromium에서 픽셀 스냅을 다른 방식으로 처리 한 엣지 케이스를 트리거했습니다. 타일에 일부 콘텐츠를 추가하면 더 이상 배경에 이음새가 표시되지 않습니다. 가장자리 케이스를 쉽게 고칠 수 있지만 타일 내용물에 이음새가 남아있을 수 있습니다.

이것은 어려운 문제이며, 알려진 유일한 해결책은 CPU / 메모리 비용으로 인해 브라우저가 수행하지 않는 FSAA를 사용하는 것입니다. 모든 공급 업체는 일부 콘텐츠가 부정확 해 보이지만 일부 콘텐츠를 더 멋지게 보이도록 자체 휴리스틱을 개발합니다.

예 : http://jsbin.com/wayapiz/

Chrome은 올바른 지오메트리로 그려 지지만 가장자리가 멈춘 돼지처럼 번집니다.
Firefox는 첫 번째 상자를 49x49로, 두 번째 상자를 49x50으로 그립니다.
Edge는 첫 번째 상자를 50x50으로, 두 번째 상자를 50x49로 그립니다. 둘 다 앨리어싱을 사용합니다.

또한 컨테이너에 회전을 추가하면 모든 구현에서 가장자리가 블리드됩니다.

내 권장 해결 방법은 타일간에 겹침을 추가하는 것입니다. A4 용지로 포스터를 만드는 것과 같습니다. 아이디어는 모든 크기 조정 후 각 타일이 적어도 하나의 픽셀을 오버 드로우하여 각 물리적 픽셀이 적어도 하나의 불투명 픽셀로 덮 이도록 보장하는 것입니다. 겹치는 너비는 지원하려는 가장 작은 크기에 따라 다릅니다. 예를 들어 1/4 크기까지 지원하려면 4 픽셀의 겹침을 추가합니다.

이 문제를 해결하려는 다른 개발자를위한 자세한 분석은 다음과 같습니다.

기자가 업로드 한 재현은 cc에서 최적화 된 코드 경로를 트리거하기 때문에 그다지 좋은 재현이 아닙니다. 완전히 단색의 레이어를 감지하면 콘텐츠 배율 개념이없는 SolidColorLayerImpl로 그립니다. 다음은 단순화 된 재현입니다. http://jsbin.com/hodoxew/

블랙 박스는 크기 (100, 100)의 SolidColorLayerImpl로 그려지며, 크기 (100, 100)의 단일 단색 쿼드가 생성되며, 그리기 변환에 의해 화면에 투영되어 (99.5, 99.5)가됩니다. 앤티 앨리어싱을 사용하면 픽셀의 맨 오른쪽 열과 맨 아래 행이 반투명으로 그려집니다.

반면에 레이어에 무언가를 추가하여 cc를 속여 레이어가 단색이 아닌 색상이라고 생각하도록 만들면 이제 두 가지 경우에 문제가 발생합니다.

1. 마지막 타일은 단색입니다. 예 : http://jsbin.com/zexawa/

내용 크기는 반올림되므로 배율 조정 된 레이어 크기는 (600, 300) * 0.995 = (597, 298.5)에 불과하지만 (597, 299)로 과도하게 그려집니다.

1. 목록 타일은 단색이 아닌 색상입니다. 예 : http://jsbin.com/mewaguf/

내용 크기는 반올림됩니다. 다시 실제 크기 조정 된 콘텐츠는 (600, 300) * 0.995 = (597, 298.5) 만 포함하고 생성 된 쿼드는 (597,299)를 포함합니다. 마지막 픽셀 행은 앤티 앨리어싱으로 인해 반투명해야하지만 실제로는 레이어를 만든 요소의 배경색 인 레이어 배경색으로 채 웁니다.

배경에 이음새가 없지만 내용물이 그것을 덮을 때 배경이 가장자리에 번질 수 있습니다. 예 : http://jsbin.com/vigufo/

비단 색 타일을 사용하는 다른 테스트 사례 :
http://playground-leaflet.rhcloud.com/giqo/edit?output

@hyperknot 환상적인 업데이트이지만이 두 따옴표는 서로 모순되는 것 같습니다 (한 사람은 수정 작업을한다고 말하고 다음 사람은 좋은 수정이 불가능하다고 말합니다). 그래서 우리는 해결책을 기다리거나 영원히 이런 식으로 될 것이라고 받아들일까요?

@mourner 전체 내용을 포함하지 않아 죄송합니다. 물론 당신 말이 맞습니다. 따라서 원래 버그 보고서는 다음과 같습니다.
https://bugs.chromium.org/p/chromium/issues/detail?id=600120

한 시점에서 다른 문제로 병합되었습니다.
https://bugs.chromium.org/p/chromium/issues/detail?id=521364

그 다른 문제에서 우리는 해결책과 함께 원래의 긴 회신을 받았습니다. 나는 Leaflet 케이스가 그의 작업으로 인해 실제로 해결되었는지 확인할 수 있는지 물었고 그는 대답했습니다.

전단지 문제가 사실 다른 문제로 유감입니다. 600120 호를 다시 열어 분석을 공유하겠습니다.

이제 Leaflet 버그가 다시 열리고 Leaflet 버그 1에서 두 번째 응답을 받았습니다. BTW, 현재 최신 업데이트는 다음과 같습니다.

나는 그들이 그것을 어떻게 처리하는지보기 위해 모바일 구글지도를 보았다. 그들도이 문제에 시달리고있는 것으로 밝혀졌지만, 덜 명확하게하기 위해 몇 가지 UI 트릭을 사용했습니다.

첫 번째는 뷰포트 태그를 사용하여 브라우저 핀치 줌을 허용하지 않고 JS에서 핀치 줌을 구현했습니다. 핀치 줌 중에도 타일 사이의 이음새를 볼 수 있습니다 (고해상도 디스플레이에서는 매우 미묘함). 확대 / 축소 제스처가 끝나면 배율을 가장 가까운 타일 세트에 스냅합니다. 따라서 기본적으로 타일은 확대 / 축소 동작을 제외하고 항상 기본 해상도로 표시됩니다.

솔직히 우리는 아직 확실한 계획이 없습니다. 월요일에 다른 페인트 사람들과 논의 할 것입니다.

BTW, 모바일 Google지도 (웹 사이트의 것 같아요)가 우리와 똑같은 기술을 사용하는 것 같습니다.

@mourner @IvanSanchez will-change를 사용하여 가능한 해결책이있는 몇 가지 핵심 질문 :
https://bugs.chromium.org/p/chromium/issues/detail?id=600120#c15

현재 계층화가 중요합니까? 각 타일이 자체 레이어 (translate3d)로 강제 적용되고 이러한 레이어는 일부 분수 값으로 독립적으로 크기가 조정됩니다.

각 맵 타일을 독립적으로 스케일하는 한 (레이어 사용 또는 drawImageRect + 분수 CTM을 통해) 분수 스케일 값의 경우 픽셀 정렬되지 않은 가장자리를 얻습니다. 이로 인해 불연속 AA가 배경 색상 번짐을 유발하는 일치하는 가장자리 안티 앨리어싱 문제가 발생합니다.

대신 이것이 작동 할 수 있다고 생각하는 방법은 비 분수 스케일 (예 : 1.0)로 맵을 래스터 화 한 다음 원자 적으로 축소하는 것입니다.

1) 개별 타일 레이어 화 방지 ( "transform : translate3d ()"대신 "transform : translate ()"사용)
2) 강제 컨테이너 (전체 맵) 계층화 (컨테이너에서 "transform : scale3d ()"사용)
3) 스케일 == 1.0으로 컨테이너 레이어 래스터 화 강제

이러한 변경으로 맵 타일 이미지는 1.0 배율로 래스터 화되어야하며 (=> 가장자리는 픽셀 정렬 => 시밍 아티팩트 없음) 전체 맵 레이어의 배율을 원자 적으로 축소해야합니다.

불행히도 # 3은 사소한 것이 아니며 제가 생각할 수있는 유일한 방법은

• scale (1) 및 will-change : transform으로 시작 (자세한 내용은 https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/Ufwrhx_iZ7U 참조)
• 첫 번째 래스터 패스 후 레이어 배율을 원하는 값으로 재설정

예 : http://jsbin.com/yaqeru/10/embed?output

chrishtr / danakj 레이어 래스터 스케일 의미를 올바르게 얻었으며 레이어 래스터 화 스케일을 특정 값으로 잠그는 더 좋은 방법이 있습니까?

대답 할 수 있습니까?

수정이 진행 중이 라는 것을 알고 있지만 (그것을 밀어 주셔서 감사합니다!) 그동안 ...

https://gist.github.com/ericsoco/5712076f69f9068b11d41262b9e93666

import leaflet from 'leaflet';
// ...
patchMapTileGapBug();
// ...
function patchMapTileGapBug () {

    // Workaround for 1px lines appearing in some browsers due to fractional transforms
    // and resulting anti-aliasing. adapted from <strong i="9">@cmulders</strong>' solution:
    // https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
    let originalInitTile = leaflet.GridLayer.prototype._initTile;
    if (originalInitTile.isPatched) return;

    leaflet.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });

    leaflet.GridLayer.prototype._initTile.isPatched = true;

}

나는 사람들이 이것을 조사하고있어서 기쁘다. 덜 이상적인 해결 방법으로 누구에게나 유용한 경우 : 관성을 희생하려는 경우 맵 초기화에서 intertia:false 를 설정하면 간격이 제거되고 zoomAnimation:false

나는 이것에 대한 (과도하게 복잡한) 해결책을 찾았다 고 생각하며 https://github.com/Leaflet/Leaflet.TileLayer.NoGap에 올렸습니다-성능이 확실하지 않기 때문에 의견을 환영합니다. 오래된 컴퓨터 / 휴대 전화에서

cc @Eschon @hyperknot

BTW, 버그는 리플렛 부분 확대 나 브라우저 확대 / 축소를 사용할 필요없이 높은 DPI (2560x1140) 화면에서 Chrome을 사용할 때도 발생합니다.

늦은 답변 죄송합니다.

방금 귀하의 솔루션을 테스트했습니다. 데모가 잘 작동했기 때문에 응용 프로그램에 수정 사항을 추가하려고했습니다. 여전히 이전 1.0-dev 버전의 Leaflet을 사용하고 있었기 때문에 http://leafletjs.com/download.html 에서 1.0.0-rc3로 업데이트했습니다.

가장 먼저 눈에 띄는 것은 여기 에 오류가있는 것 같습니다. 정의되지 않은 매핑 오류가 표시되어 this._map 변경했습니다.

그 후 작동했지만 내 작업용 컴퓨터에서 정말 느립니다. 특히 크롬에서는 파이어 폭스도 느렸다.

놀랍게도 제가 테스트 한 휴대폰에는 그다지 큰 영향을 미치지 않았습니다.
Android의 Firefox는 이전과 동일하게 보이지만 Chrome은 약간 느리지 만 나쁘지는 않습니다.
iOS의 Safari도 이전과 거의 같은 것 같습니다.

내가 알아 차린 또 다른 이상한 점은 모바일 Chrome 및 Safari에서 핀치 줌이 고정 수준으로 스냅되는 것 같습니다.

@Eschon 이것을 테스트 해 주셔서 감사합니다!

나는 항상 입력의 실수하기 map 대신 this._map :-(을

그 후 작동했지만 내 작업용 컴퓨터에서 정말 느립니다. 특히 크롬에서는 파이어 폭스도 느렸다.

해당 컴퓨터에서 프로파일 러를 실행할 수 있습니까? 감속이 캔버스 작업과 관련이 있는지 아는 것이 좋습니다. IE9-IE11에서 약간의 성능 저하가 있음을 알았습니다.

이 솔루션이 일부 플랫폼에서 맵을 느리게 만드는지 여부에 따라 완전히 선택 사항으로 만들고 기본적으로 해제하는 것이 합리적 일 수 있습니다. 여기에 몇 가지 피드백이 중요합니다!

OL3 사람들이이 문제를 어떻게 해결하는지, 캔버스 합성을 활성화하기 전에 브라우저에서 성능 감지를 수행하는지 실제로 살펴 보지 않았습니다. 한 번 볼 가치가 있습니다.

내가 알아 차린 또 다른 이상한 점은 모바일 Chrome 및 Safari에서 핀치 줌이 고정 수준으로 스냅되는 것 같습니다.

zoomDelta 및 zoomSnap 옵션을 조작하는 것 뿐이며이 버그와 관련이 없습니다.

해당 컴퓨터에서 프로파일 러를 실행할 수 있습니까? 감속이 캔버스 작업과 관련이 있는지 아는 것이 좋습니다. IE9-IE11에서 약간의 성능 저하가 있음을 알았습니다.

Chrome 개발 도구로 JavaScript CPU 프로필을 기록해야합니까? 나는 그 성능 테스트에 대한 경험이 많지 않기 때문에 그것이 보여주는 데이터를 어떻게 만들어야할지 정말로 모릅니다.

그래, 그게 문제 야. 그런 다음 불꽃 차트에서 넓은 것을 찾으십시오.

나는 수정 사항이있는 프로필을 작성했고 그것없이 다른 프로필을 작성했습니다. 두 프로필에 대해 거의 동일하게 시도했습니다.

수정 된 버전이 _onZoomTransitionEnd 에 의해 발생하는 추가 "피크"(정확한 단어인지 모르겠 음)가 있다는 것을 가장 먼저 발견했습니다.

수정 사항이없는 버전에서는 _onZoomTransitionEnd 1.8ms가 걸렸고 차트에도 표시되지 않았습니다. 수정 사항이있는 버전에서는 6ms가 걸렸고 활동이 "최대"되었습니다.

다른 두 "피크"는 두 프로필에서 매우 비슷해 보이지만 약간 다른 일이 발생하는 것처럼 보이지만 수정 버전에서는 그 차이가 더 큽니다.

어떻게 든 도움이 되었기를 바랍니다. 또한 두 프로필을 저장 했으므로 필요한 경우 어딘가에 업로드 할 수 있습니다.

당분간 더러운 해결 방법으로, 거의 완전히 간격을 제거하는 각 타일에 translate3d 속성을 설정하는 원래 함수에 .002의 배율 인수를 추가합니다. ".002"는 격차를 완전히 없애기 위해 내 테스트 사례에서 가장 낮은 스케일링 요소였습니다. 나는 어떤 부작용도 발견하지 못했습니다.

최신 Chrome, Firefox 및 IE 11에서 테스트되었습니다. 브라우저 내에서 다양한 확대 / 축소 값을 사용하여 창 배율을 150 %로 설정 한 40 "4k 모니터에서 테스트했습니다.

이 버그에 대한 진전이 있습니까? @AlexanderUhl 솔루션이 배치 될 때 이미지를 수정합니까 아니면 이동 / 확대 / 축소 중에 만 영향을 받습니까?

이 문제를 해결하기 위해 will-change CSS 속성이 추가 된 것 같습니다. 여기에 설명 된 FF 성능 경고 만 확인하면됩니다. https://github.com/Leaflet/Leaflet/issues/4686

@themre : scale 속성은 추가 될 때 모든 이미지 타일에 적용되며 영구적입니다. 스타일 속성은 다음과 같습니다.
style="width: 256px; height: 256px; transform: translate3d(545px, 745px, 0px) scale(1.002); opacity: 1;"

그러나 그것은 원치 않는 효과 인 이미지가 약간 늘어날 수 있습니다. will-change CSS 속성이있는 1.0.3 버전을 시도했지만 여전히 흰색 간격이 발생합니다. 좀 더 보려고 노력할 것입니다.

Ofc 그것은 img를 늘립니다, 그것이 접근 방식입니다 ;-) 나는이 해결 방법이 이상적이 아니라는 데 동의하지만 일반적으로 해결 방법의 본질 인 tbh, 그렇지 않습니까? 그럼에도 불구하고이 접근 방식은 무시할 수있는 부작용으로 나에게 가장 적합합니다 (mapbox, here, osm 등의 타일을 사용하는 매핑 애플리케이션 인 사용 사례의 경우).

음, 정상적인 translate 를 사용하면 문제가 사라집니다. translate3d CSS 속성이 일반 번역보다 훨씬 빠른지 모르겠습니다.이 플래그를 옵션으로 추가하는 것이 가장 좋을 것 같습니다. translate3d를 translate로 대체 할 것 같습니다.

실제보기 :

최신 버전 (1.0.3)에서 동일한 문제가 발생합니다.

아마도 1.1에서 수정 될 것입니다.

2017 년 3 월 8 일 수요일 10:13, Gaurav [email protected] 은 다음과 같이 썼습니다.

[이미지 : 이미지]
https://cloud.githubusercontent.com/assets/13112509/23697357/7dcc4cf6-040d-11e7-881a-df3a44254015.png
최신 버전 (1.0.3)에서 동일한 문제가 발생합니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-284987808 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AAeKj_23QbtFCaXeFjGRJcU-jg0284xBks5rjnEvgaJpZM4FO8Jh
.

.leaflet-pane.leaflet-map-pane div를 변환하는 데 사용되는 nx 및 ny 값이 정수로 반올림되면 Safari에서 줄 / 간격 문제가 해결됩니다. 나는 해로운 부작용을 볼 수 없습니다 (내 사용을 위해).

이것을 찾으십시오 :
translate3d("+n.x+"px,"+n.y+"px,0)")
다음으로 대체하십시오.
translate3d("+Math.round(n.x)+"px,"+Math.round(n.y)+"px,0)")

@LudwigBogner (브라우저 확대 / 축소 설정, 예를 들어 확대 / 축소 애니메이션 중)를 수행하면 어쨌든 실패 할 수 있습니다. 번역 자체가 반올림 된 위에 링크 된이 예제를 참조하십시오. http://playground-leaflet.rhcloud.com/vicu/edit?html , output

이것에 물었습니다. 나에게 그것은 Chromium이나 FireFox에 존재하지 않는 것 같습니다. Safari의 일부 부분 확대 / 축소입니다.

진행?

이 문제는 Chrome 및 Firefox (Mac)에 여전히 존재합니다. 저는 zoomDelta와 0.25의 zoomSnap을 사용하고 있습니다.

이상하게도 .leaflet-tile { will-change: auto !important; } (또는 "unset")를 설정하면 Firefox (전용)의 문제가 해결됩니다. 여전히 Chrome에 대한 해결 방법을 찾고 있습니다.

관성을 비활성화하고 반올림을 추가하기 위해 translate3d 코드를 변경하기 위해 제안 된 다른 수정 사항도 작동하지 않았습니다.

@jawinn L_DISABLE_3D 을 true 로 설정하면 성공할 수 있다고 생각합니다. IIRC는 will-change 를 변경하는 것과 거의 동일한 효과가 있습니다. 지도. 줌 애니메이션, 패닝 등에 대해 훨씬 더 나쁜 성능을 제공 할 것입니다.

이 모든 것은 브라우저 구현 세부 사항에 매우 민감하므로이 문제를 염두에두고 살펴 보았습니다.

헉
내가 사용하는 해결 방법은 위의 @cmulders에 의한

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

완벽하지는 않지만 성능에 영향을 미치지 않는다고 말할 수 있습니다.

감사합니다. @Eschon 작동했습니다. Chrome 또는 Firefox에 더 이상 공백이 나타나지 않습니다.

"1px 수정"을 사용하려는 사람들의 경우 이미지가 흐릿 해지고 약간 깨질 수 있습니다.

• 비교 1 : https://diff.pics/RJC_xRHl8aCX/1
• 비교 2 : https://diff.pics/8zvB6-PHdqLm/1

원본 이미지를 렌더링하고 포토샵하는 데 몇 시간을 보냈던 나에게 이것은 용납 할 수없는 일이었습니다. 그래서 저는 L_DISABLE_3D = true 를 사용하고 결국에는 깜빡이는 애니메이션과 급격한 확대를 감수해야했습니다 ..

추가 정보 : 저는 leaflet-rastercoords 플러그인을 사용하고 내지도 설정은 다음과 같습니다.

    map = L.map('map', {
        center: [3250, 1700],
        zoom: 5,
        minZoom: 2,
        maxZoom: 6,
        maxBoundsViscosity: 1,
    });

Q : "타일 사이의 공간"버그가없는 Leaflet의 차선책은 무엇입니까?

내가 직접 Google로 검색 해보 겠지만 누군가 이미이 길을 택했을 수도 있습니다.

@ n3tman NoGap 플러그인도 사용해

@perliedman 이것을 언급 해 주셔서 감사합니다.
안타깝게도 로컬에서 작동하도록 만들 수 없습니다. _initContainer 함수에서 Cannot read property 'appendChild' of undefined 오류가 발생했습니다.
이전 버전의 Leaflet (최대 1.0.2)으로 시도했습니다-동일한 결과. 데모 는 Chrome / Firefox에서 동일한 오류를 보여줍니다.
분명한 것이 누락되었을 수 있습니다. 도와 주시겠습니까?

여기에도 동일한 1px 간격이 있습니다.

Chrome 버전 66.0.3359.139 (64 비트)
Windows 10 (1709)
리플릿 1.3.1

이 문제를 처음 열었을 때 부분 확대 / 축소 수준과 관련되어 있지만 더 이상 유일한 원인이 아닐 수도 있습니다.

최근에 GoogleMutant 플러그인 을 사용하는 프로젝트를 시작했는데 확대 / 축소 수준을 정수로 설정하고

확대 / 축소 및 이동시 간격이 여전히 표시되지만 # 6069와 관련이있는 것으로 보이며 # 6240에 의해 수정 된 것 같습니다.

또한 다른 프로젝트에서 해결 방법을 제거했으며 거기에서도 발생하는 것으로 보이므로 GoogleMutant 플러그인에만 국한되지 않습니다.

@cmulders 1px 해결 방법에서 영감을

(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();
            var map = this._map;
            var isFix = function() {
                return !(parseFloat(tile.style.width) % 0 === 0);
            };
            var fixOn = function() {
                if(!isFix()) return;
                tile.style.width = tileSize.x + 0.5 + 'px';
                tile.style.height = tileSize.y + 0.5 + 'px';
            };
            var fixOff = function() {
                if(isFix()) return;
                tile.style.width = tileSize.x + 'px';
                tile.style.height = tileSize.y + 'px';
            };
            var checkFix = function(){
                var zoom = map.getZoom();
                if(zoom % 1 === 0) {
                    fixOff();
                }
                else {
                    fixOn();
                }                
            };
            map.on('zoomstart',fixOn);
            map.on('zoomend',checkFix);
            checkFix();
        }
    });
})()

3 년이 지난 후에도이 버그는 여전히 Chrome에서 해결되지 않았습니다! Firefox 또는 Safari에서 효과가 보이지 않습니다. 작업 해주신 @cmulders 에게 감사드립니다!

여기에서도 동일합니다 (Windows 7 Enterprise SP1). Firefox의 여기 저기 라인, Chrome에서는 완전한 라인 그리드, IE11에서는 괜찮습니다. @cmulders fix는 Firefox 및 Chrome에서 작동합니다.

다음은 몇 가지 추가 테스트의 전체 결과입니다.

• Windows 7 Enterprise SP1
  
  
  
  • IE11 : 확인
  
  
  • Chrome, Firefox : 비정상
  
  
• 윈도우 10
  
  
  
  • IE11, Edge, Firefox : 확인
  
  
  • 크롬 : 괜찮지 않음
  
  
• 맥 OS
  
  
  
  • Safari, Chrome, Firefox : 확인
  
  
• 리눅스 :
  
  
  
  • Chrome, Firefox : 확인
  
  
• 기계적 인조 인간:
  
  
  
  • Chrome, Firefox : 확인
  
  
  • WebView를 사용하는 앱 : 확인
  
  

추가 테스트는 이것이 Leaflet과 관련이없는 매우 낮은 수준의 문제임을 보여주었습니다.
Windows 7 Enterprise SP1에서의 테스트는 처음에 두 대의 다른 PC에서 이루어졌지만 둘 다 NVIDIA 그래픽을 사용했습니다.

AMD Radeon 그래픽을 사용하는 Windows 7 Enterprise SP1에서 동일한 테스트를 수행했을 때 Chrome 또는 Firefox의 타일 사이에 줄이없는 상태로 괜찮 았습니다!

NoGap 이 이전에 언급 되었 듯이, 저는 원래 코드를 가져 와서 현재 리플렛 버전 (예 : 리플렛 ^ 1.3.3)에서 작동하도록 수정했음을 알려 드리고자합니다.
https://github.com/Endebert/squadmc/blob/master/src/assets/Leaflet_extensions/NoGapTileLayer.js

그런 다음 일반 TileLayer처럼 사용할 수 있습니다. https://github.com/Endebert/squadmc/blob/master/src/assets/SquadMap.js#L34

es6 기능을 사용하고 있으므로 작동하도록 수정해야 할 수도 있습니다.

NoGap 이 이전에 언급 되었 듯이, 저는 원래 코드를 가져 와서 현재 리플렛 버전 (예 : 리플렛 ^ 1.3.3)에서 작동하도록 수정했음을 알려 드리고자합니다.
https://github.com/Endebert/squadmc/blob/master/src/assets/Leaflet_extensions/NoGapTileLayer.js

그런 다음 일반 TileLayer처럼 사용할 수 있습니다. https://github.com/Endebert/squadmc/blob/master/src/assets/SquadMap.js#L34

es6 기능을 사용하고 있으므로 작동하도록 수정해야 할 수도 있습니다.

@Endebert NoGap이 작동하도록 관리 했습니까? 얼마 전에 @ n3tman 과 같은 오류가 발생했습니다.
Cannot read property 'appendChild' of undefined _initContainer 함수에 Cannot read property 'appendChild' of undefined 오류가 있습니다.

는 내가 추가되어 버전에서 발견 변경 try ... catch 통화에 level.ctx.drawImage(imageSource, offset.x, offset.y, tileSize.x, tileSize.y);
도움이되지 않았습니다.

@TomazicM 예, 내 앱 SquadMC 에서 구현이 사용되고 있습니다. 데스크톱에서는 그다지 명확하지 않을 수 있지만 모바일에서는 스냅없는 부분 확대 / 축소가 활성화 된 것이 분명합니다.

구현과 관련하여 : 원래 버전은 TileLayer.include() 사용하고 TileLayer.extend() 합니다. 그게 중요한 차이점이라고 생각합니다. 언급했듯이 TileLayer 대신 사용하도록 의도 된 새로운 클래스입니다.

음, 여기 2 시간 동안 조사한 결과입니다. 이 문제는 translate3d 내의 픽셀 소수로 인해 발생합니다.

<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(-10.7773px, -8.41406px, 0px);"></div>

이것이 소스 코드 의이 translate3d 사용하지 않기 때문에 L_DISABLE_3D = true 와 잘 작동하는 이유입니다.

해결책

십진수 픽셀을 허용하지 마십시오. 예를 들어 다음과 같이 할 수 있습니다.

• Point 생성자 를 항상 둥근 좌표로 변경
• 또는 translate3d 설정 전 반올림 오프셋

```js
var pos = (offset && offset.round()) || new Point(0, 0);
```

• 또는 수많은 다른 솔루션으로 ...

음, 여기 2 시간 동안 조사한 결과입니다. 이 문제는 translate3d 내의 픽셀 소수로 인해 발생합니다.

오늘은 2019 년이고 translate3d 를 사용하여 최신 브라우저에서 GPU를 사용하도록하는 것은 매우 쓸모가 없습니다. 잘 했어 @mdorda

@mdorda 안녕하세요! 흥미롭게 들리지만 반올림은 https://github.com/Leaflet/Leaflet/issues/3575#issuecomment -327237235에서 이전에 논의되었습니다.

그 이후로 중요한 것이 바뀌 었는지 확실하지 않지만 철저한 테스트를 마치기 전까지는 희망을 얻지 못했습니다.

이 문제를 해결하는 첫 번째 단계는 PR을 제출하여 테스트 할 수 있도록하는 것입니다.

Angular 2+로 작업하는 사람들을 위해 나는 이것을 이렇게 해결했습니다. 내 간단한 사용 사례에서 작동하며 다른 의미에 대해서는 모릅니다 ...

const tileLayer = new TileLayer(this.tileLayerUrlTemplate, this.tileLayerOptions);
tileLayer.on('load', () => {
    for (const tile of Array.from(document.getElementsByClassName('leaflet-tile'))) {
        (<HTMLElement>tile).style.height = (tile.clientHeight + 1) + 'px';
        (<HTMLElement>tile).style.width = (tile.clientWidth + 1) + 'px';
    }
});
this.map.addLayer(tileLayer);

Mozilla Firefox 69.0.1 (64 비트)이 설치된 Windows 10 Pro 1903의 LeafletJS 버전 1.5.1에서 부분 확대시이 픽셀 간격이 보입니다.
픽셀 간격
픽셀 간격의 원인은 translate3d () CSS 함수가 아니라 scale () 일 수 있습니다.

버전 1.5.1에서는 내가 볼 수 있듯이 translate3d () 매개 변수는 정수입니다.

감사합니다. IMMSPgisgroup

이 버그에 대한 해결책을 찾았습니까?

이 순간에도 같은 문제가 발생하여 해결책을 찾지 못했습니다.

나는 ussing :

• 윈도우 10 홈 1803
• Google Chrome Versión 77.0.3865.90 (Build oficial) (64 비트)
• 리플릿 1.5.1

Firefox를 사용할 때 흰색 선이 나타나지 않습니다.

뿡 빵뀨

Na 나는 이것에 대해 몇 년 동안 눈을 떴다. 그들은 여러 가지 해결 방법을 시도했지만 큰 타협 없이는 문제를 해결하지 못했습니다. 문제의 원인은 크롬 업스트림 : https://bugs.chromium.org/p/chromium/issues/detail?id=600120

Chromium 팀의 최신 메시지는 다른 것을 깨뜨리지 않고는하기가 너무 어렵 기 때문에 잠시 멈출 수 있다는 것입니다.

특히 어두운지도 나 이미지 (제 경우에는)에서 문제가 상당히 두드러집니다. Ivan이 언급했듯이 브라우저의 앤티 앨리어싱으로 인해 확대 / 축소 중에 _fractional_ 변환으로 인해 타일 사이의 공간이 발생한다고 생각합니다.

더 나은 솔루션을 사용할 수있을 때까지이 해결 방법 (또는 해킹)을 사용하여 타일을 1 픽셀 더 크게 만들고 부작용이 1 픽셀만큼 겹치도록합니다. 그 외에도 타일이 약간 확대되고 크기가 조정됩니다 (1px).

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

우리는이 솔루션으로 많은 행운을 얻었습니다. 완벽하지는 않지만 우리 의견으로는 선보다 낫습니다.

또한 맵의 배경색이베이스 맵의 색상과 더 일치하도록했습니다. 예를 들어 바다가 진한 파란색이라면 타일이 해당 색상에 겹쳐 지도록하여 눈에 띄는 불일치를 최소화합니다.

다시 완벽하지는 않지만 도움이됩니다.

@colbyfayock 솔루션을 어디에서 어떻게 구현합니까?

반응 앱을 구축 중이므로 다를 수 있지만 다음 내용으로 파일을 만들었습니다.

// Fix via https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
import L from 'leaflet';

(function () {
  if (!L || !L.GridLayer || !L.GridLayer.prototype) return;

  var originalInitTile = L.GridLayer.prototype._initTile;

  L.GridLayer.include({
    _initTile: function (tile) {
      originalInitTile.call(this, tile);

      var tileSize = this.getTileSize();

      tile.style.width = tileSize.x + 1 + 'px';
      tile.style.height = tileSize.y + 1 + 'px';
    }
  });
})();

상단의 반환은 미리 컴파일되고 항상 사용할 수있는 것은 아니기 때문입니다 (여기서는 중요하지 않음).

그런 다음 전단지를 가져온 후 간단히 가져옵니다.

import L from 'leaflet';
...
import '../plugins/leaflet-tilelayer-subpixel-fix';

내 해결 방법은 소스 코드에 변경 사항을 적용하지 않고 변환 값을 반올림하는 것입니다.
반응과 함께 사용하지만 JQuery이므로 모든 프런트 엔드에서 사용할 수 있습니다.
그것이 최선의 선택이라고 말하지 않고 그냥 끝내십시오.
이것은 문제를 해결하고 어떤 종류의 눈에 띄는 흐림이나 결함을 관찰하지 못했습니다. 시도할만한 가치가 있습니다.

    this.leftMap.on('move', () => {
      const mapDiv = window.document.getElementsByClassName("leaflet-pane leaflet-map-pane")
      let styleString = mapDiv.getAttribute("style");
      const transformValue = styleString.substring(styleString.indexOf("(")+1,styleString.indexOf("px,"));
      const roundedTransformValue = Math.round(parseFloat(transformValue));
      styleString = styleString.replace(transformValue,roundedTransformValue);
      mapDiv.setAttribute("style",styleString);
    });

@colbyfayock- 나를 위해 그것을 고치지 않는 것 같습니다. :(

줌 스냅 0으로 반응 전단지를 사용하고 있습니다.

솔루션은 우리에게 완벽하지 못했지만, 우리와 같은 일관된 라인은 확실히 없습니다. zoomSnap 기능에 대해 잘 몰랐기 때문에 찾아보아야했습니다. 설명을 읽는 방법에서 0 가 해당 속성과 어떻게 작동하는지 잘 모르겠습니다. 줄이 없이도 여전히 존재하는지 확인하기 위해 제거하려고 했습니까?

https://leafletjs.com/examples/zoom-levels/#fractional -zoom

편집 : 예제 gif 이후 계속 읽기

zoomSnap은 0으로 설정할 수 있습니다. 이는 Leaflet이 확대 / 축소 수준을 맞추지 않음을 의미합니다.

솔루션이 전체 정수 기본 스냅을 초과하여 처리 할 수 ​​없다는 분수 상태에 빠지고 있다고 생각하지만 확실하지 않습니다.

전단지 1.7-dev 및 여전히 문제가 지속됩니다. Windows 7 및 Windows 10에서 Firefox 및 Chrome의 타일 경계선. IE11 및 이전 (비 Crome) Edge에서는 문제가 없으며 새로운 Chrome 기반 Edge에서도 동일한 문제가 발생합니다.

두 가지 작업 솔루션이 있지만 그중 하나도 마음에 들지 않습니다. 하나는 <script>L_DISABLE_3D = true;</script> 3d를 비활성화하는 것이지만 이는 애니메이션 작업이 손실됨을 의미합니다. 다른 하나는 타일 HTML 요소를 1 픽셀 확장하는 것이지만 이는 타일이 약간 흐려짐을 의미합니다.

나는 매우 원시적 인 해결책을 찾았지만 원시적이라는 본질적으로 100 % 작동합니다. 누군가 유용하다고 생각할 수도 있습니다.

해결책은 두 개의 다른 맵 창에 동일한 문제가있는 타일 레이어를 두 번 표시하는 것입니다. 하나는 다른 창 아래에 배치되고 오프셋 [-1, -1]이 있습니다.

코드는 다음과 같습니다.

<style>
  .originOffset {
    transform: translate(-1px, -1px);
  }
</style>

<script>
  var pane1 = map.createPane('pane1');
  var pane2 = map.createPane('pane2');

  pane1.style.zIndex = 210;
  pane2.style.zIndex = 220;

  L.DomUtil.addClass(pane1, 'originOffset');

  var layer1 = L.tileLayer( ... , {
    pane: 'pane1',
    ...
  });
  var layer2 = L.tileLayer( ... , {
    pane: 'pane2,
    ...
  });
  var layer = L.layerGroup([layer1, layer2]);
</script>

@cmulders 제안에서이 줄에 광고가 있고 타일 사이에 더 이상 공간이 없습니다.

map.on ( 'zoomend drag', function () {
$ ( '# map> div.leaflet-pane.leaflet-map-pane> div.leaflet-pane.leaflet-tile-pane> div> div> img'). each (function () {
if (String ($ (this) .css ( "width")). includes ( '. 5') === false) {
var imgW = String ($ (this) .css ( "width")). split ( "px") .join ( ".5")
var imgH = String ($ (this) .css ( "height")). split ( "px") .join ( ".5")
$ (this) .css ( "width", imgW);
$ (this) .css ( "height", imgH);
}
});

나는 @mdorda를 사용 하고 leaflet-map-pane 의 translate3d() 호출에서 픽셀의 분수 대신에 정수가 나온 다음 (블라인더가 켜진 상태에서) 문제가 사라졌습니다. 그리고 모든 것이 다시 아름답습니다. 분수를 보관해야 할 때의 모든 뉘앙스를 이해한다고 주장하지는 않지만 Leaflet이 브라우저의 문제에서 약간의 완화를 제공한다면 바닥에 L.Draggable._onMove 넣어도 괜찮을까요?

    offset.x = Math.floor(offset.x / this._parentScale.x);
    offset.y = Math.floor(offset.y / this._parentScale.y);

또는 L.DomUtils.setTransform

    pos.x = Math.floor(pos.x);
    pos.y = Math.floor(pos.y);

그래서 번역에는 분수가 주어지지 않지만 타일 이미지는 분수 번역이되지 않기 때문에 아마도 낭비 일 것입니다 (맞습니까?).

내 브라우저 설정이 실제 크기가 아닌 확대 된 것을 발견하기 위해 두 시간을 낭비했습니다.
다시 실제로 돌아가서 모두 매력적으로 작동했습니다.

내 브라우저 설정이 실제 크기가 아닌 확대 된 것을 발견하기 위해 두 시간을 낭비했습니다.
다시 실제로 돌아가서 모두 매력적으로 작동했습니다.

@tokenflow :이 주제는 말 그대로 'Webkit 브라우저의 부분 확대 / 축소 수준 에서 타일 사이의 공간'에 관한 것입니다. 나는 정말 자만하지 않으려 고 노력하고 있지만 100 % 확대에 대한 정보가 누구에게나 유용한 기여라고 생각하십니까?

Firefox와 Chromium의 Linux 버전에서이 버그가 발생했습니다.
문제는 (적어도 Firefox의 경우) document.querySelector('.leaflet-tile-container:last-of-type').getAttribute('style') 로 찾을 수있는 주요 .leaflet-tile-container 의 scale() 인 것 같습니다.
예. scale(0.707107) 이지만 모든 img 자식은 너비 / 높이 256입니다. 따라서 계산 : 0.707107 * 256px = 181.019392px , 이것은 십진수입니다. 그런 다음 픽셀을 반올림하고 배율로 취하면 Firefox / Linux에서 작동하는 것처럼 보입니다 : 181px / 256px = 0.70703125 .

디버그에 도움이되는 함수를 작성했습니다.

function getCurrentScale (doFix = false) {
    const tileContainer = document.querySelector('.leaflet-tile-container:last-of-type');

    if (!tileContainer) {
        return;
    }

    const tileStyle = tileContainer.getAttribute('style');
    const scaleRegEx = /scale\(([0-9\.]+)\)/i;
    const matches = scaleRegEx.exec(tileStyle);

    if (!matches || matches.length !== 2) {
        return;
    }

    const scale = parseFloat(matches[1]);

    const mod = (scale * 256) % 1;

    if (mod) {
        console.log('scale is off by px:', mod);
        if (doFix) {
            const newScale = Math.round(scale * 256) / 256;
            console.log('old scale / new scale', scale, newScale);
            const newStyle = tileStyle.replace(scaleRegEx, `scale(${newScale})`);
            tileContainer.setAttribute('style', newStyle);
        }
    } else {
        console.log('scale seems to be fine:', scale);
    }
}

첫 번째 매개 변수로 true 로 호출하면 스케일 고정을 시도합니다. 그러나 이것은 나를 위해 Firefox에서만 작동합니다.

어리 석고 실제로 작동하지 않아야하는 수정 사항을 찾았습니다.

.leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
}

이로 인해 타일 주변에 엄청난 이음새가 생기지 만 전혀 볼 수 없으며 타일 사이의 공간을 수정합니다.

@ ChrisLowe-Takor는 언뜻보기에는 실제로 이유를 알 수 없지만 어떻게 든 실제로 작동하는 것 같습니다.
이것은 내가 지금 사용하고있는 JavaScript 해결 방법보다 더 좋을 수 있지만 좀 더 조사하고 테스트를해야합니다.

@ ChrisLowe-Takor-와우, 나에게도 효과적입니다! 좋은 찾기 👍

@ ChrisLowe-Takor 또한 Leaflet-package를 사용하여 R에서 나를 위해 일하는 것 같습니다. 감사합니다!

@ ChrisLowe-Takor 어쨌든이 트릭은 모든 어리석은 현대 브라우저에서 실제로 수행합니다 (오래된 오래된 IE11에서는 필요하지 않습니다)! 한 가지 염두에 두어야 할 사항이 있습니다. detectRetina 옵션이 타일 레이어에 사용되고 디스플레이가 레티 나 디스플레이 인 경우 타일 크기는 125 x 125 픽셀이됩니다.

그러나이 솔루션에는 타일 컨테이너 확장을 기반으로하는 모든 솔루션과 동일한 단점이 있습니다. 타일이 약간 흐려집니다.

@ ChrisLowe-Takor 나는 그것을 시도했다. maxZoom이 maxNativeZoom보다 크면 타일이 제대로 표시되지 않습니다.