Google 지도의 WMS 레이어

다음 코드는 이제 @googlemaps/ogc 에서 NPM에 게시된 패키지입니다.

AWeb Map Service(WMS)는 HTTP를 통해 지리 참조 이미지를 제공하기 위한 20년 된 표준입니다. Google 지도를 사용하면 개발자가 맞춤 지도 유형을 추가할 수 있습니다. 두 가지를 결합하는 방법을 살펴보겠습니다!

JavaScript를 시작하기 전에 일부 XML을 살펴보고 WMS 표준 및 타일 지도 번호 매기기에 대해 자세히 알아볼 필요가 있습니다.

웹 맵 서비스 표준 정보

WMS 표준은 좌표 참조 시스템(CRS), 경계 상자 및 스타일 선택과 같은 많은 옵션을 제공합니다. 이러한 매개변수는 WMS에 요청GetCapabilities을 전송하여 쿼리할 수 있는 XML 문서에 지정됩니다. 다음은 National Land Cover Database 서버에 대한 응답에서 발췌한 것입니다.

<Layer queryable="1" opaque="0">
    <Name>mrlc_display:NLCD_2016_Land_Cover_L48</Name>
    <Title>NLCD_2016_Land_Cover_L48</Title>
    <Abstract/>
    <KeywordList>
        <Keyword>NLCD_2016_Land_Cover_L48_20210604_3857</Keyword>
        <Keyword>WCS</Keyword>
        <Keyword>ERDASImg</Keyword>
    </KeywordList>
    <CRS>EPSG:3857</CRS>
    <CRS>CRS:84</CRS>
    <EX_GeographicBoundingBox>
        <westBoundLongitude>-130.23282801589895</westBoundLongitude>
        <eastBoundLongitude>-63.6719773760062</eastBoundLongitude>
        <southBoundLatitude>21.742250095963353</southBoundLatitude>
        <northBoundLatitude>52.87726396463256</northBoundLatitude>
    </EX_GeographicBoundingBox>
    <BoundingBox CRS="CRS:84" minx="-130.23282801589895" miny="21.742250095963353" maxx="-63.6719773760062" maxy="52.87726396463256"/>
    <BoundingBox CRS="EPSG:3857" minx="-1.4497452099297844E7" miny="2480607.2664330592" maxx="-7087932.099297844" maxy="6960327.266433059"/>
    <Style>
        <Name>mrlc:mrlc_NLCD_Land_Cover</Name>
        <Title>A boring default style</Title>
        <Abstract>A sample style for rasters</Abstract>
        <LegendURL width="261" height="509">
            <Format>image/png</Format>
            <OnlineResource
                xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="https://www.mrlc.gov/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=mrlc_display%3ANLCD_2016_Land_Cover_L48"/>
            </LegendURL>
        </Style>
    </Layer>

이러한 옵션은 다음을 반환하는 WMS에 대한 GetMap 요청의 쿼리 매개변수가 됩니다.



NLCD 2016 랜드 커버 L48

https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?
&REQUEST=GetMap
&SERVICE=WMS
&VERSION=1.1.1
&LAYERS=mrlc_display:NLCD_2016_Land_Cover_L48
&FORMAT=image/png
&SRS=EPSG:3857  // Web Mercator
&BBOX=-10175297.20791413,5165920.120941021,-10018754.17394622,5322463.154908929 // Coordinates in Web Mecator
&WIDTH=1024
&HEIGHT=1024

BBOX 매개변수의 좌표는 공간 참조 시스템(SRS)에서 지정한 좌표 참조 시스템에 있어야 합니다. 위의 요청에서 웹 메르카토르라고도 하는 EPSG:3857 을 사용하고 있습니다.

Web Mercator , Google Web Mercator , Spherical Mercator , WGS 84 Web Mercator [1] or WGS 84/Pseudo-Mercator is a constiant of the Mercator projection and is the de facto standard for Web mapping applications. It rose to prominence when Google Maps adopted it in 2005. — Wikipedia

Google 지도 ImageMapType

