ใช้สไตล์กับฟีเจอร์ข้อมูลโดยตั้งค่าพร็อพเพอร์ตี้ 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 as google.maps.DatasetFeature; // 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(params: google.maps.FeatureStyleFunctionOptions) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. if ( lastClickedFeatureIds.includes( (datasetFeature as google.maps.DatasetFeature).datasetAttributes .globalid ) ) { return styleClicked; } if ( lastInteractedFeatureIds.includes( (datasetFeature as google.maps.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(params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. if ( lastClickedFeatureIds.includes( datasetFeature.datasetAttributes.globalid ) ) { return styleClicked; } if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes.globalid ) ) { return styleMouseMove; } return styleDefault; }
ฟังก์ชันสไตล์ควรแสดงผลลัพธ์ที่สอดคล้องกันเสมอเมื่อใช้กับฟีเจอร์ ตัวอย่างเช่น หากต้องการสุ่มสีชุดฟีเจอร์ ส่วนสุ่มไม่ควรอยู่ในฟังก์ชันรูปแบบฟีเจอร์ เนื่องจากจะทำให้เกิดผลลัพธ์ที่ไม่ตั้งใจ เนื่องจากฟังก์ชันนี้ทำงานกับทุกฟีเจอร์ในเลเยอร์ การเพิ่มประสิทธิภาพจึงเป็นสิ่งสำคัญ เพื่อหลีกเลี่ยงผลกระทบต่อเวลาในการแสดงผล ให้ตั้งค่าสไตล์เป็น null เมื่อไม่ได้ใช้เลเยอร์แล้ว
ตัวอย่างการจัดรูปแบบข้อมูลจุด
ตัวอย่างนี้แสดงแนวทางการจัดสไตล์ฟีเจอร์ข้อมูลตามเรขาคณิตของจุด
เกี่ยวกับชุดข้อมูล
ชุดข้อมูลที่ใช้ในตัวอย่างนี้เป็นผลลัพธ์จากการสำรวจกระรอกในปี 2018 ในเซ็นทรัลพาร์ก นครนิวยอร์ก
ในข้อความที่ตัดตอนมาจากไฟล์ข้อมูล CSV ต่อไปนี้ เราจะเห็นว่ามีการใช้คอลัมน์ x และ y สำหรับภูมิศาสตร์ มีคอลัมน์ LatLng รวมอยู่ด้วย แต่ไม่ได้ใช้ในตัวอย่างนี้เนื่องจากตำแหน่งทางภูมิศาสตร์ต้องแสดงด้วย 2 คอลัมน์ ชุดข้อมูลการสำรวจจำนวนประชากรกระรอกมีจุดข้อมูลที่หลากหลายและน่าสนใจเกี่ยวกับสีขนและพฤติกรรมของกระรอกที่สังเกตได้ (อย่าลืมเลื่อนในแนวนอนเพื่อดูข้อมูลทั้งหมด)
| X | Y | UniqueSquirrelID | เฮกตาร์ | 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 | 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 | 32E | 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 | 11H | AM | 10102018 | 3 | ผู้ใหญ่ | ซินนามอน | ขาว | น้ำตาลซินนามอน+ขาว | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | จริง | เท็จ | POINT (-73.9683613516225 40.7725908847499) | ||||||
| -73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36H | AM | 10102018 | 2 | ผู้ใหญ่ | เทา | Gray+ | อยู่ด้านนอกของเฮกตาร์ | ระนาบพื้น | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | จริง | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | เท็จ | POINT (-73.9541201789795 40.7931811701082) |
จัดรูปแบบฟีเจอร์ข้อมูลจุด
โค้ดในตัวอย่างนี้ใช้วิธีง่ายๆ ในการจัดรูปแบบสีเติมและสีเส้นขอบสำหรับแต่ละจุดตามแอตทริบิวต์ CombinationofPrimaryandHighlightColor ซึ่งรวมสีขนหลักและสีขนรองของกระรอกแต่ละตัวเข้าด้วยกัน
TypeScript
function setStyle(params: { feature: google.maps.Feature }) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature as google.maps.DatasetFeature; // 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 { fillColor: 'black', pointRadius: 8, }; break; case 'Cinnamon+': return { fillColor: '#8b0000', pointRadius: 8, }; break; case 'Cinnamon+Gray': return { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6, }; break; case 'Cinnamon+White': return { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6, }; break; case 'Gray+': return { fillColor: 'gray', pointRadius: 8, }; break; case 'Gray+Cinnamon': return { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+Cinnamon, White': return { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+White': return { fillColor: 'gray', strokeColor: 'white', pointRadius: 6, }; break; default: // Color not defined. return { fillColor: 'yellow', pointRadius: 8, }; break; } }
JavaScript
function setStyle(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 { fillColor: 'black', pointRadius: 8, }; break; case 'Cinnamon+': return { fillColor: '#8b0000', pointRadius: 8, }; break; case 'Cinnamon+Gray': return { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6, }; break; case 'Cinnamon+White': return { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6, }; break; case 'Gray+': return { fillColor: 'gray', pointRadius: 8, }; break; case 'Gray+Cinnamon': return { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+Cinnamon, White': return { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+White': return { fillColor: 'gray', strokeColor: 'white', pointRadius: 6, }; break; default: // Color not defined. return { fillColor: 'yellow', pointRadius: 8, }; break; } }
โค้ดตัวอย่างที่สมบูรณ์
ดูซอร์สโค้ดตัวอย่างที่เสร็จสมบูรณ์
TypeScript
const mapElement = document.querySelector('gmp-map')!; let innerMap: google.maps.Map; function setStyle(params: { feature: google.maps.Feature }) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature as google.maps.DatasetFeature; // 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 { fillColor: 'black', pointRadius: 8, }; break; case 'Cinnamon+': return { fillColor: '#8b0000', pointRadius: 8, }; break; case 'Cinnamon+Gray': return { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6, }; break; case 'Cinnamon+White': return { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6, }; break; case 'Gray+': return { fillColor: 'gray', pointRadius: 8, }; break; case 'Gray+Cinnamon': return { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+Cinnamon, White': return { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+White': return { fillColor: 'gray', strokeColor: 'white', pointRadius: 6, }; break; default: // Color not defined. return { fillColor: 'yellow', pointRadius: 8, }; break; } } async function init() { // Request needed libraries. const [{ event }] = await Promise.all([ google.maps.importLibrary('core'), google.maps.importLibrary('maps'), ]); // Get the inner map. innerMap = mapElement.innerMap; event.addListenerOnce(innerMap, 'idle', () => { // Add the data legend. makeLegend(); }); // Dataset ID for squirrel dataset. const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e'; const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; } // Creates a legend for the map. function makeLegend() { const 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'], }; const legend = document.getElementById('legend'); legend!.id = 'legend'; const title = document.createElement('div'); title.innerText = 'Fur Colors'; title.classList.add('title'); legend!.appendChild(title); for (const color of Object.keys(colors) as Iterable<keyof typeof colors>) { const wrapper = document.createElement('div'); wrapper.id = 'container'; const box = document.createElement('div'); box.style.backgroundColor = colors[color][0]; if (colors[color][1]) { box.style.borderColor = colors[color][1]; } else { box.style.borderColor = colors[color][0]; } box.classList.add('box'); const txt = document.createElement('div'); txt.classList.add('legend'); txt.innerText = color; wrapper.appendChild(box); wrapper.appendChild(txt); legend!.appendChild(wrapper); } } void init();
JavaScript
const mapElement = document.querySelector('gmp-map'); let innerMap; function setStyle(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 { fillColor: 'black', pointRadius: 8, }; break; case 'Cinnamon+': return { fillColor: '#8b0000', pointRadius: 8, }; break; case 'Cinnamon+Gray': return { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6, }; break; case 'Cinnamon+White': return { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6, }; break; case 'Gray+': return { fillColor: 'gray', pointRadius: 8, }; break; case 'Gray+Cinnamon': return { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+Cinnamon, White': return { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6, }; break; case 'Gray+White': return { fillColor: 'gray', strokeColor: 'white', pointRadius: 6, }; break; default: // Color not defined. return { fillColor: 'yellow', pointRadius: 8, }; break; } } async function init() { // Request needed libraries. const [{ event }] = await Promise.all([ google.maps.importLibrary('core'), google.maps.importLibrary('maps'), ]); // Get the inner map. innerMap = mapElement.innerMap; event.addListenerOnce(innerMap, 'idle', () => { // Add the data legend. makeLegend(); }); // Dataset ID for squirrel dataset. const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e'; const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; } // Creates a legend for the map. function makeLegend() { const 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'], }; const legend = document.getElementById('legend'); legend.id = 'legend'; const title = document.createElement('div'); title.innerText = 'Fur Colors'; title.classList.add('title'); legend.appendChild(title); for (const color of Object.keys(colors)) { const wrapper = document.createElement('div'); wrapper.id = 'container'; const box = document.createElement('div'); box.style.backgroundColor = colors[color][0]; if (colors[color][1]) { box.style.borderColor = colors[color][1]; } else { box.style.borderColor = colors[color][0]; } box.classList.add('box'); const txt = document.createElement('div'); txt.classList.add('legend'); txt.innerText = color; wrapper.appendChild(box); wrapper.appendChild(txt); legend.appendChild(wrapper); } } void init();
CSS
/* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #attributionLabel { background-color: rgba(255, 255, 255, 0.8); font-family: 'Roboto', 'Arial', sans-serif; font-size: 10px; padding: 2px; margin: 2px; } #legend, #dataset, #counter { background-color: #e5e5e5; width: 15em; margin-left: 1em; border-radius: 8px; font-family: Roboto, sans-serif; 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; display: flex; } #legend div .box { display: flex; width: 1em; height: 1em; border-radius: 50%; border: 2px solid; } #legend div .legend { display: flex; padding: 0.3em; }
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>
<script>
// prettier-ignore
(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: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<gmp-map
map-id="5cd2c9ca1cf05670"
center="40.780101, -73.967780"
zoom="17"
map-type-control="false"
street-view-control="false"
fullscreen-control="false">
<div id="legend" slot="control-inline-start-block-start"></div>
<div id="attributionLabel" slot="control-block-end-inline-start">
Data source: NYC Open Data
</div>
</gmp-map>
</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
const setStyle: google.maps.FeatureStyleFunction = (params) => { const datasetFeature = params.feature as google.maps.DatasetFeature; // 'typecategory' is an attribute in this Dataset. const typeCategory = datasetFeature.datasetAttributes.typecategory; switch (typeCategory) { case 'Undeveloped': // Color undeveloped areas blue. return { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } };
JavaScript
const setStyle = (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 { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } };
โค้ดตัวอย่างที่สมบูรณ์
ดูซอร์สโค้ดตัวอย่างที่เสร็จสมบูรณ์
TypeScript
const mapElement = document.querySelector('gmp-map')!; let innerMap: google.maps.Map; const setStyle: google.maps.FeatureStyleFunction = (params) => { const datasetFeature = params.feature as google.maps.DatasetFeature; // 'typecategory' is an attribute in this Dataset. const typeCategory = datasetFeature.datasetAttributes.typecategory; switch (typeCategory) { case 'Undeveloped': // Color undeveloped areas blue. return { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } }; async function init() { // Request needed libraries. await google.maps.importLibrary('maps'); // Get the inner map. innerMap = mapElement.innerMap; // Dataset ID for NYC park data. const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4'; const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; } void init();
JavaScript
const mapElement = document.querySelector('gmp-map'); let innerMap; const setStyle = (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 { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } }; async function init() { // Request needed libraries. await google.maps.importLibrary('maps'); // Get the inner map. innerMap = mapElement.innerMap; // Dataset ID for NYC park data. const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4'; const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; } void init();
CSS
/* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #attribution { background-color: rgba(255, 255, 255, 0.7); font-family: 'Roboto', 'Arial', sans-serif; font-size: 10px; padding: 2px; margin: 2px; }
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>
<script>
// prettier-ignore
(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: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<gmp-map
center="40.580732, -74.152826"
zoom="14"
map-id="5cd2c9ca1cf05670">
<div id="attribution" slot="control-block-end-inline-start">
Data source: NYC Open Data
</div>
</gmp-map>
</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
const mapElement = document.querySelector('gmp-map')!; let innerMap: google.maps.Map; async function init() { // Request needed libraries. await google.maps.importLibrary('maps'); // Get the inner map. innerMap = mapElement.innerMap; // Dataset ID for Seattle Bridges const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa'; const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); // Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 }; } void init();
JavaScript
const mapElement = document.querySelector('gmp-map'); let innerMap; async function init() { // Request needed libraries. await google.maps.importLibrary('maps'); // Get the inner map. innerMap = mapElement.innerMap; // Dataset ID for Seattle Bridges const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa'; const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); // Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 }; } void init();
CSS
/* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #attribution { background-color: rgba(255, 255, 255, 0.7); font-family: 'Roboto', 'Arial', sans-serif; font-size: 10px; padding: 2px; margin: 2px; }
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>
<script>
// prettier-ignore
(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: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<gmp-map
center="47.59, -122.31"
zoom="14"
map-id="5cd2c9ca1cf05670"
map-type-control="false">
<div id="attribution" slot="control-block-end-inline-start">
Data source: NYC Open Data
</div>
</gmp-map>
</body>
</html>