הוספת מערך נתונים למפה

בחירת פלטפורמה: Android iOS JavaScript

ב-FeatureStyleFunction מגדירים את הלוגיקה לעיצוב סלקטיבי של תכונות בקבוצת נתונים. היא מחזירה את הערך FeatureStyleOptions על סמך הלוגיקה הזו. אם לא נדרשת לוגיקה של סגנון, אפשר להשתמש ב-FeatureStyleOptions כדי להגדיר סגנונות ישירות. בדף הזה מוסבר איך להוסיף קבוצת נתונים למפה ולהחיל סגנון.

דרישות מוקדמות

לפני שממשיכים, צריך לוודא שיש לכם מזהה מפה, סגנון מפה ומזהה מערך נתונים.

• יצירת מזהה מפה וסגנון מפה
• יצירה והעלאה של קבוצת נתונים

שיוך של מזהה קבוצת נתונים לסגנון מפה

ניסיוני: אפשר להגדיר את התכונה הזו רק בסגנונות מפה בהירים. כשמקשרים סגנון מפה בהיר שהתכונה הזו מופעלת בו למזהה מפה, השכבות שמופעלות זמינות גם לסגנון המפה הכהה.

כדי לשייך את קבוצת הנתונים לסגנון המפה שבה אתם משתמשים, פועלים לפי השלבים הבאים:

1. במסוף Google Cloud, נכנסים לדף Datasets.
2. לוחצים על השם של מערך הנתונים. יופיע הדף Dataset details.
3. לוחצים על הכרטיסייה תצוגה מקדימה.
4. גוללים אל הוספת סגנון מפה ולוחצים.
   
5. מסמנים את התיבות של סגנונות המפה שרוצים לשייך ולוחצים על SAVE.

זהירות: עיבוד של כמה קבוצות נתונים במפה יכול להשפיע על הביצועים, בהתאם לגודל ולמספר של קבוצות הנתונים.

שימוש בכללי סגנון פשוטים

הדרך הכי פשוטה לעצב רכיבים היא להעביר FeatureStyleOptions כדי להגדיר מאפייני סגנון כמו צבע, אטימות ועובי קו. אפשר להחיל אפשרויות של סגנון תכונה ישירות על שכבת תכונות של מערך נתונים, או להשתמש בהן בשילוב עם FeatureStyleFunction.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

שימוש בכללי סגנון הצהרתיים

אפשר להשתמש ב-FeatureStyleFunction כדי להגדיר כללי סגנון באופן הצהרתי ולהחיל אותם על כל קבוצת הנתונים. החלת FeatureStyleOptions על תכונה על סמך ערכי מאפיינים של מערך נתונים. אפשר גם להחזיר את הערך null מהפונקציה של סגנון הישות, למשל אם רוצים שקבוצת משנה של ישויות תישאר בלתי נראית. בדוגמה הזו מוצגת פונקציית סגנון שצובעת קבוצת נקודות על סמך מאפייני נתונים:

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;
    }
}
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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;
    }
}
index.js

החלת סגנון על שכבת המפה של קבוצת הנתונים

כדי להחיל את הסגנונות בפונקציה של סגנון המאפיין:

1. כדי לקבל את שכבת המפה של קבוצת הנתונים, קוראים ל-map.getDatasetFeatureLayer() ומעבירים את מזהה קבוצת הנתונים.
2. מחילים את הסגנון על ידי הגדרת אפשרויות הסגנון של התכונה (למשל styleOptions) או הפונקציה (למשל setStyle) בשכבת קבוצת הנתונים.

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

הסרת סגנון משכבה

כדי להסיר את הסגנון משכבה, מגדירים את style לערך null:

featureLayer.style = null;

אפשר גם להחזיר את הערך null מהפונקציה של סגנון הישות, למשל אם רוצים שקבוצת משנה של ישויות תישאר בלתי נראית.

הוספת טקסט לציון קרדיט

כשמציגים במפות Google מערכי נתונים שהועלו, צריך להציג במפה את כל הקרדיטים הנדרשים. טקסט לציון קרדיט לא יכול להסתיר את הלוגו של Google או להפריע לו.

אחת הדרכים להוסיף טקסט לציון קרדיט היא להשתמש בפקדים מותאמים אישית כדי להציב HTML שרירותי במיקומים סטנדרטיים במפה. קטעי הקוד הבאים מציגים את ה-HTML וה-CSS שמשמשים לשיוך בדוגמה הזו:

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}
style.css