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

בחירת פלטפורמה: 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