Layer

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

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

لایه برای ایجاد و نمایش عارضه نیاز به تعیین گزینه id و تعیین حداقل یک نوع عارضه دارد و برای تعامل با آن، لازم است از گزینه‌های مدنظر آن با توجه به نیاز، استفاده نمود. عارضه‌های <Point />، <Line />، <Polygon /> و <Circle /> می‌توانند در <Layer /> بکارگرفته شده و با توجه به نوع یک یا مجموعه‌ای از عارضه‌ها را نمایش دهند.

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

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

export default class App extends Component {
    // Use `Layer` by specifying` id` and determining at least one type of
    // feature including point, line, polygon, circle.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="my-layer">
                    <Point latlng={{ lat: 35.7575, lng: 51.41 }} />
                </Layer>
            </Parsimap>
        );
    }
}

ایجاد لایه‌ای از عارضه‌ای نقطه‌ای با استفاده از <Point />.

خوشه‌بندی

جهت نمایش عارضه‌های متعدد در نقشه می‌توان آنها را خوشه‌بندی کرد و با توجه به تراکم و نزدیک بودن نقاط به همدیگر در سه دسته تراکم بالا، متوسط و پائین تقسیم بندی نمود. جهت اعمال خوشه بندی باید گزینه clusterable از گزینه‌های لایه حاوی مقدار true بوده و برای استایل‌بندی نشانگر مربوط به هر مقیاس از استایلهای خوشه‌بندی استفاده نمود.

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

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

// Activate the cluster mode for the layer and assign 50 pixels for the medium
// scale cluster icon (the number of features is less than 10).
const clusteringOptions = {
    clusterable: true,
    clusterStyles: {
        medium: {
            size: { width: 50 },
        },
    },
};

export default class App extends Component {
    // Using a set of points with different coordinates and clustering them by
    // parameters related to `clusteringOptions`
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                zoom={10}
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="cluster-layer" options={clusteringOptions}>
                    <Point latlng={{ lat: 35.767, lng: 51.4212 }} />
                    <Point latlng={{ lat: 35.765, lng: 51.4134 }} />
                    <Point latlng={{ lat: 35.765, lng: 51.4134 }} />
                    <Point latlng={{ lat: 35.765, lng: 51.4134 }} />
                    <Point latlng={{ lat: 35.775, lng: 51.4124 }} />
                    <Point latlng={{ lat: 35.785, lng: 51.4111 }} />
                    <Point latlng={{ lat: 35.735, lng: 51.4411 }} />
                    <Point latlng={{ lat: 35.725, lng: 51.4311 }} />
                    <Point latlng={{ lat: 35.715, lng: 51.4181 }} />
                    <Point latlng={{ lat: 35.788, lng: 51.4121 }} />
                    <Point latlng={{ lat: 35.765, lng: 51.4184 }} />
                    <Point latlng={{ lat: 35.757, lng: 51.4172 }} />
                </Layer>
            </Parsimap>
        );
    }
}

محدودیت سطح بزرگنمائی

جهت نمایش یک یا مجموعه‌ای از عارضه‌ها در یک محدوده سطح بزرگنمائیی خاص از گزینه‌های minZoom - تعیین حداقل سطح بزرگنمائی و maxZoom - حداکثر سطح بزرگنمائی از گزینه‌های لایه استفاده می‌شود. بکارگیری همزمان minZoom و maxZoom سبب می‌شود که عارضه‌های مربوط به این لایه تنها در بین سطح بزرگنمائی تعیین شده نمایش یابد.

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

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

// Apply zoom limitation between minimum level 10 to maximum level 12.
const zoomLimitationOptions = {
    minZoom: 10,
    maxZoom: 12,
};

export default class App extends Component {
    // Apply zoom limitation by specifying minZoom and maxZoom of layer
    // options.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                zoom={10}
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Layer id="cluster-layer" options={zoomLimitationOptions}>
                    <Point latlng={{ lat: 35.767, lng: 51.4212 }} />
                    <Point latlng={{ lat: 35.765, lng: 51.4134 }} />
                </Layer>
            </Parsimap>
        );
    }
}

بکارگیری مستقل

لایه می‌تواند به صورت مستقل نیز بکارگرفته شود. در این حالت <Layer /> خارج از والد خود که <Parsimap /> است، قرار یافته و mapId مقدار شناسه نقشه که در <Parsimap /> به عنوان id تعیین شده است قرار می‌یابد، با این کار مشخص می‌شود که نقشه مربوط به آن چه است. در لایه که به صورت مستقل استفاده شده است با هر تغییر در کامپوننت که منجر به آپدیت آن شود، برای نمونه تغییر state که پس از آن تابع render یا خروجی کامپوننت صدا زده می‌شود، لایه مجدداً ایجاد می‌گردد. ولی زمانی که لایه داخل والد خود قرار یابد تنها در اولین بار و حین ایجاد شدن نقشه ساخته شده و عارضه‌های آن بروی نقشه نمایش می‌یابد. مستقل بودن <Layer /> این امکان را فراهم می‌آورد تا به صورت مکرر عارضه‌های درون لایه با توجه به نوع داده‌های ارسالی به کامپوننت بروز شوند. لایه‌های مستقل با داده های جدید پس از حذف شدن دوباره بروی نقشه ایجاد می‌گردند، به عنوان نمونه می‌توان از این لایه‌ها به منظور نمایش موقعیت خودروها، در حمل و نقل و ترافیک و سایر نشانگرهایی که متحرک هستند بهره برد. همچنین این گونه لایه‌ها به منظور نمایش real-time یا بلادرنگ نیز کاربرد دارند به گونه‌ای که همزمان با تغییرات لایه بروز می‌شود برای نمونه نمایش اطلاعات آماری آنی از یک محدوده و یا تغییر اطلاعات مربوط به لایه از طریق انتخاب اطلاعاتی دیگر که می‌بایست در نقشه تغییر یابد.

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

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

// firstPoint and secondPoint includes two feature point with different
// coordinates.
const firstPoint = <Point latlng={{ lat: 35.7575, lng: 51.41 }} />;
const secondPoint = <Point latlng={{ lat: 35.7576, lng: 51.409 }} />;

export default class App extends Component {
    constructor() {
        super();
        this.state = {};

        // After two seconds, the `true` value is placed in the state of the
        // showSecondPoint.
        setTimeout(() => {
            this.setState({ showSecondPoint: true });
        }, 2000);
    }

    // If state showSecondPoint is correct, secondPoint is displayed, otherwise
    // the firstPoint is shown on the map.
    render() {
        return (
            <div>
                <Parsimap
                    id="map"
                    height="100%"
                    center={{ lat: 35.7575, lng: 51.41 }}
                />

                <Layer mapId="map">
                    {this.state.showSecondPoint ? secondPoint : firstPoint}
                </Layer>
            </div>
        );
    }
}

تغییر عارضه نقطه‌ای هنگام true شدن مقدار state مربوط به showSecondPoint.

وابستگی‌ها

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