ميزات بيانات النمط

يمكنك تطبيق النمط على ميزات البيانات من خلال ضبط السمة 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'];
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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"];
index.js

خيارات نمط الميزة

خيارات نمط الميزات يتم فيها تحديد نمط طبقة ميزة البيانات، على سبيل المثال، تصميم نمط التعبئة والحد الأدنى للمضلّعات أو اللون والقطر النقاط. يوضح المثال التالي خيارات نمط الميزة، والتي يمكن أن تكون يتم تطبيقها مباشرةً باستخدام السمة style للميزة:

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
index.js

دالة نمط الميزة

استخدم دالة نمط الميزة لتحديد المنطق لميزات مجموعة بيانات التصميم. لاختيار نمط ميزة، اضبط السمة 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;
}
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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;
}
index.js

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

مثال على نمط بيانات النقاط

يوضح هذا المثال منهجًا لميزات البيانات المستندة إلى هندسة النقاط.

لمحة عن مجموعة البيانات

مجموعة البيانات المستخدمة في هذا المثال هي نتيجة استطلاع تم إجراؤه في عام 2018 على السناجب في حديقة "سنترال بارك" بمدينة نيويورك. في المقتطف التالي من ملف بيانات CSV، نرى أن العمودين x وy تُستخدم في الجغرافيا؛ تم تضمين عمود LatLng، لكنه لا يتم استخدامه في مثلاً، نظرًا لأن الموضع الجغرافي يجب أن يتم تمثيله بعمودين. تشير رسالة الأشكال البيانية تحتوي مجموعة بيانات تعداد السناجب على مجموعة متنوعة ورائعة من نقاط البيانات المختلفة المتعلقة بلون الفراء المرصود وسلوك السناجب (احرص على أفقيًا لرؤيتها).

X	نعم	UniqueSquirrelID	هكتار	Shift	التاريخ	رقم السنجاب بالهكتار	العمر	PrimaryFurColor	HighlightFurColor	CombinationofPrimaryandHighlightColor	ملاحظات ملونة	الموقع الجغرافي	قياس المرآب فوق سطح الأرض	SpecificLocation	الجري	المطاردة	تسلق	تناول الطعام	البحث عن الطعام	الأنشطة الأخرى	كوكس	كوا	أنين	علامات ذيل	السحرة	المناهج	حيادية	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; 
    }
}
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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;
  }
}
index.js

إكمال نموذج الرمز البرمجي

اطّلِع على مثال رمز المصدر الكامل

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();
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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();
index.js

ملاحظة: يتم تجميع رمز JavaScript من مقتطف TypeScript.

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;
}
style.css

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>
index.html

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

مثال على تصميم بيانات المضلّع

يوضح هذا المثال طريقة لتصميم ميزات البيانات المستندة إلى هندسة المضلّعات.

لمحة عن مجموعة البيانات

تعرض مجموعة البيانات المستخدمة في هذا المثال المنتزهات في مدينة نيويورك. يُظهر المقتطف التالي من ملف مجموعة البيانات 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;
    }
}
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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;
  }
}
index.js

إكمال نموذج الرمز البرمجي

اطّلِع على مثال رمز المصدر الكامل

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();
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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();
index.js

ملاحظة: يتم تجميع رمز JavaScript من مقتطف TypeScript.

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;
}
style.css

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>
index.html

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

مثال على تصميم بيانات الخطوط المتعددة

يوضّح هذا المثال طريقة لتصميم ميزات البيانات المستندة إلى الأشكال الهندسية المتعددة الخطوط.

لمحة عن مجموعة البيانات

تعرِض مجموعة البيانات المستخدَمة في هذا المثال الجسور في منطقة سياتل. تشير رسالة الأشكال البيانية يعرض المقتطف التالي من ملف 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, };
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
index.js

اطّلِع على مثال رمز المصدر الكامل

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();
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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();
index.js

ملاحظة: يتم تجميع رمز JavaScript من مقتطف TypeScript.

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;
}
style.css

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>
index.html

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell