ใช้รูปแบบกับองค์ประกอบข้อมูลโดยตั้งค่าพร็อพเพอร์ตี้ 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
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;
}
JavaScript
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;
}
ฟังก์ชันสไตล์ควรแสดงผลลัพธ์ที่สอดคล้องกันเสมอเมื่อใช้กับฟีเจอร์ต่างๆ เช่น หากต้องการแรนดอมสีชุดองค์ประกอบ ไม่ควรใช้การแรนดอมในฟังก์ชันสไตล์องค์ประกอบ เนื่องจากอาจทำให้เกิดผลลัพธ์ที่ไม่ต้องการ เนื่องจากฟังก์ชันนี้จะทำงานกับองค์ประกอบทุกรายการในเลเยอร์ การเพิ่มประสิทธิภาพจึงมีความสำคัญ หากไม่ต้องการให้ส่งผลต่อเวลาในการเรนเดอร์ ให้ตั้งค่าสไตล์เป็น null เมื่อไม่มีการใช้เลเยอร์แล้ว
ตัวอย่างการจัดรูปแบบข้อมูลจุด
ตัวอย่างนี้แสดงแนวทางการจัดสไตล์ฟีเจอร์ข้อมูลตามเรขาคณิตจุด
เกี่ยวกับชุดข้อมูล
ชุดข้อมูลที่ใช้ในตัวอย่างนี้เป็นผลจากการสำรวจกระรอกในปี 2018 ในเซ็นทรัลพาร์ค นิวยอร์กซิตี้
ในข้อความที่ตัดตอนมาจากไฟล์ข้อมูล CSV ต่อไปนี้ เราเห็นว่าคอลัมน์ x และ y ใช้สำหรับภูมิศาสตร์ คอลัมน์ LatLng ก็มีให้ แต่ไม่ได้ใช้ในตัวอย่างนี้ เนื่องจากตําแหน่งทางภูมิศาสตร์ต้องแสดงด้วย 2 คอลัมน์ ชุดข้อมูลการสำรวจกระรอกมีจุดข้อมูลต่างๆ ที่หลากหลายซึ่งเกี่ยวข้องกับสีขนและพฤติกรรมที่สังเกตได้ของกระรอก (อย่าลืมเลื่อนในแนวนอนเพื่อดูข้อมูลทั้งหมด)
| X | Y | UniqueSquirrelID | Hectare | Shift | วันที่ | Hectare SquirrelNumber | อายุ | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | Colornotes | ตำแหน่ง | การวัดด้วย AboveGroundSighter | SpecificLocation | กำลังทำงาน | การติดตาม | การปีนเขา | รับประทานอาหาร | การหาอาหาร | กิจกรรมอื่นๆ | Kuks | Quaas | เสียงครวญคราง | Tailflags | Tailtwitches | แนวทาง | เฉยๆ | Runsfrom | OtherInteractions | LatLng |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| -73.9561344937861 | 40.7940823884086 | 37F-PM-1014-03 | 37F | PM | 10142018 | 3 | + | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.9561344937861 40.7940823884086) | |||||||||
| -73.9688574691102 | 40.7837825208444 | 21B-AM-1019-04 | 21,000 ล้าน | AM | 10192018 | 4 | + | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.9688574691102 40.7837825208444) | |||||||||
| -73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 11B | PM | 10142018 | 8 | เทา | สีเทา+ | เหนือพื้นดิน | 10 | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.97428114848522 40.775533619083) | ||||||
| -73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | 32E | PM | 10172018 | 14 | ผู้ใหญ่ | เทา | สีเทา+ | ไม่ได้เลือกรายการใดเป็นรายการหลัก เลือกเป็นไฮไลต์เป็นสีเทา ปรับเปลี่ยนผู้บริหาร | เท็จ | เท็จ | เท็จ | จริง | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | จริง | POINT (-73.9596413903948 40.7903128889029) | ||||||
| -73.9702676472613 | 40.7762126854894 | 13E-AM-1017-05 | 13E | AM | 10172018 | 5 | ผู้ใหญ่ | เทา | ซินนามอน | เทา+ซินนามอน | เหนือพื้นดิน | บนตอไม้ | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.9702676472613 40.7762126854894) | ||||
| -73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11H | AM | 10102018 | 3 | ผู้ใหญ่ | ซินนามอน | ขาว | ซินนามอน+ขาว | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | จริง | เท็จ | POINT (-73.9683613516225 40.7725908847499) | ||||||
| -73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36H | AM | 10102018 | 2 | ผู้ใหญ่ | เทา | สีเทา+ | อยู่นอกเฮกตาร์ | พื้นดิน | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | 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 position = {lat: 40.780101, lng: -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 position = { lat: 40.780101, lng: -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();
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;
}
#legend,
#dataset,
#counter {
background-color: #e5e5e5;
width: 15em;
margin-top: 2em;
margin-left: 1em;
border-radius: 8px;
font-family: Roboto;
overflow: hidden;
}
#dataset select {
border-radius: 0;
padding: 0.1em;
border: 1px solid black;
width: auto;
margin: 0.5em 1em;
}
.title {
padding: 0.5em 1em;
font-weight: bold;
font-size: 1.5em;
margin-bottom: 0.5em;
background-color: rgb(66, 133, 244);
color: white;
width: 100%;
}
.button {
font-size: 1.2em;
margin: 1em;
background-color: rgb(66, 133, 244);
color: white;
padding: 0.5em;
border-radius: 8px;
}
#legend #container {
margin: 0.5em 1em;
display: flex;
}
#legend div .box {
display: flex;
width: 2em;
height: 2em;
border-radius: 50%;
border: 3px solid;
}
#legend div .legend {
display: flex;
padding: 0.5em;
}
HTML
<html>
<head>
<title>Style a point data feature</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
ลองใช้ตัวอย่าง
ตัวอย่างการจัดรูปแบบข้อมูลรูปหลายเหลี่ยม
ตัวอย่างนี้แสดงแนวทางการจัดสไตล์ฟีเจอร์ข้อมูลตามเรขาคณิตรูปหลายเหลี่ยม
เกี่ยวกับชุดข้อมูล
ชุดข้อมูลที่ใช้ในตัวอย่างนี้แสดงสวนสาธารณะในนิวยอร์กซิตี้ ข้อความต่อไปนี้ที่ตัดมาจากไฟล์ 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
]
]
]
]
}
},
จัดสไตล์ฟีเจอร์ข้อมูลรูปหลายเหลี่ยม
โค้ดในตัวอย่างนี้ใช้การระบายสีพิเศษกับองค์ประกอบข้อมูลซึ่งเชื่อมโยงกับ typecategory ของ "Undeveloped" หรือ "Parkway" และระบายสีองค์ประกอบอื่นๆ ทั้งหมดเป็นสีเขียว
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 position = {lat: 40.580732, lng: -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 position = { lat: 40.580732, lng: -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();
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;
}
HTML
<html>
<head>
<title>Style a polygon data feature with more detail</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
ลองใช้ตัวอย่าง
ตัวอย่างการจัดรูปแบบข้อมูลโพลีไลน์
ตัวอย่างนี้แสดงแนวทางการจัดสไตล์ฟีเจอร์ข้อมูลตามเรขาคณิตของเส้นประกอบ
เกี่ยวกับชุดข้อมูล
ชุดข้อมูลที่ใช้ในตัวอย่างนี้แสดงสะพานในพื้นที่ซีแอตเทิล ข้อความต่อไปนี้ที่ตัดมาจากไฟล์ 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 position = {lat: 47.59, lng: -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 position = { lat: 47.59, lng: -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();
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;
}
HTML
<html>
<head>
<title>Style a polyline data feature</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>