지도에 데이터 세트 추가

플랫폼 선택: Android iOS JavaScript

FeatureStyleFunction은 데이터 세트의 지형지물에 선택적으로 스타일을 지정하는 로직을 정의합니다. 이 로직에 따라 FeatureStyleOptions가 반환됩니다. 스타일 지정 로직이 필요하지 않으면 FeatureStyleOptions를 사용하여 스타일을 직접 설정할 수 있습니다. 이 페이지에서는 지도에 데이터 세트를 추가하고 스타일을 적용하는 방법을 설명합니다.

사전 준비 사항

먼저, 지도 ID와 지도 스타일, 데이터 세트 ID가 있어야 합니다.

• 지도 ID 및 지도 스타일 만들기
• 데이터 세트 만들기 및 업로드

데이터 세트 ID와 지도 스타일 연결

사용 중인 지도 스타일과 데이터 세트를 연결하려면 다음 단계를 따르세요.

1. Google Cloud 콘솔에서 데이터 세트 페이지로 이동합니다.
2. 데이터 세트의 이름을 클릭합니다. 데이터 세트 세부정보 페이지가 나타납니다.
3. 미리보기 탭을 클릭합니다.
4. ADD MAP STYLE(지도 스타일 추가)로 스크롤하여 클릭합니다.
   
5. 연결할 지도 스타일의 체크박스를 클릭한 다음 저장을 클릭합니다.

주의: 지도에서 여러 데이터 세트를 렌더링하면 데이터 세트의 크기와 수에 따라 성능에 영향을 미칠 수 있습니다.

간단한 스타일 규칙 사용

지형지물의 스타일을 지정하는 가장 간단한 방법은 FeatureStyleOptions를 전달하여 색상, 불투명도, 선 두께와 같은 스타일 속성을 정의하는 것입니다. 지형지물 스타일 옵션을 데이터 세트 지형지물 레이어에 직접 적용하거나 FeatureStyleFunction과 함께 사용합니다.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};
index.js

선언적 스타일 규칙 사용

스타일 규칙을 선언적으로 설정하고 데이터 세트 전체에 적용하려면 FeatureStyleFunction을 사용하세요. 데이터 세트 속성 값에 따라 FeatureStyleOptions를 지형지물에 적용합니다. 지형지물의 하위 집합은 계속 보이지 않게 하려는 등의 경우에는 지형지물 스타일 함수에서 null을 반환할 수도 있습니다. 다음은 데이터 속성에 따라 점 집합에 색상을 지정하는 스타일 함수의 예입니다.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  // Get the dataset feature, so we can work with all of its attributes.
  const datasetFeature = params.feature;
  // Get all of the needed dataset attributes.
  const furColors =
    datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];

  // Apply styles. Fill is primary fur color, stroke is secondary fur color.
  switch (furColors) {
    case "Black+":
      return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
      break;
    case "Cinnamon+":
      return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
      break;
    case "Cinnamon+Gray":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "gray",
        pointRadius: 6,
      };
      break;
    case "Cinnamon+White":
      return /* FeatureStyleOptions */ {
        fillColor: "#8b0000",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    case "Gray+":
      return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
      break;
    case "Gray+Cinnamon":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+Cinnamon, White":
      return /* FeatureStyleOptions */ {
        fillColor: "silver",
        strokeColor: "#8b0000",
        pointRadius: 6,
      };
      break;
    case "Gray+White":
      return /* FeatureStyleOptions */ {
        fillColor: "gray",
        strokeColor: "white",
        pointRadius: 6,
      };
      break;
    default: // Color not defined.
      return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 };
      break;
  }
}
index.js

데이터 세트 지형지물 레이어에 스타일 적용

지형지물 스타일 함수로 스타일을 적용하려면 다음 단계를 따르세요.

1. map.getDatasetFeatureLayer()를 호출하여 데이터 세트 지형지물 레이어를 가져와 데이터 세트 ID를 전달합니다.
2. 데이터 세트 레이어에 지형지물 스타일 옵션(예: styleOptions) 또는 함수(예: setStyle)를 설정하여 스타일을 적용합니다.

TypeScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

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

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

featureLayer.style = null;

지형지물의 하위 집합은 계속 보이지 않게 하려는 등의 경우에는 지형지물 스타일 함수에서 null을 반환할 수도 있습니다.

저작자 표시 텍스트 추가

업로드된 데이터 세트를 Google 지도에 표시할 때는 반드시 저작자를 표기해야 합니다. 저작자 표시 텍스트는 Google 로고를 가리거나 Google 로고에 방해가 되어서는 안 됩니다.

저작자 표시 텍스트를 추가하는 한 가지 방법은 맞춤 컨트롤을 사용하여 지도의 표준 위치에 임의의 HTML을 배치하는 것입니다. 다음 코드는 이러한 맞춤 컨트롤을 프로그래매틱 방식으로 만드는 함수의 예입니다.

TypeScript

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;
}
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

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;
}
index.js

컨트롤이 정의되면 여기 표시된 대로 초기화 시점에 컨트롤을 지도에 추가할 수 있습니다.

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

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