إضافة مجموعة بيانات إلى خريطة

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

تتيح لك السمة FeatureStyleFunction تحديد المنطق لتصميم المعالم بشكل انتقائي في مجموعة بيانات. وتعرض الدالة FeatureStyleOptions استنادًا إلى هذا المنطق. إذا لم يكن منطق التنسيق مطلوبًا، يمكنك استخدام FeatureStyleOptions لضبط الأنماط مباشرةً. توضّح هذه الصفحة كيفية إضافة مجموعة بيانات إلى خريطة وتطبيق أنماط عليها.

المتطلبات الأساسية

قبل المتابعة، يجب أن يكون لديك معرّف خريطة ونمط خريطة ومعرّف مجموعة بيانات.

• إنشاء معرّف خريطة ونمط خريطة
• إنشاء مجموعة بيانات وتحميلها

ربط معرّف مجموعة بيانات بنمط خريطة

ميزة تجريبية: لا يمكن ضبط هذه الميزة إلا لأنماط الخرائط الفاتحة. عند ربط نمط خريطة فاتح تم تفعيل هذه الميزة فيه بمعرّف خريطة، تصبح الطبقات المفعَّلة متاحة أيضًا لنمط الخريطة الداكن.

اتّبِع الخطوات التالية لربط مجموعة بياناتك بنمط الخريطة الذي تستخدمه:

1. في Google Cloud Console، انتقِل إلى صفحة مجموعات البيانات.
2. انقر على اسم مجموعة البيانات. ستظهر صفحة تفاصيل مجموعة البيانات.
3. انقر على علامة التبويب معاينة.
4. انتقِل إلى إضافة نمط خريطة وانقر عليه.
   
5. انقر على مربّعات الاختيار الخاصة بأنماط الخريطة التي تريد ربطها، ثم انقر على حفظ.

تنبيه: يمكن أن يؤثر عرض مجموعات بيانات متعددة على خريطة في الأداء، وذلك حسب حجم مجموعات البيانات وعددها.

استخدام قواعد نمط بسيطة

إنّ أبسط طريقة لتصميم العناصر هي تمرير 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