Background
ژئوتاژک کلود
ورود
بازگشت به بلاگ

آموزش استفاده از نقشه سفارشی در MapLibre، Leaflet و OpenLayers

۱۴۰۵/۷/۷
تیم ژئوتاژک
آموزش استفاده از نقشه سفارشی در MapLibre، Leaflet و OpenLayers

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

گام ۱: ورود به ابزار

وارد داشبورد شوید و از منوی کناری «سفارشی‌سازی نقشه» را باز کنید. صفحه دو بخش دارد: پنل تنظیمات و نقشه پیش‌نمایش زنده.

گام ۲: انتخاب سبک پایه

در زبانه «رنگ‌ها»، بخش استایل پایه:

  1. یکی از خانواده‌های Nesscaffe، Gruvcaffe یا Orosi را انتخاب کنید.
  2. حالت تیره یا روشن را مشخص کنید.

با تغییر سبک پایه، رنگ‌های سفارشی قبلی پاک می‌شوند؛ پس اول سبک پایه را انتخاب کنید و بعد رنگ‌ها را تغییر دهید.

گام ۳: تنظیم رنگ‌ها

روی هر رنگ کلیک کنید و رنگ جدید را انتخاب کنید:

  • پس‌زمینه و محیط: پس‌زمینه، آب، پوشش گیاهی، ساختمان‌ها، مرزها
  • جاده‌ها: آزادراه، بزرگراه/اصلی، فرعی، کوچه/خدماتی

تغییرات بلافاصله روی نقشه دیده می‌شوند.

گام ۴: متن و نمای اولیه

در زبانه «متن»:

  • فونت برچسب‌ها را انتخاب کنید (یا «فونت پیش‌فرض استایل» را نگه دارید)
  • رنگ نام شهرها، کشورها، محله‌ها و هاله متن را تنظیم کنید؛ هاله باید با پس‌زمینه کنتراست داشته باشد تا نام‌ها خوانا بمانند
  • مرکز و زوم اولیه نقشه را وارد کنید (مثلا تهران: طول 51.42 و عرض 35.69)

گام ۵: دریافت خروجی

در زبانه «خروجی»:

  • دانلود: فایل style.json را ذخیره کنید
  • کپی JSON: محتوای استایل را در کلیپ‌بورد کپی کنید
  • دانلود mapbox-gl-rtl-text.min.js: افزونه نمایش صحیح متن فارسی؛ آن را کنار فایل‌های سایت خود (مثلا در پوشه public/) قرار دهید

دکمه «ریست» همه تغییرات را به حالت سبک پایه برمی‌گرداند.

اگر هیچ تغییری در رنگ یا فونت ندهید، به فایل جداگانه نیازی ندارید و می‌توانید مستقیم از آدرس سبک پایه استفاده کنید، مثلا https://tile.geotajak.ir/tile/141/orosi-light.json.

گام ۶: افزودن نقشه به سایت

فایل style.json دانلود‌شده را کنار صفحه خود قرار دهید (مثلا /my-style.json) و یکی از روش‌های زیر را انتخاب کنید.

MapLibre GL JS (پیشنهادی)

npm install maplibre-gl

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

// نمایش درست متن فارسی و عربی
maplibregl.setRTLTextPlugin("/mapbox-gl-rtl-text.min.js", true);

const map = new maplibregl.Map({
  container: "map",
  style: "/my-style.json",       // یا آدرس سبک پایه
  center: [51.42, 35.69],
  zoom: 12,
});
map.addControl(new maplibregl.NavigationControl());

<div id="map" style="width: 100%; height: 500px"></div>

Leaflet

Leaflet به‌تنهایی نقشه برداری را نمایش نمی‌دهد؛ با افزونه maplibre-gl-leaflet از همان استایل استفاده کنید:

npm install leaflet maplibre-gl @maplibre/maplibre-gl-leaflet

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import maplibregl from "maplibre-gl";
import "@maplibre/maplibre-gl-leaflet";

maplibregl.setRTLTextPlugin("/mapbox-gl-rtl-text.min.js", true);

const map = L.map("map").setView([35.69, 51.42], 12);
L.maplibreGL({ style: "/my-style.json" }).addTo(map);

OpenLayers

npm install ol ol-mapbox-style

import Map from "ol/Map";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import { apply } from "ol-mapbox-style";

const map = new Map({
  target: "map",
  view: new View({ center: fromLonLat([51.42, 35.69]), zoom: 12 }),
});

apply(map, "/my-style.json");

تغییر استایل در زمان اجرا

برای مثال تعویض بین حالت روز و شب:

const styles = {
  day: "https://tile.geotajak.ir/tile/141/orosi-light.json",
  night: "/my-style.json",
};
function setTheme(name) {
  map.setStyle(styles[name]);
}

نکته‌ها و رفع اشکال

  • حروف فارسی جدا از هم یا برعکس نمایش داده می‌شوند: افزونه RTL بارگذاری نشده است. آدرس setRTLTextPlugin را بررسی کنید و مطمئن شوید قبل از ساخت نقشه فراخوانی می‌شود.
  • نقشه خالی است: ارتفاع المان نقشه (#map) را مشخص کنید؛ المان بدون ارتفاع نمایش داده نمی‌شود.
  • خطای CORS هنگام بارگذاری style.json: فایل را از همان دامنه سایت خود سرو کنید یا مستقیم از آدرس سبک پایه استفاده کنید.
  • نقشه در مرورگر نمایش داده نمی‌شود: نقشه‌های برداری به WebGL نیاز دارند؛ در مرورگرهای قدیمی یا با شتاب‌دهنده گرافیکی غیرفعال کار نمی‌کنند.
  • می‌توانید روی همین نقشه، لایه‌های خودتان (GeoJSON، نقاط، مسیرها) را با map.addSource و map.addLayer اضافه کنید. برای جستجوی آدرس و مسیریابی روی نقشه، سرویس‌های مکانی را ببینید.

سوالی دارید؟ از بخش تیکت‌ها در داشبورد با ما در ارتباط باشید.

نقشهآموزشMapLibreLeafletOpenLayers