Google지도 타일 오버레이 - 타일 호출시 404 오류 방지?

Question

타일 오버레이를 사용하는 경우 지금까지 본 유일한 방법은 타일을 잡고 X, Y, Z 좌표를 호출하여 타일 집합과 비교하는 것입니다.

var tileOptions = { 
    getTileUrl: function(coord, zoom) { 
     return "/tiles/" + zoom + "_" + coord.x + "_" + coord.y + ".png"; 
    } 
} 

해당 X, Y, Z의 타일이 있으면 정상적으로 발견되어 호출됩니다. 그렇지 않으면 404 오류가 발생합니다. 필자의 경우에는 동시에 6 개 세트의 타일을 동시에 사용할 수 있으며, 타일을 만드는 스크립트는 빈 타일을 생성하지 않으며 타일을 만들지 않으므로 맵이 줌 또는 위치를 변경할 때마다 모든 타일이로드 될 때마다 100440 개의 오류가 발생할 수 있습니다. 시도하고 어떤 부분이 대응하도록 돕는다

, 나는 타일 커버 지역에 타일 검색 제한했습니다

var tileOptions = { 
    if (zoom>=16 && zoom<=20) { 
     if (zoom=16) { if (coord.x>=16000 && coord.x<=16004) { if (coord.y>=24200 && coord.y<=24203) { 
      getTileUrl: function(coord, zoom) { 
       //return the tiles 
      }}} 
     } 
     if (zoom=17) //... 
     } 
     if (zoom=18) //... 
     } 
     //... 
    } 
} 

그러나,이 지역은 8x10으로 블록의 영역에 걸쳐, 그리고하지 않습니다 오버레이로 완전히 덮여있다. 이 메서드는 사용자가지도에서 벗어나려고 할 때 오류를 방지하는 것 외에도 지나치게 복잡해 타일 호출 프로세스의 속도를 늦출 수 있습니다.

따라서 타일을 "호출"하는 것처럼 "배치"하는 방법을 찾고 있습니다 : "타일이 있습니까"라는 질문 대신 404 오류가 나거나 스크립트 또는 함수가 "나는이 타일을 가지고 있습니다."(누락 된) 타일을 무시하고 이상적으로 페이지에 보이는 타일 만로드합니다.

또는 기능을 사용하여 타일이 무엇인지 알 수있는 방법을 찾고 있으므로 제목을 호출하여 404 오류를 피할 수 있습니다.

요컨대, 타일을 호출 할 때 404 오류를 피할 수있는 방법은 무엇입니까? 질문를 작성 후

---

생각 : 나는 처음 이상적인 솔루션이 타일은 사용이있는 경우, 문 경우의 스택을하고 타일보다 동적 인 검사로 변환하고있을 것이라고 가정 실제로 그것을 호출하는 "return"; 그러나 이것은 여전히 ​​동일한 404 오류가 발생하지만 다른 기능에서 발생합니다.

---

사용하여 인덱스 : meetamit (I를 잘 이해하는 경우) 아래 제안으로 타일을 호출하고 사용하는 것보다 처음 오히려 타일의 존재/비 존재를 확인하기 위해 인덱스를 생성 404를 수표로 사용합니다. 그러나 "Z_X_Y.png"형식의 타일 집합을 사용하면 이러한 인덱스를 어떻게 쉽게 만들 수 있습니까?

Answer 1

getTileUrl() 메서드를 구현해야하는 ImageMapType을 확장하는 것처럼 들립니다. 타일을 "호출"하는 것과 반대로 "배치"하려면 Overlay Map Type을 생성해야합니다.이 타일은 본질적으로 더 많이 관여하며 사용하는 설명을 시도 할 때 더욱 복잡해집니다. 404s.

실제로 어떻게 구현하든 상관없이 404를 이미지의 "테스트"로 사용하는 경우 불필요한 서버 연결을 막아 맵 성능을 크게 저하시킬 수 있습니다. 이상적으로 (클라이언트가 암시했듯이) 클라이언트는 사용할 수있는 타일을 나타내는 인덱스를 가지고 있습니다. 색인에서 타일을 사용할 수 없다고 표시하면 getTileUrl()은 null을 반환합니다.즉, Google Maps API가 null urls를로드하려고 시도하지 않는다는 것을 알고 있다고 가정합니다. 그렇지 않은 경우 메서드는 투명한 이미지의 URL을 반환 할 수 있습니다.이 URL은 한 번 캐시되어 누락 된 타일 각각에 대해 다시 사용됩니다.

이 색인을 나타내는 방법은 선택의 문제입니다. 아주 단순한 JSON 일 수도 있습니다 (그렇다고하더라도 모든 클라이언트가 캐시하여 한 번만로드합니다). 또는 창의력을 발휘하고보다 간결한 형식으로 색인을 나타낼 수 있습니다. 예를 들어 흑백 픽셀이 타일의 존재 또는 부족을 나타내는 이미지를 미리 생성 할 수도 있습니다. 그런 다음이 이미지를 <canvas>에 그려서 캔버스에서 적절한 픽셀을 읽어 타일이 존재하는지 확인하십시오.

, 질문의 정제 후

JSON 지수는 다음과 같이 할 수 대답을 추가 :

var index = { 
    "4": { 
    xMin: 10, 
    xMax: 31, 
    yMin: 4, 
    yMax: 11, 
    tiles: [1,1,1,0,1,0,1,1,1,0,1,0,1,0,1,1,1 ...] 
    }, 
    "5": { 
    xMin: 5, 
    xMax: 16, 
    yMin: 2, 
    yMax: 6, 
    tiles: [1,1,1,1,0,0,1,1,1,0,0,1,1 ...] 
    } 
} 

각각의 최상위 객체 수준을 확대에 대응한다. 이 방법으로 index["5"].tiles은 줌 레벨 5의 모든 타일을 제공합니다. 1은 타일을 가지고 있음을 의미하고, 0은 타일을 의미하지 않습니다. 최소/최대 값 xMin, xMax, yMin, yMax은 관심있는 지역을 정의하기위한 것입니다. 타일이 전 세계를 커버하지 않는다고 표시했기 때문입니다. 타일이있는 경우

을 확인하려면 :

function tileExists(z, x, y) { 
    var obj = index[String(z)], 
     tilesPerRow = obj.xMax - obj.xMin, 
     // Calculate the index of tile within the sequential array 
     iTile = (x - obj.xMin) + ((y - obj.yMin) * tilesPerRow); 

    return Boolean(obj.tiles[iTile]); 
} 

를 다시 JSON을 사용하여,이 지수는 정말 큰 얻을 수 있습니다. 그것은 당신이 다루고있는 세상과 줌 레벨에 달려 있습니다. 확대/축소 수준 10에서 전 세계를 대상으로하면 약 1 백만 개의 타일이 생성되므로 정말 큰 배열을 의미합니다. 그런 다음 더 압축 된 형식을 채택해야 할 것입니다. 정의 방법은 사용자에게 달려 있습니다. 배열 [14,2,120,1,201,3]을 "14 1, 2 0, 120 1, 1 0 등"으로 해석하도록 정의 할 수 있습니다. "실제로 데이터가 어떻게 생겼는지, 얼마나 많은 작업을하는지에 따라 달라집니다 당신은 기꺼이/할 수 있습니다. 희망이 충분히 도움이됩니다.