mmap-fardup

یک پکیج کلاینت نقشه مبتنی بر React با قابلیت‌های پویا، طراحی شده برای ساده‌سازی کار با OpenLayers و GeoJSON در اپلیکیشن‌های React.

نصب

پکیج را با استفاده از npm نصب کنید:

npm install mmap-fardup

شروع به کار

در اینجا یک مثال ساده برای شروع ارائه شده است:

import React from 'react';
import MapBox from 'mmap-fardup';

const App = () => {
  return (
    <MapBox
      zoom={5}
      center={[51, 32]}
      userLocation={true}
       apiKey={"این مقدار باید از سامانه نقشه گرفته شود"}
      mapParams={{
        scrollZoom: true,
        customAttribution: 'Map data © OpenLayers',
      }}
      style={{ width: '100%', height: '100vh' }}
    />
  );
};

export default App;

این کد یک نقشه ساده با قابلیت موقعیت‌یابی کاربر نمایش می‌دهد.

کامپوننت‌ها

1. MapBox

توضیحات

کامپوننت اصلی برای نمایش نقشه. این کامپوننت تنظیماتی برای زوم، مرکز نقشه، موقعیت‌یابی کاربر، تعاملات، و رویدادها ارائه می‌دهد.

Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات | | --------------- | -------------------------- | ------------- | ---------------------------------------------------------- | | zoom | number | 5 | سطح زوم اولیه نقشه. | | center | [number, number] | [51, 32] | مرکز اولیه نقشه به صورت [طول جغرافیایی, عرض جغرافیایی]. | | fitBounds | [{lng, lat}, {lng, lat}] | null | محدوده‌ای که نقشه باید به آن زوم کند. | | mapParams | object | {} | تنظیمات نقشه، شامل تعاملات و کنترل‌ها. | | userLocation | boolean | false | فعال‌سازی ردیابی و تمرکز روی موقعیت کاربر. | | setUserCoords | function | null | تابعی برای دریافت مختصات کاربر. | | widthMap | string | "100%" | عرض نقشه (CSS). | | heightMap | string | "100vh" | ارتفاع نقشه (CSS). | | style | object | {} | استایل‌های دلخواه برای کانتینر نقشه. | | onClick | function | null | رویدادی که هنگام کلیک روی نقشه فراخوانی می‌شود. | | onMoveEnd | function | null | رویدادی که هنگام اتمام حرکت نقشه فراخوانی می‌شود. | | سایر رویدادها | function | null | لیستی از رویدادهای موجود مانند onZoom, onDrag, و غیره. |

mapParams تنظیمات

| کلید | نوع | مقدار پیش‌فرض | توضیحات | |---------------------|------------|----------------|----------------------------------------------------------------------| | touchZoomRotate | boolean | true | فعال‌سازی یا غیرفعال‌سازی تعامل چرخش و زوم با لمس. | | doubleClickZoom | boolean | true | فعال یا غیرفعال کردن زوم با دابل کلیک. | | keyboard | boolean | true | فعال‌سازی یا غیرفعال‌سازی تعاملات صفحه‌کلید (مانند زوم و جابجایی). | | multiWorld | boolean | false | فعال‌سازی یا غیرفعال‌سازی چندجهانی بودن نقشه. | | preserveDrawingBuffer | boolean | false | حفظ بافر رندرینگ نقشه برای اسکرین‌شات‌ها. | | scrollZoom | boolean | true | فعال یا غیرفعال کردن زوم با اسکرول. | | customAttribution | string | "" | متن اختصاصی برای Attribution. | | hash | boolean | false | فعال‌سازی نمایش وضعیت نقشه در URL. | | maxZoom | number | 20 | حداکثر سطح زوم. | | minZoom | number | 0 | حداقل سطح زوم. | | zoomSlider | boolean | true | نمایش یا مخفی کردن کنترل زوم اسلایدر. | | interactive | boolean | true | فعال‌سازی یا غیرفعال‌سازی تعاملات کاربر با نقشه. |

رویدادهای پشتیبانی‌شده

