데이터 지형지물을 클릭 가능하도록 설정

클릭 리스너를 추가하여 데이터 지형지물이 클릭 이벤트에 반응하도록 설정할 수 있습니다. 다음 예에서는 클릭 이벤트를 수신할 경우 지형지물의 모양이 바뀌는 것을 확인할 수 있습니다.

이벤트 리스너 추가

리스너를 추가하려면 다음 예와 같이 데이터 세트 레이어에서 addListener를 호출합니다.

TypeScript

datasetLayer.addListener('click', handleClick);
index.ts

JavaScript

datasetLayer.addListener("click", handleClick);

index.js

클릭 이벤트 핸들러 추가

데이터 세트 지형지물을 위한 클릭 이벤트 핸들러에서 데이터 세트 속성에 액세스할 수 있습니다. 다음은 클릭된 지형지물의 globalid를 lastClickedFeatureIds라는 이름의 변수에 할당하는 함수 예입니다.

TypeScript

function handleClick( /* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
        // Note, 'globalid' is an attribute in this Dataset.
        e.features.map(f => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = setStyle;
}
index.ts

JavaScript

function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
      // Note, 'globalid' is an attribute in this Dataset.
      e.features.map((f) => f.datasetAttributes["globalid"]);
  }

  //@ts-ignore
  datasetLayer.style = setStyle;
}

index.js

스타일 함수 만들기

스타일 함수에서 클릭된 지형지물의 스타일 속성을 변경할 수 있습니다. 다음은 클릭된 지형지물의 획 색상을 파란색으로 변경하고 나머지 지형지물은 모두 녹색으로 변경하는 스타일 함수 예입니다.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    //@ts-ignore
    if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
      return /* FeatureStyleOptions */ {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: 'blue',
        fillOpacity: 0.5,
      };
    }
    return /* FeatureStyleOptions */ {
      strokeColor: 'green',
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: 'green',
      fillOpacity: 0.3,
    };
}
index.ts

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return /* FeatureStyleOptions */ {
      strokeColor: "blue",
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: "blue",
      fillOpacity: 0.5,
    };
  }
  return /* FeatureStyleOptions */ {
    strokeColor: "green",
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: "green",
    fillOpacity: 0.3,
  };
}

index.js

전체 샘플 코드

TypeScript

let map;
let lastClickedFeatureIds = [];
let datasetLayer;

function handleClick( /* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
        // Note, 'globalid' is an attribute in this Dataset.
        e.features.map(f => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = setStyle;
}

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    //@ts-ignore
    if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
      return /* FeatureStyleOptions */ {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: 'blue',
        fillOpacity: 0.5,
      };
    }
    return /* FeatureStyleOptions */ {
      strokeColor: 'green',
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: 'green',
      fillOpacity: 0.3,
    };
}

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;

    const position = new LatLng(40.796675, -73.946275);
    const map = new Map(document.getElementById('map') as HTMLElement, {
      zoom: 13,
      center: position,
      mapId: 'b98e588c46685dd7',
      mapTypeControl: false,
    });

    // Dataset ID for NYC park data.
    const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';
    //@ts-ignore
    datasetLayer = map.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
    datasetLayer.addListener('click', handleClick);

    const attributionDiv = document.createElement('div');
    const attributionControl = createAttribution(map);
    attributionDiv.appendChild(attributionControl);
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}

initMap();
index.ts

JavaScript

let map;
let lastClickedFeatureIds = [];
let datasetLayer;

function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
      // Note, 'globalid' is an attribute in this Dataset.
      e.features.map((f) => f.datasetAttributes["globalid"]);
  }

  //@ts-ignore
  datasetLayer.style = setStyle;
}

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return /* FeatureStyleOptions */ {
      strokeColor: "blue",
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: "blue",
      fillOpacity: 0.5,
    };
  }
  return /* FeatureStyleOptions */ {
    strokeColor: "green",
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: "green",
    fillOpacity: 0.3,
  };
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { LatLng } = await google.maps.importLibrary("core");
  const position = new LatLng(40.796675, -73.946275);
  const map = new Map(document.getElementById("map"), {
    zoom: 13,
    center: position,
    mapId: "b98e588c46685dd7",
    mapTypeControl: false,
  });
  // Dataset ID for NYC park data.
  const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f";

  //@ts-ignore
  datasetLayer = map.getDatasetFeatureLayer(datasetId);
  datasetLayer.style = setStyle;
  datasetLayer.addListener("click", handleClick);

  const attributionDiv = document.createElement("div");
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}

initMap();
index.js