Polygon

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

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

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

import React, { Component } from 'react';
import { Parsimap, Polygon, Layer, 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%"
                events={{
                    ready: map => (window.map = map),
                }}
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="basic-usage">
                    <Polygon
                        latlngs={[
                            { lat: 35.75827, lng: 51.40976 },
                            { lat: 35.75654, lng: 51.41018 },
                            { lat: 35.75787, lng: 51.41219 },
                            { lat: 35.75827, lng: 51.40976 },
                        ]}
                    />
                </Layer>
            </Parsimap>
        );
    }
}

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

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

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

import React, { Component } from 'react';
import { Parsimap, Polygon, 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 PolygonDetails() {
    return (
        <div>
            <b>Polygon Details:</b> The three stations near the Vanak Square
            include two BRT stations and one public bus stop.
        </div>
    );
}

export default class App extends Component {
    render() {
        // Assign a popup that contains the component to the polygon 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">
                    <Polygon
                        latlngs={[
                            { lat: 35.75827, lng: 51.40976 },
                            { lat: 35.75654, lng: 51.41018 },
                            { lat: 35.75787, lng: 51.41219 },
                            { lat: 35.75827, lng: 51.40976 },
                        ]}
                        style={{ width: 8 }}
                    >
                        <Popup visible={true}>
                            <PolygonDetails />
                        </Popup>
                    </Polygon>
                </Layer>
            </Parsimap>
        );
    }
}

رسم چندضلعی با 8 پیکسل width.

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

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

import React, { Component } from 'react';
import { Parsimap, Polygon, 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 PolygonDetails() {
    return (
        <div>
            <b>Polygon Details:</b> The three stations near the Vanak Square
            include two BRT stations and one public bus stop.
        </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">
                    <Polygon
                        latlngs={[
                            { lat: 35.75827, lng: 51.40976 },
                            { lat: 35.75654, lng: 51.41018 },
                            { lat: 35.75787, lng: 51.41219 },
                            { lat: 35.75827, lng: 51.40976 },
                        ]}
                        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}>
                            <PolygonDetails />
                        </Popup>
                    </Polygon>
                </Layer>
            </Parsimap>
        );
    }
}

وابستگی‌ها

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