این کامپوننت از رویدادهای زیر پشتیبانی می‌کند:

• onClick: هنگامی که کاربر روی نقشه کلیک می‌کند. بازگشت اطلاعات شامل مختصات کلیک‌شده است.
• onMove: زمانی که کاربر نقشه را جابه‌جا می‌کند. می‌توانید اطلاعات حرکت فعلی نقشه را دریافت کنید.
• onMoveEnd: بعد از اتمام جابه‌جایی. بازگشت اطلاعات شامل مرکز جدید نقشه و سطح زوم است.
• onZoom: هنگام تغییر سطح زوم. اطلاعات زوم فعلی را برمی‌گرداند.
• onDrag: زمانی که کاربر لایه‌ها را درگ می‌کند. اطلاعات مختصات جدید در دسترس است.
• onStyleLoad: هنگامی که سبک نقشه بارگذاری می‌شود.
• onRender: در هر فریم رندر نقشه این رویداد اجرا می‌شود.

برای استفاده از هر رویداد، کافی است به صورت زیر تعریف کنید:

<MapBox
  onClick={(event, coords) => console.log('نقشه کلیک شد در:', coords)}
  onMoveEnd={() => console.log('حرکت نقشه به پایان رسید.')}
  onZoom={(zoom) => console.log('زوم تغییر کرد به:', zoom)}
/>

مثال

import React, { useState } from 'react';
import MapBox from 'mmap-fardup';

const App = () => {
  const [userCoords, setUserCoords] = useState(null);

  const handleMapClick = (event, coords) => {
    console.log('نقشه کلیک شد در:', coords);
  };

  return (
    <MapBox
      zoom={5}
      center={[51, 32]}
      userLocation={true}
      setUserCoords={setUserCoords}
      mapParams={{
        scrollZoom: true,
        doubleClickZoom: false,
      }}
      onClick={handleMapClick}
    />
  );
};

export default App;

2. draw

توضیحات

ابزاری برای رسم و ویرایش اشکال (نقاط، خطوط، چندضلعی‌ها) روی نقشه.

Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات | | -------------- | ---------- | ------------- | -------------------------------------------- | | enabledTools | string[] | ['Polygon'] | ابزارهای فعال (مانند Point, LineString). | | onDrawEnd | function | null | تابعی که پس از اتمام رسم فراخوانی می‌شود. |

مثال

import React from 'react';
import MapBox from 'mmap-fardup';
import {DrawingManager} from 'mmap-fardup';

const App = () => {
  const handleDrawEnd = (data) => {
    console.log('هندسه رسم‌شده:', data);
  };

  return (
    <MapBox zoom={6} center={[51, 32]}>
      <DrawingManager enabledTools={['Polygon', 'Point']} onDrawEnd={handleDrawEnd} />
    </MapBox>
  );
};

export default App;

3. GeoJSONLoader

توضیحات

داده‌های GeoJSON را به نقشه بارگذاری کرده و برای نمایش و ویرایش استفاده می‌کند.

Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات | | ------------- | -------- | ------------- | --------------------------------------------- | | geojsonData | object | null | داده‌های GeoJSON که به نقشه بارگذاری می‌شوند. |

مثال

import React from 'react';
import MapBox from 'mmap-fardup';
import {DrawingManager,GeoJSONLoader} from 'mmap-fardup';


const geojsonData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [51, 32],
      },
      properties: {
        name: 'نمونه نقطه',
      },
    },
  ],
};

const App = () => {
  const handleDrawEnd = (data) => {
    console.log('هندسه رسم‌شده:', data);
  };

  return (
    <MapBox mapParams={{ scrollZoom: true }} zoom={5} center={[51, 32]}>
      <DrawingManager onDrawEnd={handleDrawEnd} enabledTools={['Polygon', 'LineString', 'Point']} />
      <GeoJSONLoader geojsonData={geojsonData} />
    </MapBox>
  );
};

export default App;

4. GeoJSONLayer

توضیحات

