데이터 세트 지형지물 레이어의 style 속성을 스타일 지정 로직이 포함될 수 있는 google.maps.FeatureStyleFunction 또는 레이어의 모든 지형지물의 스타일을 균일하게 지정하는 google.maps.FeatureStyleOptions로 설정하여 데이터 지형지물에 스타일을 설정합니다. 데이터 지형지물에 채우기(색상, 불투명도), 획(색상, 불투명도, 획 두께) 및 지름(점) 스타일을 적용할 수 있습니다. 이 페이지에서는 프로그래매틱 방식으로 데이터 세트에 액세스하고 그 지형지물의 스타일을 지정하는 방법을 설명하고 점, 다각형 및 다중선 도형 기반 데이터 지형지물의 스타일 지정 예를 보여줍니다.
데이터 기반 데이터 세트 스타일 지정에서는 데이터 세트를 만드는 데 사용된 지리 공간 데이터 파일로부터 제공된 위도와 경도 좌표를 기반으로 데이터 지형지물을 렌더링합니다.
데이터 지형지물 속성
데이터 세트의 모든 데이터는 지형지물 스타일 함수에서 액세스할 수 있습니다. 데이터 지형지물 속성을 가져오려면 먼저 데이터 세트 내 모든 데이터가 포함된 데이터 세트 지형지물을 가져온 다음, 여기 표시된 대로 원하는 특정 데이터 속성을 가져옵니다.
TypeScript
// 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'];
JavaScript
// 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"];
지형지물 스타일 옵션
지형지물 스타일 옵션에서는 데이터 지형지물 레이어의 스타일을 정의합니다. 예를 들어 다각형의 채우기와 획 또는 점의 색상과 지름의 스타일을 지정합니다. 다음 예에서는 지형지물의 style 속성을 사용하여 직접 적용할 수 있는 지형지물 스타일 옵션을 보여줍니다.
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
지형지물 스타일 함수
데이터 세트 지형지물의 스타일 지정 로직을 정의하려면 지형지물 스타일 함수를 사용하세요.
지형지물의 스타일을 지정하려면 style 속성을 google.maps.FeatureStyleFunction으로 설정하세요.
스타일 함수를 사용하여 지형지물 레이어에서 개별 지형지물의 스타일을 지정하는 로직을 정의할 수 있습니다. featureLayer.style이 설정되면 영향을 받는 지형지물 레이어의 모든 지형지물에 대해 스타일 함수가 실행됩니다. 스타일 속성을 설정할 때 함수가 적용됩니다. 업데이트하려면 스타일 속성을 다시 설정해야 합니다. 다음 예는 간단한 지형지물 스타일 함수를 보여줍니다.
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,
};
}
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,
};
}
스타일 함수는 지형지물에 적용될 때 항상 일관성 있는 결과를 반환해야 합니다. 예를 들어 여러 지형지물의 색상을 무작위로 지정할 경우, 지형지물 스타일 함수에 무작위 부분이 있으면 의도하지 않은 결과가 발생할 수 있으므로 무작위 부분이 없어야 합니다. 이 함수는 레이어의 모든 지형지물에 대해 실행되므로 최적화가 중요합니다. 렌더링 시간에 영향을 주지 않으려면 레이어가 더 이상 사용되지 않을 때 스타일을 null로 설정하세요.
점 데이터 스타일 지정 예
이 예에서는 점 도형 기반 데이터 지형지물의 스타일을 지정하는 방법을 보여줍니다.
데이터 세트 정보
이 예에서 사용되는 데이터 세트는 뉴욕시 센트럴 파크의 2018년 다람쥐 개체수 조사의 결과입니다.
CSV 데이터 파일의 다음 발췌 부분에서, x열 및 y열은 지리적 위치에 사용됩니다. LatLng 열은 포함되지만 지리적 위치는 두 열로 표현해야 하므로 이 예에서는 사용되지 않습니다. 다람쥐 개체수 조사 데이터 세트에는 관찰된 털 색깔 및 다람쥐의 행동과 관련된 매우 다양한 데이터 포인트가 포함됩니다(모두 보려면 가로로 스크롤해야 합니다).
| X | Y | UniqueSquirrelID | Hectare | Shift | Date | Hectare SquirrelNumber | Age | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | Colornotes | Location | AboveGroundSighter Measurement | SpecificLocation | Running | Chasing | Climbing | Eating | Foraging | Other Activities | Kuks | Quaas | Moans | Tailflags | Tailtwitches | Approaches | Indifferent | Runsfrom | OtherInteractions | LatLng |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| -73.9561344937861 | 40.7940823884086 | 37F-PM-1014-03 | 37F | PM | 10142018 | 3 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | POINT (-73.9561344937861 40.7940823884086) | |||||||||
| -73.9688574691102 | 40.7837825208444 | 21B-AM-1019-04 | 21B | AM | 10192018 | 4 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | POINT (-73.9688574691102 40.7837825208444) | |||||||||
| -73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 11B | PM | 10142018 | 8 | Gray | Gray+ | Above Ground | 10 | false | true | false | false | false | false | false | false | false | false | false | false | false | POINT (-73.97428114848522 40.775533619083) | ||||||
| -73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | 32E | PM | 10172018 | 14 | Adult | Gray | Gray+ | Nothing selected as Primary. Gray selected as Highlights. Made executive adjustments. | false | false | false | true | true | false | false | false | false | false | false | false | true | POINT (-73.9596413903948 40.7903128889029) | ||||||
| -73.9702676472613 | 40.7762126854894 | 13E-AM-1017-05 | 13E | AM | 10172018 | 5 | Adult | Gray | Cinnamon | Gray+Cinnamon | Above Ground | on tree stump | false | false | false | false | true | false | false | false | false | false | false | false | false | POINT (-73.9702676472613 40.7762126854894) | ||||
| -73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11H | AM | 10102018 | 3 | Adult | Cinnamon | White | Cinnamon+White | false | false | false | false | true | false | false | false | false | true | false | true | false | POINT (-73.9683613516225 40.7725908847499) | ||||||
| -73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36H | AM | 10102018 | 2 | Adult | Gray | Gray+ | just outside hectare | Ground Plane | FALSE | false | false | false | false | true | false | false | false | false | false | false | false | false | POINT (-73.9541201789795 40.7931811701082) |
점 데이터 지형지물 스타일 지정
이 예의 코드는 각 다람쥐의 기본 및 보조 털 색깔을 결합하는 CombinationofPrimaryandHighlightColor 속성을 기반으로 각 점의 채우기 색상과 획 색상의 스타일을 간단하게 지정합니다.
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;
}
}
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;
}
}
전체 샘플 코드
샘플 소스 코드 전체 보기
TypeScript
let map;
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;
}
}
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.780101, -73.967780);
const map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 17,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
});
// Add the data legend.
makeLegend(map);
// Dataset ID for squirrel dataset.
const datasetId = '02fa1552-37dd-4a95-844f-f99e1c22541f';
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
//@ts-ignore
datasetLayer.style = setStyle;
// 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.BOTTOM_LEFT].push(attributionDiv);
}
// Create a custom control to hold attribution text.
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;
}
function makeLegend(map) {
let colors = {
'black': ['black'],
'cinnamon': ['#8b0000'],
'cinnamon + gray': ['#8b0000','gray'],
'cinnamon + white': ['#8b0000', 'white'],
'gray': ['gray'],
'gray + cinnamon': ['gray', '#8b0000'],
'gray + cinnamon + white': ['silver', '#8b0000'],
'gray + white': ['gray', 'white'],
'no color data': ['yellow'],
};
let legend = document.createElement('div');
legend.id = 'legend';
let title = document.createElement('div');
title.innerText = 'Fur Colors';
title.classList.add('title');
legend.appendChild(title);
let k;
for (k in colors) {
let wrapper = document.createElement('div');
wrapper.id = 'container';
let box = document.createElement('div');
box.style.backgroundColor = colors[k][0];
if (colors[k][1]) {
box.style.borderColor = colors[k][1];
} else {
box.style.borderColor = colors[k][0];
}
box.classList.add('box');
let txt = document.createElement('div');
txt.classList.add('legend');
txt.innerText = k;
wrapper.appendChild(box);
wrapper.appendChild(txt);
legend.appendChild(wrapper);
}
map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend);
}
initMap();
JavaScript
let map;
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;
}
}
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.780101, -73.96778);
const map = new Map(document.getElementById("map"), {
zoom: 17,
center: position,
mapId: "b98e588c46685dd7",
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
});
// Add the data legend.
makeLegend(map);
// Dataset ID for squirrel dataset.
const datasetId = "02fa1552-37dd-4a95-844f-f99e1c22541f";
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
//@ts-ignore
datasetLayer.style = setStyle;
// 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.BOTTOM_LEFT].push(attributionDiv);
}
// Create a custom control to hold attribution text.
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;
}
function makeLegend(map) {
let colors = {
"black": ["black"],
"cinnamon": ["#8b0000"],
"cinnamon + gray": ["#8b0000", "gray"],
"cinnamon + white": ["#8b0000", "white"],
"gray": ["gray"],
"gray + cinnamon": ["gray", "#8b0000"],
"gray + cinnamon + white": ["silver", "#8b0000"],
"gray + white": ["gray", "white"],
"no color data": ["yellow"],
};
let legend = document.createElement("div");
legend.id = "legend";
let title = document.createElement("div");
title.innerText = "Fur Colors";
title.classList.add("title");
legend.appendChild(title);
let k;
for (k in colors) {
let wrapper = document.createElement("div");
wrapper.id = "container";
let box = document.createElement("div");
box.style.backgroundColor = colors[k][0];
if (colors[k][1]) {
box.style.borderColor = colors[k][1];
} else {
box.style.borderColor = colors[k][0];
}
box.classList.add("box");
let txt = document.createElement("div");
txt.classList.add("legend");
txt.innerText = k;
wrapper.appendChild(box);
wrapper.appendChild(txt);
legend.appendChild(wrapper);
}
map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend);
}
initMap();
다각형 데이터 스타일 지정 예
이 예에서는 다각형 도형 기반 데이터 지형지물의 스타일을 지정하는 방법을 보여줍니다.
데이터 세트 정보
이 예에서 사용되는 데이터 세트는 뉴욕시의 공원을 묘사합니다. 데이터 세트 GeoJSON 파일의 다음 발췌 부분은 대표적인 지형지물 항목을 보여줍니다.
{
"type": "Feature",
"properties": {
"jurisdiction": "DPR",
"mapped": "False",
"zipcode": "11356",
"acres": "0.05",
"location": "College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.",
"nys_assembly": "27",
"councildistrict": "19",
"url": "http://www.nycgovparks.org/parks/Q042/",
"typecategory": "Triangle/Plaza",
"us_congress": "14",
"eapply": "Poppenhusen Park",
"parentid": "Q-07",
"gispropnum": "Q042",
"retired": "false",
"communityboard": "407",
"objectid": "6248",
"globalid": "F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5",
"name311": "Poppenhusen Park",
"department": "Q-07",
"pip_ratable": "true",
"subcategory": "Sitting Area/Triangle/Mall",
"precinct": "109",
"permit": "true",
"acquisitiondate": null,
"omppropid": "Q042",
"gisobjid": "100000301",
"signname": "Poppenhusen Park",
"address": null,
"permitparent": "Q-07",
"class": "PARK",
"nys_senate": "11",
"permitdistrict": "Q-07",
"borough": "Q",
"waterfront": "false"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-73.84575702371716,
40.78796240884273
],
[
-73.84593393292693,
40.78796857347548
],
[
-73.84577256469657,
40.787651355629556
],
[
-73.84575702371716,
40.78796240884273
]
]
]
]
}
},
다각형 데이터 지형지물 스타일 지정
이 예의 코드는 'Undeveloped' 또는 'Parkway' typecategory와 연결된 데이터 지형지물에 특별한 색상을 적용하고 다른 지형지물에는 녹색을 적용합니다.
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes['typecategory'];
switch (typeCategory) {
case 'Undeveloped': // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'blue',
fillOpacity: 0.3,
};
break;
case 'Parkway': // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'red',
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
break;
}
}
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes["typecategory"];
switch (typeCategory) {
case "Undeveloped": // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "blue",
fillOpacity: 0.3,
};
break;
case "Parkway": // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "red",
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "green",
fillOpacity: 0.3,
};
break;
}
}
전체 샘플 코드
샘플 소스 코드 전체 보기
TypeScript
let map;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes['typecategory'];
switch (typeCategory) {
case 'Undeveloped': // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'blue',
fillOpacity: 0.3,
};
break;
case 'Parkway': // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'red',
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
break;
}
}
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.580732, -74.152826);
const map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 14,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
});
// Dataset ID for NYC park data.
const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = setStyle;
// 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);
}
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();
JavaScript
let map;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes["typecategory"];
switch (typeCategory) {
case "Undeveloped": // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "blue",
fillOpacity: 0.3,
};
break;
case "Parkway": // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "red",
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "green",
fillOpacity: 0.3,
};
break;
}
}
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.580732, -74.152826);
const map = new Map(document.getElementById("map"), {
zoom: 14,
center: position,
mapId: "b98e588c46685dd7",
mapTypeControl: false,
});
// Dataset ID for NYC park data.
const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f";
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = setStyle;
// 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);
}
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();
다중선 데이터 스타일 지정 예
이 예에서는 다중선 도형 기반 데이터 지형지물의 스타일을 지정하는 방법을 보여줍니다.
데이터 세트 정보
이 예에서 사용되는 데이터 세트는 시애틀 지역의 다리를 보여줍니다. 데이터 세트 GeoJSON 파일의 다음 발췌 부분은 대표적인 지형지물 항목을 보여줍니다.
{
"type": "Feature",
"properties": {
"OBJECTID": 1,
"COMPTYPE": 66,
"COMPKEY": 515774,
"HANSEGKEY": 489781,
"UNITID": "BRG-935",
"UNITTYPE": " ",
"BRGUNITID": "BRG-935",
"UNITDESC_BRG": "YALE AVE BR REV LANE OC ",
"UNITDESC_SEG": "HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB ",
"INSTDATE": null,
"EXPDATE": null,
"STATUS": " ",
"STATUSDT": null,
"CONDITION": " ",
"CONDDT": null,
"OWN": " ",
"LSTVERIFY": null,
"MAINTBY": " ",
"ADDBY": "GARCIAA",
"ADDDTTM": "2010-01-21T00:00:00Z",
"MODBY": null,
"MODDTTM": null,
"BR_NBR": 935,
"BR_CODE": " 935",
"BR_TYPE": "ST",
"BR_NAME": "YALE AVE BR REV LANE OC",
"BR_FACILITIES": "YALE AVE-SR 5 ON RAMP",
"BR_FEATURES": "SR 5 REV LANE",
"BR_RATING": 0,
"BR_INSET": 1,
"BR_GEO": "DT",
"BR_OWNER": "DOT",
"BR_OWNER_NAME": "State of Washington",
"GEOBASID": 0,
"XGEOBASID": 0,
"GISSEGKEY": 489781,
"EARTHQUAKE_RESPONSE_TEAM": " ",
"SHAPE_Length": 220.11891836147655
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-122.329201929090928,
47.616910448708538
],
[
-122.329206483407461,
47.616976719821004
],
[
-122.32921802149356,
47.617042137515213
],
[
-122.329236413912909,
47.617105967923777
],
[
-122.329261454336034,
47.617167494985758
],
[
-122.329292861855023,
47.617226028479571
],
[
-122.329330284134699,
47.617280911766009
],
[
-122.329373301365223,
47.617331529154569
],
[
-122.329421430971635,
47.617377312810319
],
[
-122.329474133027375,
47.617417749124023
],
[
-122.32953081631139,
47.617452384473893
]
]
}
},
다중선 데이터 지형지물 스타일 지정
다음 스니펫은 모든 데이터 지형지물에 직접 동일한 스타일을 적용합니다. 로직이 필요하지 않으므로 이 경우에는 지형지물 스타일 함수가 사용되지 않습니다.
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
샘플 소스 코드 전체 보기
TypeScript
let map;
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(47.59, -122.31);
const map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 14,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
});
// Dataset ID for Seattle Bridges
const datasetId = '3d0bd5fb-3f42-47fe-b50f-81c0932cd533';
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
// 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);
}
// Create a custom control to hold attribution text.
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: Seattle GeoData';
return attributionLabel;
}
initMap();
JavaScript
let map;
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { LatLng } = await google.maps.importLibrary("core");
const position = new LatLng(47.59, -122.31);
const map = new Map(document.getElementById("map"), {
zoom: 14,
center: position,
mapId: "b98e588c46685dd7",
mapTypeControl: false,
});
// Dataset ID for Seattle Bridges
const datasetId = "3d0bd5fb-3f42-47fe-b50f-81c0932cd533";
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
// 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);
}
// Create a custom control to hold attribution text.
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: Seattle GeoData";
return attributionLabel;
}
initMap();