ใช้รูปแบบกับฟีเจอร์ข้อมูลโดยการตั้งค่าพร็อพเพอร์ตี้ 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 | เฮกตาร์ | Shift | วันที่ | SquirrelNumber เฮกตาร์ | อายุ | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | โน้ตสี | ตำแหน่ง | การวัด OverGroundSighter | SpecificLocation | กำลังทำงาน | ไล่ล่า | การปีนเขา | รับประทานอาหาร | การหาอาหาร | กิจกรรมอื่นๆ | Kuks | กาว | Moans | ธงการลากหาง | เท็กทวิต | แนวทาง | เฉยๆ | 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 | 2.1 หมื่นล้าน | AM | 10192018 | 4 | + | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.9688574691102 40.7837825208444) | |||||||||
-73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 1.1 หมื่นล้าน | PM | 10142018 | 8 | เทา | Gray+ | เหนือพื้นดิน | 10 | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.97428114848522 40.775533619083) | ||||||
-73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | ต.ค. | PM | 10172018 | 14 | ผู้ใหญ่ | เทา | Gray+ | ไม่ได้เลือกสิ่งใดเป็นค่าหลัก เลือกสีเทาเป็นไฮไลต์ ปรับเปลี่ยนสำหรับผู้บริหาร | เท็จ | เท็จ | เท็จ | จริง | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | จริง | 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 | 11ช | AM | 10102018 | 3 | ผู้ใหญ่ | ซินนามอน | ขาว | ซินนามอน+ขาว | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | จริง | เท็จ | POINT (-73.9683613516225 40.7725908847499) | ||||||
-73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36 ชม. | AM | 10102018 | 2 | ผู้ใหญ่ | เทา | Gray+ | นอกเฮกตาร์ | ระนาบพื้นดิน | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | 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
เป็น "ยังไม่พัฒนา" หรือ "สวนสนุก"
และสีอื่นๆ ทั้งหมด
เป็นสีเขียว
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>