mmap-fardup v3.1.2

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

mapParams تنظیمات

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

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

• 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

مثال

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

مثال

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

مثال

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

مثال

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