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

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

monochrome

قيمة منطقية لتفعيل المظهر الأحادي اللون، استخدِم true للحصول على نسخة رمادية من الخريطة.

true

metadata

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

{"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 أدوات التنسيق

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

Styler النوع الوصف

visible

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

fillColor

سلسلة خصِّص لون المضلّع أو الخط المتعدد باستخدام سلسلة سداسية عشرية بنموذج أحمر أخضر أزرق.

fillOpacity

عدد عائم تخصيص مستوى التعتيم للمضلّع أو المتعدّد الخطوط، حيث 0 تعني شفاف و1 تعني معتم

strokeColor

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

strokeOpacity

عدد عائم يمكنك تخصيص مستوى تعتيم المخطّط، حيث تشير القيمة 0 إلى الشفافية والقيمة 1 إلى التعتيم.

strokeWeight

عدد عائم يمكنك تخصيص سمك المخطط التفصيلي من نطاق يتراوح بين 0 و8.

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

‫label مصفّف شعر

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

Styler النوع الوصف

visible

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

textFillColor

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

textFillOpacity

عدد عائم تخصيص مستوى شفافية تصنيف النص، حيث 0 يعني شفاف و1 يعني معتم

textStrokeColor

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

textStrokeOpacity

عدد عائم يمكنك تخصيص مستوى تعتيم المخطّط، حيث تشير القيمة 0 إلى الشفافية والقيمة 1 إلى التعتيم.

textStrokeWeight

عدد عائم يمكنك تخصيص سُمك المخطط من نطاق يتراوح بين 0 و8.

pinFillColor

سلسلة يمكنك تخصيص لون الدبوس باستخدام سلسلة سداسية عشرية من النموذج اللوني أحمر أخضر أزرق.

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"، باستثناء الخيارات التالية من قائمة إعدادات الخريطة:

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

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

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