مرجع JSON لتصميم الخرائط باستخدام السحابة الإلكترونية

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

يتيح لك مخطّط JSON لتصميم الخرائط باستخدام السحابة الإلكترونية استخدام JSON لتخصيص الخرائط بالطريقة نفسها التي تستخدمها من خلال واجهة أداة تعديل النمط. تصف هذه الوثيقة مخطّط JSON وكيفية إنشاء إعلانات أنماط JSON.

تنزيل مخطّط JSON

للتعرّف على كيفية تعديل نمط خريطة باستخدام JSON ضمن أداة تعديل النمط، أو لـ استيراد نمط خريطة وتصديره، يُرجى الاطّلاع على استخدام JSON مع تصميم الخرائط باستخدام السحابة الإلكترونية.

الاطّلاع على مثال على إعلان نمط JSON

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


{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

عنصر JSON

يتألف إعلان نمط JSON من عنصر من المستوى الأعلى ومصفوفة من قواعد الأنماط.

  • الخصائص من المستوى الأعلى (اختيارية): إعدادات الأنماط العامة، مثل backgroundColor وvariant.
  • styles - مصفوفة من عناصر قواعد الأنماط، يمكن أن تتألف من ما يلي:
    • id - عنصر على الخريطة لتحديده لتعديل هذا النمط (مثلاً، pointOfInterest.recreation.park).
    • geometry (اختياري): العناصر الهندسية لعنصر على الخريطة وقواعد الأنماط التي يجب تطبيقها (مثلاً، fillColor).
    • label (اختياري): نص أو تصنيف الدبوس لعنصر على الخريطة وقواعد الأنماط التي يجب تطبيقها (مثلاً، textStrokeColor).

الخصائص من المستوى الأعلى

تنطبق الخصائص في الجدول التالي على نمط الخريطة بالكامل.

الخاصية النوع الوصف مثال

backgroundColor

سلسلة تخصيص لون خلفية تطبيق الخريطة باستخدام سلسلة سداسية عشرية بتنسيق ‎ #RRGGBB لا يتيح هذا الإعداد إجراء تغييرات على درجة التعتيم. "‎#002211"

variant

"light"|"dark" تحديد الوضع الفاتح أو الداكن إذا لم يتم تحديد أي وضع، يكون الوضع التلقائي هو "light". "light"

monochrome

قيمة منطقية لتفعيل الوضع الأحادي اللون، استخدِم true لعرض إصدار باللون الرمادي من الخريطة.

true

metadata

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

{"author": "me", "date": "2026-04-27"}

عناصر قواعد الأنماط

يصف هذا القسم الخصائص التي تحدّد عناصر قواعد الأنماط في مصفوفة styles لتخصيص ميزات الخريطة. يجب أن يتألف كل عنصر من عناصر قواعد الأنماط مما يلي:

  • الخاصية id
  • العنصر geometry أو label مع تحديد خصائص أداة التصميم المرتبطة به

id (عنصر على الخريطة)

تحدّد الخاصية id ميزة الخريطة التي يجب تصميمها. أسماء الخصائص هي إصدارات بتنسيق camelcase لأسماء العناصر على الخريطة في أداة تعديل النمط.

تشكّل ميزات الخريطة شجرة فئات. إذا حدّدت نوع ميزة رئيسية، مثل pointOfInterest، تنطبق الأنماط التي تحدّدها للخاصية الرئيسية على جميع العناصر التابعة لها، مثل pointOfInterest.retail وpointOfInterest.lodging. لمعرفة التفاصيل، يُرجى الاطّلاع على مقالة التسلسل الهرمي لعناصر الخريطة.

قائمة بخصائص id المتاحة

في ما يلي خصائص id المتاحة:

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

العناصر

العناصر هي تقسيمات فرعية لعنصر على الخريطة. على سبيل المثال، يتألف الطريق من الخط المرئي (geometry) على الخريطة، بالإضافة إلى النص الذي يشير إلى اسمه (label).

تتوفّر العناصر التالية، ولكن يُرجى العِلم أنّ عنصرًا معيّنًا على الخريطة قد لا يتضمّن أيًا من العناصر أو قد يتضمّن بعضها أو كلها:

  • geometry: يختار جميع العناصر الهندسية (مثل المضلّع أو الخط المتعدد) لميزة الخريطة المحدّدة.
  • label: يختار جميع عناصر التصنيف (مثل النص أو الدبوس) لميزة الخريطة المحدّدة.

أجهزة كي الملابس بالبخار

أجهزة كي الملابس بالبخار هي الطريقة التي تحدّد بها قواعد الأنماط لكل عنصر من عناصر ميزة الخريطة.

على سبيل المثال، بالنسبة إلى مخطط مبنى، يمكنك تصميم كل عنصر على النحو التالي:

مثال على أدوات تصميم geometry لمبنى مثال على أدوات تصميم label لمبنى
ما إذا كان سيتم إخفاء مضلّع مخطط المبنى أو إظهاره على الخريطة ما إذا كان سيتم إخفاء تصنيف المبنى أو إظهاره
لون تعبئة المضلّع ودرجة تعتيمه لون تعبئة النص ودرجة تعتيمه
لون الحدود ودرجة تعتيمها وعرضها لون خط النص ودرجة تعتيمه

يصف هذا القسم خيارات الأنماط المختلفة المتاحة للعنصرَين geometry وlabel.

أدوات تصميم geometry

يسرد الجدول التالي جميع أدوات تصميم العناصر الهندسية المتاحة.

أداة التصميم النوع الوصف

visible

قيمة منطقية لإخفاء مضلّع أو شكل متعدّد الخطوط لعنصر على الخريطة، اضبط القيمة على false.

fillColor

سلسلة تخصيص لون المضلّع أو الخط المتعدد باستخدام سلسلة سداسية عشرية بتنسيق RGB

fillOpacity

float تخصيص درجة تعتيم المضلّع أو الخط المتعدد، حيث 0 يعني شفافًا و1 يعني معتمًا

strokeColor

سلسلة تخصيص لون المخطّط باستخدام سلسلة سداسية عشرية بتنسيق RGB

strokeOpacity

float تخصيص درجة تعتيم المخطّط، حيث 0 يعني شفافًا و1 يعني معتمًا

strokeWeight

float تخصيص سُمك المخطّط من نطاق يتراوح بين 0 و8

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة المضلّعات والخطوط المتعددة.

أدوات تصميم label

يسرد الجدول التالي جميع أدوات تصميم التصنيفات المتاحة.

أداة التصميم النوع الوصف

visible

قيمة منطقية لإخفاء تصنيف عنصر على الخريطة، اضبط القيمة على false.

textFillColor

سلسلة تخصيص لون تصنيف النص باستخدام سلسلة سداسية عشرية بتنسيق RGB

textFillOpacity

float تخصيص درجة تعتيم تصنيف النص، حيث 0 يعني شفافًا و1 يعني معتمًا

textStrokeColor

سلسلة تخصيص لون المخطّط باستخدام سلسلة سداسية عشرية بتنسيق RGB

textStrokeOpacity

float تخصيص درجة تعتيم المخطّط، حيث 0 يعني شفافًا و1 يعني معتمًا

textStrokeWeight

float تخصيص سُمك المخطّط من نطاق يتراوح بين 0 و8

pinFillColor

سلسلة تخصيص لون الدبوس باستخدام سلسلة سداسية عشرية بتنسيق RGB

pinGlyphColor

سلسلة تخصيص لون الرسم (الرمز) داخل الدبوس باستخدام سلسلة سداسية عشرية بتنسيق RGB

pinOutlineColor

سلسلة تخصيص لون مخطط الدبوس باستخدام سلسلة سداسية عشرية بتنسيق RGB

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة الرموز وتصنيفات النصوص.

مستويات التكبير الرئيسية

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

لضبط مستوى تكبير رئيسي لنمط، حدِّد مستوى التكبير الرئيسي من z0 إلى z22 في خاصية أداة التصميم، ثم حدِّد تخصيص أداة التصميم.

في المثال التالي، يكون لون المياه أسودًا من مستويات التكبير الرئيسية 0 إلى 5، ورماديًا داكنًا من مستويات التكبير الرئيسية 6 إلى 11، ورماديًا فاتحًا بدءًا من مستوى التكبير الرئيسي 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة مستويات التكبير/التصغير للأنماط.

القيود

يمكنك استخدام JSON لتصميم كل العناصر تقريبًا في Google Cloud Console، باستثناء الخيارات التالية من قائمة إعدادات الخريطة:

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

بالنسبة إلى هذه الخيارات، يجب اختيار الإعداد المفضّل في قائمة إعدادات الخريطة.

بما أنّ هذه الخيارات غير مضمّنة في الأنماط التي يتم تصديرها، يجب إعادة اختيارها في Google Cloud Console عند استيراد نمط.