Circle

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

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

عارضه دایره‌ای جهت نمایش بروی نقشه نیاز به تعیین گزینه‎های radius و latlng دارد و برای تعامل با آن، لازم است از گزینه‌ها و استایل مدنظر این عارضه با توجه به نیاز، استفاده نمود.

import React, { Component } from 'react';
import { Parsimap, Circle, Layer } 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 }}
            >
                <Layer id="basic-usage">
                    <Circle
                        radius={60}
                        latlng={{ lat: 35.75751, lng: 51.40997 }}
                    />
                </Layer>
            </Parsimap>
        );
    }
}

ترسیم دایره با توجه به latlngs تعیین شده.

بکارگیری پاپ آپ

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

import React, { Component } from 'react';
import { Parsimap, Circle, Layer, Popup } from 'react-parsimap';

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

// Sample component for use as `Popup` content.
function CircleDetails() {
    return (
        <div>
            <b>Circle Details:</b> The area within the circle is overshadowed by
            the Vanak Square.
        </div>
    );
}

export default class App extends Component {
    render() {
        // Assign a popup that contains the component to the Circle and display
        // when the marker is displayed on the map by the `visible` option.
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="using-popup">
                    <Circle
                        radius={60}
                        latlng={{ lat: 35.75751, lng: 51.40997 }}
                    >
                        <Popup visible={true}>
                            <CircleDetails />
                        </Popup>
                    </Circle>
                </Layer>
            </Parsimap>
        );
    }
}

رسم دایره با 8 پیکسل width.

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

عارضه دایره‌ای می‌تواند به صورت پیشرفته نیز بکارگرفته شود. با استفاده از استایل‌بندی می‌توان ، اندازه width، نوع رنگ، کلاس CSS، میزان شفافیت مربوط به شکل دایره‌ای را تعیین کرد. بوسیله اعمال گزینه‌ها می‌توان قابلیت تمرکز روی دایره‌ای، دریافت آدرس از طریق کلیک بروی عارضه و popup را تعیین نمود. توسط رخدادها می‌توان event خاصی را به عارضه اختصاص داده و یا حین کلیک بروی عارضه با استفاده از کامپوننت <Popup /> پاپ آپی را بروی آن نشان داد.

import React, { Component } from 'react';
import { Parsimap, Circle, Popup, Layer } from 'react-parsimap';

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

// Sample component for use as `Popup` content.
function CircleDetails() {
    return (
        <div>
            <b>Circle Details:</b> The area within the circle is overshadowed by
            the Vanak Square.
        </div>
    );
}

export default class App extends Component {
    // The `style` set width, color, fill, CSS class, alpha of polygon shape.
    // The `options` make shape focusable, return address by click on it or can
    // use popup as a option. Handling specify event through `events` or show
    // popup through `Popup` component.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="advanced-usage">
                    <Circle
                        radius={60}
                        latlng={{ lat: 35.75751, lng: 51.40997 }}
                        style={{
                            width: 4,
                            alpha: 0.7,
                            color: '#471251',
                            fill: '#3521421',
                            className: 'my-polygon',
                        }}
                        options={{
                            focusable: true,
                            areaInfo: true,
                            // popup: string|Element - Also can use popup here.
                        }}
                        events={{ click: event => {} }}
                    >
                        <Popup visible={true}>
                            <CircleDetails />
                        </Popup>
                    </Circle>
                </Layer>
            </Parsimap>
        );
    }
}

وابستگی‌ها

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