כדי להחיל סגנון על תכונות נתונים, מגדירים את המאפיין style
בשכבת התכונה של מערך נתונים כ-google.maps.FeatureStyleFunction
, שיכול להכיל לוגיקת עיצוב, או את google.maps.FeatureStyleOptions
, כדי לעצב באופן אחיד את כל התכונות בשכבה. אפשר להחיל סגנונות על תכונות נתונים עבור מילוי (צבע, אטימוּת), קו (צבע, אטימוּת, עובי קו) וקוטר (נקודות). בדף הזה נסביר איך לגשת באופן פרוגרמטי למערך נתונים ולעצב את התכונות שלו, ונציג דוגמאות לעיצוב של תכונות נתונים על סמך נקודה, פוליגון וגאומטריה של קווים פוליגוניים.
עיצוב מבוסס-נתונים של מערכי נתונים מעבד את תכונות הנתונים על סמך קואורדינטות קווי הרוחב והאורך שצוינו מקובץ הנתונים הגיאו-מרחבי ששימש ליצירת מערך הנתונים.
מאפיינים של תכונות נתונים
ניתן לגשת לכל הנתונים במערך נתונים באמצעות הפונקציה feature style. כדי לקבל מאפיינים של תכונות נתונים, קודם צריך להוריד את התכונה של מערך הנתונים, שמכילה את כל הנתונים במערך הנתונים, ואז לבחור את מאפיין הנתונים הספציפי הרצוי, כפי שמוצג כאן:
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
, אבל לא נעשה בה שימוש בדוגמה הזו, כי המיקום הגיאוגרפי חייב להיות מיוצג על ידי שתי עמודות. מערך הנתונים של מפקד האוכלוסין של הסנאים מכיל מגוון יפה של נקודות נתונים שונות הקשורות לצבע הפרווה ולהתנהגות של הסנאים המתועדים (חשוב לגלול לרוחב כדי לראות את הכול).
X | Y | UniqueSquirrelID | הקטאר | Shift | תאריך | מספר הקטאר SquirrelNumber | גיל | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | הערות צבעוניות | מיקום | מדידה מעל GroundSighter | SpecificLocation | פועל | מרדף | טיפוס | אכילה | ליקוט מזון | פעילויות אחרות | קוק | קוואאס | אנחות | דגלי זנב | מכשפות זנב | הגישות | נייטרלית | הפעלה | OtherInteractions | LatLng |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-73.9561344937861 | 40.7940823884086 | 37F-PM-1014-03 | 37F | PM | 10142018 | 3 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | POINT (-73.9561344937861 40.7940823884086) | |||||||||
-73.9688574691102 | 40.7837825208444 | 21B-AM-1019-04 | 21 מיליארד | AM | 10192018 | 4 | + | false | false | false | false | false | false | false | false | false | false | false | false | false | POINT (-73.9688574691102 40.7837825208444) | |||||||||
-73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 11 מיליארד | PM | 10142018 | 8 | אפור | אפור+ | מעל הקרקע | 10 | false | true | false | false | false | false | false | false | false | false | false | false | false | POINT (-73.97428114848522 40.775533619083) | ||||||
-73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | 32E | PM | 10172018 | 14 | אדם מבוגר | אפור | אפור+ | לא בחרת באפשרות 'ראשי'. אפור נבחר כ'המיטב'. התבצעו התאמות ניהול. | false | false | false | true | true | false | false | false | false | false | false | false | true | POINT (-73.9596413903948 40.7903128889029) | ||||||
-73.9702676472613 | 40.7762126854894 | 13E-AM-1017-05 | 13E | AM | 10172018 | 5 | אדם מבוגר | אפור | קינמון | אפור+קינמון | מעל הקרקע | על גזע עץ | false | false | false | false | true | false | false | false | false | false | false | false | false | POINT (-73.9702676472613 40.7762126854894) | ||||
-73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11 שעות | AM | 10102018 | 3 | אדם מבוגר | קינמון | לבן | קינמון+לבן | false | false | false | false | true | false | false | false | false | true | false | true | false | POINT (-73.9683613516225 40.7725908847499) | ||||||
-73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36 שעות | AM | 10102018 | 2 | אדם מבוגר | אפור | אפור+ | מחוץ להקטר | מטוס יבשתי | FALSE | false | false | false | false | true | false | false | false | false | false | false | false | false | POINT (-73.9541201789795 40.7931811701082) |
תכונות נתונים של נקודות סגנון
הקוד בדוגמה הזו משתמש בגישה הפשוטה של עיצוב צבע המילוי וצבע הקווים לכל נקודה על סמך המאפיין CombinationofPrimaryandHighlightColor
, שמשלב את צבע הפרווה הראשי והצבע המשני של כל סנאי.
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor']; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case 'Black+': return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break; } }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"]; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case "Black+": return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 }; break; case "Cinnamon+": return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 }; break; case "Cinnamon+Gray": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "gray", pointRadius: 6, }; break; case "Cinnamon+White": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "white", pointRadius: 6, }; break; case "Gray+": return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 }; break; case "Gray+Cinnamon": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+Cinnamon, White": return /* FeatureStyleOptions */ { fillColor: "silver", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+White": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "white", pointRadius: 6, }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 }; break; } }
השלמת קוד לדוגמה
הצגת הדוגמה המלאה לקוד המקור
TypeScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor']; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case 'Black+': return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const 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();
דוגמה לעיצוב נתונים של פוליגון
בדוגמה הזו מוצגת הגישה לעיצוב תכונות נתונים שמבוססות על גיאומטריה של פוליגונים.
מידע על מערך הנתונים
מערך הנתונים בדוגמה זו מתאר פארקים בעיר ניו יורק. בקטע הבא מקובץ הנתונים 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
של הערכים 'לא מפותח' או '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();
דוגמה לעיצוב נתונים ב-Polyline
בדוגמה הזו מוצגת גישה לעיצוב תכונות נתונים שמבוססות על גיאומטריה של קווים פוליגוניים.
מידע על מערך הנתונים
במערך הנתונים בדוגמה הזו מוצגים גשרים באזור סיאטל. בקטע הבא מקובץ הנתונים 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();