ویژگی‌های داده‌های سبک

پلاتفرم را انتخاب کنید: 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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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 تنظیم کنید.

نمونه سبک‌بندی داده‌های نقطه‌ای

این مثال رویکردی را برای سبک‌دهی به ویژگی‌های داده‌های مبتنی بر هندسه نقطه‌ای نشان می‌دهد.

درباره مجموعه‌داده

مجموعه داده استفاده‌شده در این مثال نتیجه نظرسنجی سال ۲۰۱۸ از سنجاب‌ها در سنترال پارک نیویورک است. در گزیده زیر از فایل داده CSV، می‌بینیم که ستون‌های x و y برای جغرافیا استفاده می‌شوند؛ ستون LatLng گنجانده شده است، اما در این مثال استفاده نمی‌شود زیرا موقعیت جغرافیایی باید با دو ستون نشان داده شود. مجموعه داده‌های سرشماری سنجاب‌ها شامل تنوع خوبی از نقاط داده مختلف مربوط به رنگ خز و رفتار مشاهده‌شده سنجاب‌ها است (حتماً به‌صورت افقی پیمایش کنید تا همه آن را ببینید).

X	س	UniqueSquirrelID	هکتار	تبدیل	تاریخ	Hectare SquirrelNumber	سن	PrimaryFurColor	HighlightFurColor	CombinationofPrimaryandHighlightColor	Colornotes	مکان	اندازه‌گیری AboveGroundSighter	SpecificLocation	دویدن	Chasing	صخره‌نوردی	غذا خوردن	علوفه‌جویی	فعالیت‌های دیگر	کوکس	Quaas	ناله کردن	Tailflags	Tailtwitches	رویکردها	بی‌تفاوت	Runsfrom	OtherInteractions	LatLng
‎-73.9561344937861	40.7940823884086	37F-PM-1014-03	۳۷ درجه فارنهایت	ب.ظ.	10142018	3				+					نادرست	نادرست	نادرست	نادرست	نادرست		نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست		POINT (-73.9561344937861 40.7940823884086)
‎-73.9688574691102	40.7837825208444	21B-AM-1019-04	21B	ق.ظ.	10192018	4				+					نادرست	نادرست	نادرست	نادرست	نادرست		نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست		POINT (-73.9688574691102 40.7837825208444)
‎-73.9742811484852	40.775533619083	11B-PM-1014-08	11B	ب.ظ.	10142018	8		خاکستری		خاکستری+		بالای زمین	10		نادرست	درست	نادرست	نادرست	نادرست		نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست		POINT (-73.97428114848522 40.775533619083)
-73.9596413903948	40.7903128889029	32E-PM-1017-14	32E	ب.ظ.	10172018	14	بزرگسال	خاکستری		خاکستری+	هیچ‌چیز به‌عنوان اصلی انتخاب نشده است. خاکستری به‌عنوان رنگ برجسته‌سازی انتخاب شد. اصلاحات اجرایی انجام شد.				نادرست	نادرست	نادرست	درست	درست		نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	درست		POINT (-73.9596413903948 40.7903128889029)
‎-73.9702676472613	40.7762126854894	13E-AM-1017-05	13E	ق.ظ.	10172018	5	بزرگسال	خاکستری	دارچینی	خاکستری+دارچینی		بالای زمین		روی کنده درخت	نادرست	نادرست	نادرست	نادرست	درست		نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست		POINT (-73.9702676472613 40.7762126854894)
‎-73.9683613516225	40.7725908847499	11H-AM-1010-03	۱۱ ساعت	ق.ظ.	10102018	3	بزرگسال	دارچینی	سفید	دارچینی+سفید					نادرست	نادرست	نادرست	نادرست	درست		نادرست	نادرست	نادرست	نادرست	درست	نادرست	درست	نادرست		POINT (-73.9683613516225 40.7725908847499)
‎-۷۳٫۹۵۴۱۲۰۱۷۸۹۷۹۵	40.7931811701082	36H-AM-1010-02	۳۶ ساعت	ق.ظ.	10102018	2	بزرگسال	خاکستری		خاکستری+	just outside hectare	صفحه زمین	نادرست		نادرست	نادرست	نادرست	نادرست	درست		نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست	نادرست		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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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 «توسعه‌نیافته» یا «پارک‌وی» اعمال می‌کند و همه ویژگی‌های دیگر را به رنگ سبز درمی‌آورد.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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