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

اختيار النظام الأساسي: 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