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

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

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

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

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

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

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

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

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

1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة مجموعات البيانات.
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