이제 HTTP 요청이 WMS에서 이미지를 검색하는 방법을 기본적으로 이해했으므로 Google 지도에서 지도 유형, 특히 google.maps.ImageMapType 및 google.maps.ImageMapTypeOptions 에 대해 노출하는 인터페이스를 탐색할 수 있습니다.



google.maps.ImageMapType의 인터페이스

귀하getTileUrl는 Google 지도에서 WMS 레이어를 활성화하는 데 필요한 옵션이며 타일 URL을 생성하는 방법은 위에서 설명한 WMS 표준을 따라야 합니다.

getTileUrl 함수를 만드는 두 가지 주요 단계는 다음과 같습니다.

점을 웹 메르카토르 좌표로 변환합니다.

WMS URL을 어셈블합니다.

Web Mercator 좌표에 대한 Tile(Point and Zoom)

웹 메르카토르 좌표를 계산하는 간단한 수학에 뛰어들기 전에 타일 웹 맵과 우리가 작성할 getTileUrl 함수의 매개변수에 대해 조금 더 이해해야 합니다.

대부분의 타일 웹 지도는 특정 Google 지도 규칙을 따릅니다.

타일은 256x256픽셀입니다

.

가장 바깥쪽 확대/축소 수준인 0에서 전체 세계를 단일 지도 타일로 렌더링할 수 있습니다.

각 확대/축소 수준은 두 차원에서 두 배가 되므로 확대할 때 단일 타일이 타일 4개로 대체됩니다.

위의 규칙을 통해 확대/축소 수준 1에서 세계가 아래 표시된 좌표를 사용하여 4개의 타일로 나뉜다는 것을 알고 있습니다.



XYZ 타일 맵 패턴

우리는 또한 웹 메르카토르 범위가 정사각형이고 경계가 -PI * 6378137, PI * 6378137라는 것을 알고 있습니다. 위의 내용이 주어지면 다음을 사용하여 x , y 및 z 에서 좌표로 변환할 수 있습니다.

const EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

function xyzToBounds(x, y, z) {
    const tileSize = EXTENT[1] * 2 / Math.pow(2, z);
    const minx = EXTENT[0] + x * tileSize;
    const maxx = EXTENT[0] + (x + 1) * tileSize;
    // remember y origin starts at top
    const miny = EXTENT[1] - (y + 1) * tileSize;
    const maxy = EXTENT[1] - y * tileSize;
    return [minx, miny, maxx, maxy];
}

xyzToBounds(0, 0, 1)를 호출하면 [-20037508.342789244, 0, 0, 20037508.342789244]가 반환되며 이는 위 다이어그램의 왼쪽 상단 타일에 대해 예상할 수 있는 것입니다.

WMS URL 어셈블

다음 단계는 위에서 정의한 함수를 사용하여 WMS getMap URL의 문자열을 조합하는 것입니다.

const getTileUrl = (coordinates, zoom) => {
  return (
    "https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
    "&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
    "&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
    "&FORMAT=image%2Fpng" +
    "&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
    "&BBOX=" +
    xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
  );
};

함께 모아서

이제 getTileUrl 함수가 있으므로 ImageMapType 를 구성할 수 있습니다. maxZoom가 필수라는 것을 잊지 마세요! 위의 참조 표 또는 here을 참조하십시오.

const landCover = new google.maps.ImageMapType({
  getTileUrl: getTileUrl,
  name: "Land Cover",
  alt: "National Land Cover Database 2016",
  minZoom: 0,
  maxZoom: 19,
  opacity: 1.0map
});

landCover.setMap(map);

그리고 지도에 추가하세요! 대화형 예제는 여기JSFiddle link를 참조하십시오.



NLCD 2016 랜드 커버 L48

메모

XZY, TMS, WTMS는 많은 동시 요청에 대해 최적화될 가능성이 높으며 가능한 경우 WMS를 통해 사용해야 합니다.

TMS는 y의 순서를 제외하고 XYZ와 매우 유사합니다.

모든 WMS가 EPSG:3857를 지원하지는 않지만 더 일반적으로 지원되는 EPSG:4326 좌표(위도 및 경도)로 계산을 수행할 수 있습니다.