데이터 지형지물이 mousemove 및 click 이벤트에 응답하도록 하고 이를 사용하여 사용자 상호작용에 따라 지형지물의 모양을 변경합니다.
데이터 세트 영역 이벤트 사용 설정
다음 단계에 따라 데이터 세트 레이어에서 이벤트를 사용 설정합니다.
등록하려는 각 이벤트의 데이터 세트 영역에서
addListener()함수를 호출하여 이벤트 알림에 사용할 데이터 세트 영역을 등록합니다. 이 예에서는 지도도 리스너를 가져옵니다.datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; datasetLayer.addListener('click', handleClick); datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. map.addListener('mousemove', () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; datasetLayer.style = applyStyle; } });
datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; datasetLayer.addListener("click", handleClick); datasetLayer.addListener("mousemove", handleMouseMove); // Map event listener. map.addListener("mousemove", () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; datasetLayer.style = applyStyle; } });
상호작용 유형에 따라 선택한 지형지물의 스타일을 지정하는 이벤트 핸들러 코드를 추가합니다.
// Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; }
// Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; }
지형지물 스타일 함수를 사용하여 스타일을 적용합니다. 여기에 표시된 지형지물 스타일 함수는 상호작용 유형에 따라 조건부로 스타일을 적용합니다. 여기에는
mousemove에서 테두리를 굵게 만드는 스타일,click에서 배경을 변경하는 스타일, 기본 스타일 등 세 가지 스타일이 정의되어 있습니다.const styleDefault = { strokeColor: 'green', strokeWeight: 2.0, strokeOpacity: 1.0, fillColor: 'green', fillOpacity: 0.3, }; const styleClicked = { ...styleDefault, strokeColor: 'blue', fillColor: 'blue', fillOpacity: 0.5, }; const styleMouseMove = { ...styleDefault, strokeWeight: 4.0 }; function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleMouseMove; } return styleDefault; }
const styleDefault = { strokeColor: "green", strokeWeight: 2.0, strokeOpacity: 1.0, fillColor: "green", fillOpacity: 0.3, }; const styleClicked = { ...styleDefault, strokeColor: "blue", fillColor: "blue", fillOpacity: 0.5, }; const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return styleClicked; } //@ts-ignore if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes["globalid"], ) ) { return styleMouseMove; } return styleDefault; }
전체 샘플 코드
let map: google.maps.Map; let lastInteractedFeatureIds = []; let lastClickedFeatureIds = []; let datasetLayer; // Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const position = {lat: 40.780101, lng: -73.967780}; 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 = applyStyle; datasetLayer.addListener('click', handleClick); datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. map.addListener('mousemove', () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; datasetLayer.style = applyStyle; } }); const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } const styleDefault = { strokeColor: 'green', strokeWeight: 2.0, strokeOpacity: 1.0, fillColor: 'green', fillOpacity: 0.3, }; const styleClicked = { ...styleDefault, strokeColor: 'blue', fillColor: 'blue', fillOpacity: 0.5, }; const styleMouseMove = { ...styleDefault, strokeWeight: 4.0 }; function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleMouseMove; } return styleDefault; } 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();
let map; let lastInteractedFeatureIds = []; let lastClickedFeatureIds = []; let datasetLayer; // Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 40.780101, lng: -73.96778 }; 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 = applyStyle; datasetLayer.addListener("click", handleClick); datasetLayer.addListener("mousemove", handleMouseMove); // Map event listener. map.addListener("mousemove", () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; datasetLayer.style = applyStyle; } }); const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } const styleDefault = { strokeColor: "green", strokeWeight: 2.0, strokeOpacity: 1.0, fillColor: "green", fillOpacity: 0.3, }; const styleClicked = { ...styleDefault, strokeColor: "blue", fillColor: "blue", fillOpacity: 0.5, }; const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return styleClicked; } //@ts-ignore if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes["globalid"], ) ) { return styleMouseMove; } return styleDefault; } 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();