FeatureStyleFunction
،
هي المكان الذي تقوم فيه بتعريف المنطق لتصميم الميزات بشكل انتقائي في مجموعة بيانات. أُنشأها جون هنتر، الذي كان متخصصًا
إرجاع FeatureStyleOptions
بناءً على هذا المنطق. إذا لم يكن منطق التصميم مطلوبًا، يمكنك استخدام السمة FeatureStyleOptions
.
لضبط الأنماط مباشرةً. توضح لك هذه الصفحة كيفية إضافة مجموعة بيانات إلى خريطة،
لتطبيق التصميم.
المتطلبات الأساسية
قبل المتابعة، يجب أن يكون لديك معرف خريطة ونمط خريطة ومعرف مجموعة بيانات.
ربط معرّف مجموعة بيانات بنمط خريطة
اتخذ الخطوات التالية لربط مجموعة البيانات بنمط الخريطة الذي باستخدام:
- في Google Cloud Console، انتقِل إلى صفحة مجموعات البيانات.
- انقر فوق اسم مجموعة البيانات. ستظهر صفحة تفاصيل مجموعة البيانات.
- انقر على علامة التبويب معاينة.
- مرِّر وصولاً إلى إضافة نمط خريطة وانقر على هذا الخيار.
- انقر فوق مربعات الاختيار لأنماط الخريطة المراد ربطها ثم انقر انقر على حفظ.
استخدام قواعد النمط البسيطة
وأبسط طريقة لتصميم الميزات هي تمرير FeatureStyleOptions
لتحديد
سمات النمط مثل اللون والتعتيم ووزن الخط. تطبيق نمط الميزة
الخيارات مباشرةً إلى طبقة خصائص مجموعة البيانات، أو استخدمها إلى جانب
FeatureStyleFunction
TypeScript
const styleOptions = { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, };
JavaScript
const styleOptions = { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, };
استخدام قواعد نمط التعريف
يمكنك استخدام FeatureStyleFunction
لضبط قواعد النمط بشكل صريح وتطبيقها.
عبر مجموعة البيانات بأكملها لديك تطبيق FeatureStyleOptions
على عنصر استنادًا إلى
قيم تصنيف مجموعة البيانات. يمكنك أيضًا عرض null
من النمط المميّز.
على سبيل المثال، إذا كنت تريد أن تظل مجموعة فرعية من الخصائص غير مرئية. هذا النمط
يوضح المثال دالة نمط تُلوّن مجموعة من النقاط بناءً على بيانات
:
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break; } }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 }; break; case "Cinnamon+": return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 }; break; case "Cinnamon+Gray": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "gray", pointRadius: 6, }; break; case "Cinnamon+White": return /* FeatureStyleOptions */ { fillColor: "#8b0000", strokeColor: "white", pointRadius: 6, }; break; case "Gray+": return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 }; break; case "Gray+Cinnamon": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+Cinnamon, White": return /* FeatureStyleOptions */ { fillColor: "silver", strokeColor: "#8b0000", pointRadius: 6, }; break; case "Gray+White": return /* FeatureStyleOptions */ { fillColor: "gray", strokeColor: "white", pointRadius: 6, }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 }; break; } }
تطبيق النمط على طبقة عناصر مجموعة البيانات
لتطبيق الأنماط في دالة نمط الميزة:
- احصل على طبقة خصائص مجموعة البيانات عن طريق استدعاء
map.getDatasetFeatureLayer()
، تمرير معرف مجموعة البيانات. - يمكنك تطبيق النمط من خلال ضبط خيارات نمط الميزة (مثل
styleOptions
). أو الدالة (مثلsetStyle
) على طبقة مجموعة البيانات.
TypeScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
JavaScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
إزالة التصميم من طبقة
لإزالة النمط من طبقة، اضبط style
على null
:
featureLayer.style = null;
ويمكنك أيضًا عرض null
من دالة نمط الميزة، على سبيل المثال إذا
تريد أن تظل مجموعة فرعية من الميزات غير مرئية.
إضافة نص الإحالة
يجب أن تعرض خريطتك أي معلومات مطلوبة عند عرضها. مجموعات البيانات على خرائط Google. يجب ألا يحجب نص الإحالة أو يتداخل مع شعار Google
تتمثل إحدى طرق إضافة نص تحديد المصدر في استخدام عناصر التحكّم المخصّصة. وضع محتوى HTML عشوائي في مواضع قياسية على الخريطة. يُنشئ الكود التالي في المثال التالي دالة تنشئ آليًا أحد عناصر التحكم المخصصة التالية:
TypeScript
function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; }
JavaScript
function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; }
وبمجرد تحديد عنصر التحكم، يمكنك إضافته إلى الخريطة في وقت التهيئة، كما هو موضح هنا:
TypeScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
JavaScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);