Line

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

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

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

import React, { Component } from 'react';
import { Parsimap, Line, 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">
                    <Line
                        latlngs={[
                            { lat: 35.7575, lng: 51.41 },
                            { lat: 35.7576, lng: 51.412 },
                        ]}
                    />
                </Layer>
            </Parsimap>
        );
    }
}

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

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

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

import React, { Component } from 'react';
import { Parsimap, Line, 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 LineDetails() {
    return (
        <div>
            <b>Line Details:</b> The hypothetical lines extend from the Vanak
            Square and end to its northern side.
        </div>
    );
}

export default class App extends Component {
    render() {
        // Assign a popup that contains the component to the line 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">
                    <Line
                        latlngs={[
                            { lat: 35.7575, lng: 51.41 },
                            { lat: 35.7576, lng: 51.412 },
                            { lat: 35.7579, lng: 51.41 },
                        ]}
                        style={{ width: 8 }}
                    >
                        <Popup visible={true}>
                            <LineDetails />
                        </Popup>
                    </Line>
                </Layer>
            </Parsimap>
        );
    }
}

رسم پار خط با 8 پیکسل width.

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

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

import React, { Component } from 'react';
import { Parsimap, Line, 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 LineDetails() {
    return (
        <div>
            <b>Line Details:</b> The hypothetical lines extend from the Vanak
            Square and end to its northern sid
        </div>
    );
}

export default class App extends Component {
    // The `style` set width, color, CSS class of line 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">
                    <Line
                        latlngs={[
                            { lat: 35.7575, lng: 51.41 },
                            { lat: 35.7576, lng: 51.412 },
                            { lat: 35.7579, lng: 51.41 },
                        ]}
                        style={{
                            width: 4,
                            color: '#471251',
                            className: 'my-line',
                            arrowHead: {
                                startSide: true,
                                // endSide: boolean - use for append arrowHead
                                // to endSide of line.
                            },
                            circleHead: {
                                // startSide: boolean - use for append arrowHead
                                // to startSide of line.
                                endSide: true,
                            },
                            outline: {
                                width: 8,
                                color: '#efefef',
                                className: 'my-outline',
                            },
                        }}
                        options={{
                            focusable: true,
                            areaInfo: true,
                            // popup: string|Element - Also can use popup here.
                        }}
                        events={{ click: event => {} }}
                    >
                        <Popup visible={true}>
                            <LineDetails />
                        </Popup>
                    </Line>
                </Layer>
            </Parsimap>
        );
    }
}

وابستگی‌ها

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