Package Exports

mmap-fardup
mmap-fardup/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mmap-fardup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 مراجعه کنید.