کامپوننت GeoJSONLayer به شما امکان می‌دهد داده‌های GeoJSON را به‌عنوان یک لایه به نقشه اضافه کنید و با استفاده از امکاناتی مانند استایل‌دهی سفارشی و مدیریت رویدادها، آن را نمایش دهید. این کامپوننت از انواع هندسه‌های Point, LineString, و Polygon پشتیبانی می‌کند.

Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات | | ------------- | -------- | ------------- | ------------------------------------------------ | | geojsonData | object | null | داده‌های GeoJSON که روی نقشه نمایش داده می‌شوند. | | layerOptions | object | {} | تنظیمات سفارشی برای لایه نقشه. | | sourceOptions| object | {} | تنظیمات مربوط به منبع داده‌های لایه. | | linePaint | object | {} | استایل‌های سفارشی برای خطوط. | | fillPaint | object | {} | استایل‌های سفارشی برای چندضلعی‌ها. | | onMouseDown | function | null | رویداد فشار دادن ماوس روی ویژگی‌ها. | | onMouseUp | function | null | رویداد رها کردن ماوس روی ویژگی‌ها. | | onMouseMove | function | null | رویداد حرکت ماوس روی ویژگی‌ها. | | onMouseEnter| function | null | رویداد ورود ماوس به یک ویژگی. | | onMouseLeave| function | null | رویداد خروج ماوس از یک ویژگی. | | onClick | function | null | رویداد کلیک روی ویژگی‌های GeoJSON. | | onFeatureSelect| function | null | رویدادی که هنگام انتخاب ویژگی توسط کاربر فراخوانی می‌شود. | | enableSelect| boolean | false | امکان انتخاب ویژگی‌ها با کلیک یا تعامل. | | before | number | 1 | مشخص‌کننده ترتیب لایه در نقشه. |

مثال

import React from 'react';
import MapBox from 'mmap-fardup';
import {GeoJSONLayer} from 'mmap-fardup';

const geojsonData = {
 
        type: 'Polygon',
        coordinates: [
          [
            [50, 31],
            [52, 31],
            [52, 33],
            [50, 33],
            [50, 31],
          ],
        ],
      
};

const App = () => {
  return (
    <MapBox zoom={6} center={[51, 32]}>
      <GeoJSONLayer geojsonData={geojsonData} />
    </MapBox>
  );
};

export default App;

5. Marker

توضیحات

کامپوننت Marker برای افزودن نقاط (Marker) به نقشه استفاده می‌شود. شما می‌توانید مختصات، تصویر و استایل‌های دلخواه را برای Markerها تنظیم کنید و به تعاملاتی مانند کلیک روی نقاط گوش دهید.

Props

| Prop | نوع | مقدار پیش‌فرض | توضیحات | | ------------- | ----------- | ------------------------ | -------------------------------------------------------------------- | | points | array | [] | آرایه‌ای از نقاط به همراه مختصات و اطلاعات مربوطه. | | anchor | string | "center" | موقعیت لنگر تصویر Marker (مانند "top", "center", "bottom"). | | offset | array | [0, 0] | جابه‌جایی افقی و عمودی Marker به صورت [x, y]. | | image | string | "./images/location2.svg" | آدرس تصویر Marker. | | onClick | function | null | رویدادی که هنگام کلیک روی Marker فراخوانی می‌شود. | | style | object | {} | تنظیمات استایل Markerها. | | className | string | null | کلاس CSS سفارشی برای Markerها. |

مثال

import React from 'react';
import MapBox from 'mmap-fardup';
import {Marker} from 'mmap-fardup';

const App = () => {
  const points = [
    { coordinates: [51, 32], properties: { name: 'Point 1' } },
    { coordinates: [52, 33], properties: { name: 'Point 2' } },
  ];

  const handleMarkerClick = (event, feature) => {
    console.log('Clicked Marker:', feature.getProperties());
  };

  return (
    <MapBox zoom={5} center={[51, 32]}>
      <Marker points={points} onClick={handleMarkerClick} />
    </MapBox>
  );
};

export default App;

لایسنس

این پروژه تحت مجوز MIT منتشر شده است. برای جزئیات بیشتر به فایل LICENSE مراجعه کنید.