경계 다각형 스타일 지정

개요

지형지물 레이어의 style 속성을 색상, 불투명도, 선 두께의 스타일 속성을 정의하는 데 사용할 수 있는 google.maps.FeatureStyleFunction으로 설정하여 경계 다각형의 채우기 및 획의 스타일을 지정할 수 있습니다.

다각형의 스타일을 지정하려면 style 속성을 google.maps.FeatureStyleFunction으로 설정하세요. 스타일 함수를 사용하여 지형지물 레이어에서 개별 다각형의 스타일을 지정하는 로직을 정의할 수 있습니다. featureLayer.style이 설정되면 영향을 받는 지형지물 레이어의 모든 지형지물에 대해 스타일 함수가 실행됩니다. 스타일 속성을 설정할 때 함수가 적용됩니다. 업데이트하려면 스타일 속성을 다시 설정해야 합니다.

스타일 함수는 지형지물에 적용될 때 항상 일관성 있는 결과를 반환해야 합니다. 예를 들어 여러 지형지물의 색상을 무작위로 지정할 경우, 지형지물 스타일 함수에 무작위 부분이 있으면 의도하지 않은 결과가 발생할 수 있으므로 무작위 부분이 없어야 합니다.

이 함수는 레이어의 모든 지형지물에 대해 실행되므로 최적화가 중요합니다. 렌더링 시간에 영향을 주지 않으려면 다음 안내를 따르세요.

필요한 레이어만 사용 설정합니다.
레이어가 더 이상 사용되지 않으면 style을 null로 설정합니다.

지역 지형지물 레이어에서 다각형의 스타일을 지정하려면 다음 단계를 따르세요.

새 지도 ID와 지도 스타일을 아직 만들지 않았으면 시작하기의 단계에 따라 새 지도 ID와 지도 스타일을 만드세요. 지역 지형지물 레이어를 사용 설정해야 합니다.
지도가 초기화될 때 지역 지형지물 레이어에 대한 참조를 가져옵니다.
```
featureLayer = map.getFeatureLayer("LOCALITY");
```
google.maps.FeatureStyleFunction 유형의 스타일 정의를 만듭니다.

지형지물 레이어의 style 속성을 FeatureStyleFunction으로 설정합니다. 다음 예에서는 장소 ID가 일치하는 google.maps.Feature에만 스타일을 적용하는 함수를 정의합니다.

TypeScript

// Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions: google.maps.FeatureStyleOptions = {
  strokeColor: '#810FCB',
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: '#810FCB',
  fillOpacity: 0.5
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options: { feature: { placeId: string; }; }) => {
  if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
    return featureStyleOptions;
  }
};index.ts

자바스크립트

// Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions = {
  strokeColor: "#810FCB",
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: "#810FCB",
  fillOpacity: 0.5,
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options) => {
  if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
    // Hana, HI
    return featureStyleOptions;
  }
};index.js

지정된 장소 ID가 없거나 선택된 지형지물 유형과 일치하지 않으면 스타일이 적용되지 않습니다. 예를 들어 '뉴욕시'의 장소 ID와 일치하는 POSTAL_CODE 레이어의 스타일을 지정하려고 하면 스타일이 적용되지 않습니다.

레이어에서 스타일 지정 삭제

레이어에서 스타일 지정을 삭제하려면 style을 null로 설정하세요.

featureLayer.style = null;

장소 ID를 조회하여 지형지물 타겟팅

지역 데이터를 가져오는 방법은 다음과 같습니다.

지역 조회를 요청하여 지역을 검색합니다.
클릭 이벤트에서 데이터를 가져옵니다(클릭된 지역에 해당하는 지형지물을 반환하며 이를 통해 장소 ID, 표시 이름, 지형지물 유형 카테고리애 엑세스할 수 있습니다).

지역 적용 범위 뷰어를 사용하여 지원되는 모든 지역에 사용할 수 있는 Google 경계를 확인합니다.

적용 범위는 지역에 따라 다릅니다. 자세한 내용은 Google 경계 적용 범위를 참고하세요.

지명은 USGS 지명위원회, 미국 지명정보 시스템과 같은 여러 소스에서 제공합니다.

예시 코드 작성

TypeScript

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
  });

  //@ts-ignore
  featureLayer = map.getFeatureLayer('LOCALITY');

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions: google.maps.FeatureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  //@ts-ignore
  featureLayer = map.getFeatureLayer("LOCALITY");

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options) => {
    if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
      // Hana, HI
      return featureStyleOptions;
    }
  };
}

window.initMap = initMap;index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Boundaries Simple</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>index.html

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell