در حال بارگذاری

پرش به مطلب اصلی

ویرایشگر استایل نقشه MapLibre

مشاهده ویرایشگر استایل در حالت تمام صفحه

ویرایشگر استایل ابزاری بصری است که به شما اجازه می‌دهد بدون نوشتن کد، روی هر یک از پنج استایل آماده نقشه نشان (Light، Dark، Monochrome Light، Monochrome Dark، Pastel) تغییرات دلخواه اعمال کنید و در نهایت یک فایل style.json سفارشی دریافت کنید که مستقیماً در پروژه خودتان قابل استفاده است.

این ابزار برای زمانی مناسب است که می‌خواهید رنگ‌بندی نقشه را با هویت بصری (برندینگ) سایت یا اپلیکیشن خود هماهنگ کنید، بدون این‌که نیاز به دانش کامل Style Specification داشته باشید.

اطلاع

برای مشاهده و استفاده از کیت توسعه MapLibre, به کلید دسترسی (API Key) نیاز دارید. اگر هنوز کلید دریافت نکرده‌اید:

بخش‌های قابل تنظیم​

پنل کناری ویرایشگر از چند بخش تشکیل شده که هرکدام روی گروهی از لایه‌های استایل پایه اثر می‌گذارند:

بخشامکانات
تنظیمات عمومیانتخاب استایل پایه، نوع نمایش نقشه (Mercator تخت یا Globe کروی) و رنگ پس‌زمینه
اماکن و مرزهانمایش/مخفی‌سازی و رنگ برچسب کشور/استان/شهر/محل، رنگ خطوط مرزی و اندازه فونت برچسب‌ها
زمین و آبرنگ مناطق کاربری زمین (مراکز نظامی، بیمارستان، پارک و فضای سبز، مراکز آموزشی، مناطق صنعتی) و رنگ آب
راه‌ها و حمل‌ونقلنمایش و اندازه فونت نام خیابان‌ها، رنگ بزرگراه‌ها/آزادراه‌ها، رنگ سایر خیابان‌ها، نمایش معابر پیاده و نمایش ترافیک
ساختمان‌هانمایش/مخفی‌سازی حجم سه‌بعدی ساختمان‌ها و رنگ آن‌ها
نقاط (POI)نمایش نقاط و فیلتر کردن آن‌ها بر اساس نوع
تایل وکتور دلخواهافزودن یک منبع Vector Tile شخصی ({z}/{x}/{y}) روی نقشه به‌صورت overlay، با تنظیم رنگ/ضخامت پلیگان، خط، نقطه و برچسب
نکته

به‌صورت پیش‌فرض، لایه‌ی ترافیک (بخش «راه‌ها و حمل‌ونقل») و لایه‌ی نقاط POI (بخش «نقاط (POI)») در تمام استایل‌های پایه خاموش هستند. اگر به این لایه‌ها نیاز دارید، ابتدا تیک نمایش مربوطه را در همین ویرایشگر فعال کنید و سپس فایل استایل خروجی را دانلود و استفاده کنید.

نحوه استفاده​

  1. از بخش «تنظیمات عمومی»، استایل پایه و نوع نمایش (Mercator یا Globe) مورد نظر را انتخاب کنید.
  2. رنگ‌ها، نمایش/عدم‌نمایش لایه‌ها و اندازه فونت برچسب‌ها را مطابق نیاز خود تغییر دهید؛ تغییرات بلافاصله روی نقشه اعمال می‌شوند.
  3. در صورت نیاز، از بخش «تایل وکتور دلخواه» یک منبع Vector Tile اختصاصی (شامل آدرس تایل، نام source-layer و بازه زوم) اضافه کرده و ظاهر آن را شخصی‌سازی کنید.
  4. با کلیک روی دکمه «دانلود استایل»، فایل style.json نهایی که شامل تمام تغییرات (و در صورت افزودن، لایه تایل دلخواه شما) است، دانلود می‌شود.
نکته

برای استفاده از «تایل وکتور دلخواه»، تایل‌های شما باید:

  • به فرمت Mapbox Vector Tile (MVT) تولید شده باشند و از یک آدرس با الگوی {z}/{x}/{y} (XYZ) و با پشتیبانی CORS در دسترس باشند.
  • نام source-layer داخل تایل را از پیش بدانید و دقیقاً همان‌طور که در تایل تعریف شده است وارد کنید.

نیازی به تعریف لایه‌های جداگانه بر اساس نوع هندسه نیست؛ ویرایشگر به‌صورت خودکار پلیگان‌ها، خط‌ها و نقاط موجود در همان source-layer را تشخیص می‌دهد و هرکدام را با رنگ/اندازه انتخابی شما رسم می‌کند.

اگر آدرس یا نام source-layer را اشتباه وارد کنید، خطایی نمایش داده نمی‌شود و صرفاً چیزی روی نقشه ظاهر نخواهد شد؛ در این حالت تب Network مرورگر را برای بررسی درخواست تایل‌ها و پاسخ سرور بررسی کنید. برای آشنایی بیشتر با ساختار منبع Vector، به مستندات Sources در Style Specification مراجعه کنید.

استفاده از استایل خروجی در پروژه​

فایل style.json دانلود شده در هر سه پلتفرم وب، اندروید و iOS قابل استفاده است. کافی است فایل را روی سرور خودتان میزبانی کنید (یا در صورت پشتیبانی، مستقیماً به‌صورت رشته/آبجکت JSON در اختیار SDK بگذارید) و آدرس یا محتوای آن را به همان متدی بدهید که برای تنظیم استایل نقشه استفاده می‌کنید:

import maplibregl from "@neshan-maps-platform/maplibre-sdk";
import "@neshan-maps-platform/maplibre-sdk/style.css";
import customStyle from "./light-custom-style.json";

const map = new maplibregl.Map({
  container: "map",
  style: customStyle, // یا آدرس URL فایل میزبانی‌شده روی سرور خودتان
  center: [51.389, 35.6892],
  zoom: 13,
  apiKey: "YOUR_MAP_API_KEY",
});