‫ קבלת Maps Demo Key: אתם יכולים לנסות תכונות נבחרות של Maps JavaScript API ו-Places UI Kit ללא עלות באמצעות Maps Demo Key – בלי להזין פרטי חיוב.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

תכונות של נתוני סגנון

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

כדי להחיל סגנון על מאפייני נתונים, מגדירים את המאפיין 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;index.ts

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

אפשרויות סגנון של תכונות

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

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };index.ts

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };index.js

הפונקציה של סגנון התכונה

אפשר להשתמש בפונקציה של סגנון תכונה כדי להגדיר לוגיקה לעיצוב תכונות של מערך נתונים. כדי לעצב תכונה, מגדירים את המאפיין 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;
}index.ts

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

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

דוגמה לעיצוב של נתוני נקודות

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

מידע על מערך הנתונים

קבוצת הנתונים שבה השתמשנו בדוגמה הזו היא תוצאה של סקר סנאים שנערך בשנת 2018 בסנטרל פארק, ניו יורק. בקטע הבא מקובץ הנתונים בפורמט CSV, אפשר לראות שהעמודות x ו-y משמשות למיקום גיאוגרפי. הקובץ כולל עמודה של LatLng, אבל לא משתמשים בה בדוגמה הזו כי המיקום הגיאוגרפי חייב להיות מיוצג על ידי שתי עמודות. קבוצת הנתונים של מפקד הסנאים מכילה מגוון נחמד של נקודות שונות על הגרף שקשורות לצבע הפרווה ולהתנהגות של הסנאים שנצפו (הקפידו לגלול אופקית כדי לראות את הכול).

X	Y	UniqueSquirrelID	הקטאר	Shift	תאריך	Hectare SquirrelNumber	גיל	PrimaryFurColor	HighlightFurColor	CombinationofPrimaryandHighlightColor	Colornotes	מיקום	מדידה של AboveGroundSighter	SpecificLocation	פועל	מרדף	טיפוס	אכילה	ליקוט	קוקס	Quaas	גניחות	Tailflags	Tailtwitches	גישות	נייטרלית	Runsfrom	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	21B	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	11B	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	11H	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	36H	AM	10102018	2	אדם מבוגר	אפור		אפור+	just outside hectare	מישור הקרקע	FALSE		false	false	false	false	true	false	false	false	false	false	false	false	false	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;
    }
}index.ts

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

קוד לדוגמה מלא

קוד מקור מלא לדוגמה

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

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

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;
}
style.css

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

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

קוד לדוגמה מלא

קוד מקור מלא לדוגמה

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

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

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;
}
style.css

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

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };index.js

קוד מקור מלא לדוגמה

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

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

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;
}
style.css

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>index.html

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

מאפייני תכונות הנתונים

TypeScript

JavaScript

אפשרויות סגנון של תכונות

TypeScript

JavaScript

הפונקציה של סגנון התכונה

TypeScript

JavaScript

דוגמה לעיצוב של נתוני נקודות

מידע על מערך הנתונים

עיצוב תכונות של נתוני נקודות

TypeScript

JavaScript

קוד לדוגמה מלא

קוד מקור מלא לדוגמה

TypeScript

JavaScript

CSS

HTML

דוגמה לסגנון של נתוני פוליגון

מידע על מערך הנתונים

עיצוב של ישויות נתונים מסוג פוליגון

TypeScript

JavaScript

קוד לדוגמה מלא

קוד מקור מלא לדוגמה

TypeScript

JavaScript

CSS

HTML

דוגמה לעיצוב נתונים של קו פוליגוני

מידע על מערך הנתונים

עיצוב של תכונות נתונים של קווים פוליגוניים

TypeScript

JavaScript

קוד מקור מלא לדוגמה

TypeScript

JavaScript

CSS

HTML

תכונות של נתוני סגנון