يمكنك تطبيق النمط على ميزات البيانات من خلال ضبط السمة 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; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
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"];
خيارات نمط الميزة
خيارات نمط الميزات
يتم فيها تحديد نمط طبقة ميزة البيانات،
على سبيل المثال، نمط ملء وحد المضلّعات أو اللون والقطر
النقاط. يوضح المثال التالي خيارات نمط الميزة، والتي يمكن أن تكون
يتم تطبيقها مباشرةً باستخدام السمة style
للميزة:
TypeScript
// Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
دالة نمط الميزة
استخدم دالة نمط الميزة لتحديد المنطق لميزات مجموعة بيانات التصميم.
لاختيار نمط ميزة، اضبط السمة 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(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleMouseMove; } return styleDefault; }
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(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return styleClicked; } //@ts-ignore if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes["globalid"], ) ) { return styleMouseMove; } return styleDefault; }
يجب أن ترجع الدالة style دائمًا نتائج متسقة عند تطبيقها
فوق الميزات. على سبيل المثال، إذا أردت تلوين مجموعة من الميزات بشكل عشوائي،
ينبغي ألا يحدث الجزء العشوائي في دالة نمط الخصائص، لأن ذلك
إلى نتائج غير مقصودة. لأن هذه الدالة تعمل على كل ميزة في
طبقة معينة، فإن التحسين مهم. لتجنّب التأثير في أوقات العرض، يمكنك ضبط
النمط على null
عندما لا تكون هناك طبقة قيد الاستخدام.
مثال على نمط بيانات النقاط
يوضح هذا المثال منهجًا لميزات البيانات المستندة إلى هندسة النقاط.
لمحة عن مجموعة البيانات
مجموعة البيانات المستخدمة في هذا المثال هي نتيجة استطلاع تم إجراؤه في عام 2018 على السناجب في حديقة "سنترال بارك" بمدينة نيويورك.
في المقتطف التالي من ملف بيانات CSV، نرى أن العمودين x
وy
تُستخدم في الجغرافيا؛ تم تضمين عمود LatLng
، لكنه لا يتم استخدامه في
مثلاً، نظرًا لأن الموضع الجغرافي يجب أن يتم تمثيله بعمودين. تشير رسالة الأشكال البيانية
تحتوي مجموعة بيانات تعداد السناجب على مجموعة متنوعة ورائعة من نقاط البيانات المختلفة
المتعلقة بلون الفراء المرصود وسلوك السناجب (احرص على
أفقيًا لرؤيتها).
X | نعم | UniqueSquirrelID | هكتار | Shift | التاريخ | رقم السنجاب بالهكتار | العمر | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | ملاحظات ملونة | الموقع الجغرافي | قياس المرآب فوق سطح الأرض | SpecificLocation | الجري | المطاردة | تسلق | تناول الطعام | البحث عن الطعام | الأنشطة الأخرى | Kuks | كوا | Moans | علامات ذيل | السحرة | المناهج | حيادية | Runsfrom | OtherInteractions | LatLng |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-73.9561344937861 | 40.7940823884086 | 37F-PM-1014-03 | 37 ف | مساءً | 10142018 | 3 | + | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | POINT (-73.9561344937861 40.7940823884086) | |||||||||
-73.9688574691102 | 40.7837825208444 | 21B-AM-1019-04 | 21 مليار | صباحًا | 10192018 | 4 | + | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | POINT (-73.9688574691102 40.7837825208444) | |||||||||
-73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 11 مليار | مساءً | 10142018 | 8 | رمادي | Gray+ | فوق الأرض | 10 | خطأ | صحيح | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | POINT (-73.97428114848522 40.775533619083) | ||||||
-73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | 32 هـ | مساءً | 10172018 | 14 | للبالغين | رمادي | Gray+ | لم يتم اختيار أي عنصر كأساسي. تم تحديد اللون الرمادي كتمييز. تم إجراء تعديلات تنفيذية. | خطأ | خطأ | خطأ | صحيح | صحيح | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | صحيح | POINT (-73.9596413903948 40.7903128889029) | ||||||
-73.9702676472613 | 40.7762126854894 | 13E-AM-1017-05 | 13 هـ | صباحًا | 10172018 | 5 | للبالغين | رمادي | قرفة | رمادي+قرفة | فوق الأرض | على جذع الشجرة | خطأ | خطأ | خطأ | خطأ | صحيح | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | POINT (-73.9702676472613 40.7762126854894) | ||||
-73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11H | صباحًا | 10102018 | 3 | للبالغين | قرفة | أبيض | قرفة + أبيض | خطأ | خطأ | خطأ | خطأ | صحيح | خطأ | خطأ | خطأ | خطأ | صحيح | خطأ | صحيح | خطأ | POINT (-73.9683613516225 40.7725908847499) | ||||||
-73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36H | صباحًا | 10102018 | 2 | للبالغين | رمادي | Gray+ | خارج الهكتار مباشرةً | طائرة أرضية | خطأ | خطأ | خطأ | خطأ | خطأ | صحيح | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | خطأ | POINT (-73.9541201789795 40.7931811701082) |
ميزات بيانات نقاط الأنماط
تأخذ التعليمة البرمجية في هذا المثال نهجًا بسيطًا لتصميم لون التعبئة
لون خط الرسم لكل نقطة استنادًا إلى CombinationofPrimaryandHighlightColor
التي تجمع بين لون الفراء الأساسي والثانوي لكل
سنجاب
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; } }
إكمال نموذج الرمز البرمجي
اطّلِع على مثال رمز المصدر الكامل
TypeScript
let map; 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; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const position = {lat: 40.780101, lng: -73.967780}; const map = new Map(document.getElementById('map') as HTMLElement, { zoom: 17, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }); // Add the data legend. makeLegend(map); // Dataset ID for squirrel dataset. const datasetId = '02fa1552-37dd-4a95-844f-f99e1c22541f'; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); //@ts-ignore datasetLayer.style = setStyle; // 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.BOTTOM_LEFT].push(attributionDiv); } // Create a custom control to hold attribution text. 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; } function makeLegend(map) { let 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'], }; let legend = document.createElement('div'); legend.id = 'legend'; let title = document.createElement('div'); title.innerText = 'Fur Colors'; title.classList.add('title'); legend.appendChild(title); let k; for (k in colors) { let wrapper = document.createElement('div'); wrapper.id = 'container'; let box = document.createElement('div'); box.style.backgroundColor = colors[k][0]; if (colors[k][1]) { box.style.borderColor = colors[k][1]; } else { box.style.borderColor = colors[k][0]; } box.classList.add('box'); let txt = document.createElement('div'); txt.classList.add('legend'); txt.innerText = k; wrapper.appendChild(box); wrapper.appendChild(txt); legend.appendChild(wrapper); } map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend); } initMap();
JavaScript
let map; 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; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 40.780101, lng: -73.96778 }; const map = new Map(document.getElementById("map"), { zoom: 17, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }); // Add the data legend. makeLegend(map); // Dataset ID for squirrel dataset. const datasetId = "02fa1552-37dd-4a95-844f-f99e1c22541f"; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); //@ts-ignore datasetLayer.style = setStyle; // 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.BOTTOM_LEFT].push(attributionDiv); } // Create a custom control to hold attribution text. 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; } function makeLegend(map) { let 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"], }; let legend = document.createElement("div"); legend.id = "legend"; let title = document.createElement("div"); title.innerText = "Fur Colors"; title.classList.add("title"); legend.appendChild(title); let k; for (k in colors) { let wrapper = document.createElement("div"); wrapper.id = "container"; let box = document.createElement("div"); box.style.backgroundColor = colors[k][0]; if (colors[k][1]) { box.style.borderColor = colors[k][1]; } else { box.style.borderColor = colors[k][0]; } box.classList.add("box"); let txt = document.createElement("div"); txt.classList.add("legend"); txt.innerText = k; wrapper.appendChild(box); wrapper.appendChild(txt); legend.appendChild(wrapper); } map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #legend, #dataset, #counter { background-color: #e5e5e5; width: 15em; margin-top: 2em; margin-left: 1em; border-radius: 8px; font-family: Roboto; 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 1em; display: flex; } #legend div .box { display: flex; width: 2em; height: 2em; border-radius: 50%; border: 3px solid; } #legend div .legend { display: flex; padding: 0.5em; }
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> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </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
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillColor: "blue", fillOpacity: 0.3, }; break; case "Parkway": // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1, fillColor: "red", fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, }; break; } }
إكمال نموذج الرمز البرمجي
اطّلِع على مثال رمز المصدر الكامل
TypeScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.3, }; break; case 'Parkway': // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 1, fillColor: 'red', fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const position = {lat: 40.580732, lng: -74.152826}; const map = new Map(document.getElementById('map') as HTMLElement, { zoom: 14, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f'; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; // 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); } 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; } initMap();
JavaScript
let map; function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillColor: "blue", fillOpacity: 0.3, }; break; case "Parkway": // Color historical house sites red. return /* FeatureStyleOptions */ { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1, fillColor: "red", fillOpacity: 0.5, }; break; default: // Color other type categories green. return /* FeatureStyleOptions */ { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, }; break; } } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 40.580732, lng: -74.152826 }; const map = new Map(document.getElementById("map"), { zoom: 14, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f"; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; // 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); } 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; } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
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> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </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, };
JavaScript
// Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
اطّلِع على مثال رمز المصدر الكامل
TypeScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const position = {lat: 47.59, lng: -122.31}; const map = new Map(document.getElementById('map') as HTMLElement, { zoom: 14, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, }); // Dataset ID for Seattle Bridges const datasetId = '3d0bd5fb-3f42-47fe-b50f-81c0932cd533'; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); // Apply style to all features. datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, }; // 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); } // Create a custom control to hold attribution text. 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: Seattle GeoData'; return attributionLabel; } initMap();
JavaScript
let map; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 47.59, lng: -122.31 }; const map = new Map(document.getElementById("map"), { zoom: 14, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, }); // Dataset ID for Seattle Bridges const datasetId = "3d0bd5fb-3f42-47fe-b50f-81c0932cd533"; //@ts-ignore const datasetLayer = map.getDatasetFeatureLayer(datasetId); // Apply style to all features. datasetLayer.style = { strokeColor: "green", strokeWeight: 4 }; // 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); } // Create a custom control to hold attribution text. 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: Seattle GeoData"; return attributionLabel; } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
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> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>