Draw

کامپوننت <Draw /> ارائه دهنده ابزار ترسیم است که برای ترسیم عارضه خطی و یا عارضه دایره‌ای استفاده می‌شود و به عنوان یک child درون کامپوننت والد خود که <Parsimap /> است، قرار گرفته می‌شود.

طریقه استفاده پایه

ابزار ترسیم در ساده‌ترین شکل خود نیازی به گزینه‌ای خاص ندارد ولی برای تعامل با آن، لازم است از گزینه‌ها و استایل مدنظر این ابزار با توجه به نیاز، استفاده نمود.

import React, { Component } from 'react';
import { Parsimap, Draw } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

export default class App extends Component {
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Draw />
            </Parsimap>
        );
    }
}

بکارگیری پیشرفته

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

import React, { Component } from 'react';
import { Parsimap, Draw } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

// circleStyle sample style for draw tool at `circle` type.
const circleStyle = {
    width: 5,
    color: '#814744',
    fill: '#114525',
};

export default class App extends Component {
    // Type is includes: line and circle. The `style` as type can styled by
    // `LineStyle` or `CircleStyle`. The `options` change position of tool. The
    // `options` show length on each drawn node. Define a type like
    // `horizontal`.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                events={{
                    ready: map => (window.map = map),
                }}
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Draw
                    type="circle"
                    style={circleStyle}
                    options={{ showLength: true }}
                />
            </Parsimap>
        );
    }
}

نوع circle برای ابزار ترسیم در نظر گرفته شده است.

وابستگی‌ها

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