در حال بارگذاری

پرش به مطلب اصلی

کیت توسعه react openlayers نشان

اطلاع

صفحه‌ای که در حال مشاهده آن هستید، حاوی مستندات آخرین نسخه کیت توسعه react openlayers می‌باشد. مستندات مرتبط با نسخه قدیمی این سرویس را در این صفحه می‌توانید مشاهده کنید.

اطلاع

برای استفاده از کیت‌های توسعه‌ی نشان، ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.

با وجود اینکه این کامپوننت بر پایه‌ی کتابخانه Openlayers بنا شده، برای استفاده با تنظیمات پیش فرض نقشه یا حتی کمی فراتر، نیاز به داشتن دانشی از این کتابخانه ندارید. ولی برای استفاده‌های شخصی سازی شده تر، می‌توانید از امکانات این کتابخانه با استفاده از متغیر نقشه که در دسترس توسعه دهنده قرار داده می‌شود استفاده نمایید. کامپوننت React نقشه و مسیریاب نشان، برای راحتی بیشتر توسعه‌دهنده‌های وب ایجاد گشته و با Api ساده،قابلیت‌های نقشه و سرویس‌های نشان را در اختیار توسعه دهندگان React قرار می‌دهد.
این کامپوننت از نقشه‌ی openlayers v8.1.0 استفاده می‌نماید. برای شخصی‌سازی کردن بیشتر نقشه، می‌توانید از داکیومنت‌های رسمی openlayers نیز استفاده نمایید.

https://openlayers.org/en/v8.1.0/doc

دریافت پروژه نمونه React OpenLayers نشان

راه اندازی نقشه​

نحوه نصب​

مطمئن شوید که ورژن بروز Node.js را نصب دارید. سپس از یکی از راه های زیر برای نصب پکیج از npm اقدام کنید.

npm install @neshan-maps-platform/react-openlayers
npm install @neshan-maps-platform/ol
yarn add @neshan-maps-platform/react-openlayers
yarn add @neshan-maps-platform/ol

TypeScript​

اگر پروژه‌یتان از ‌TypeScript پشتیبانی می‌کند @neshan-maps-platform/react-openlayers بر روی TypeScript نوشته شده و به طور کامل Type های کامپوننت را تعریف و ارائه می‌کند. برای اینکه از تایپ‌های نقشه openlayers که در کامپوننت استفاده می‌شود هم استفاده کنید، از دستور زیر، Type های openlayers را نصب کنید.

npm install –save-dev @types/ol@5
yarn add -D @types/ol@5

نحوه استفاده​

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

مثال راه اندازی را ببینید.

import {useEffect, useRef} from "react"
import {Map} from "@neshan-maps-platform/ol"
import NeshanMap, {NeshanMapRef} from "@neshan-maps-platform/react-openlayers"


function App() {
 return <NeshanMap
       mapKey="YOUR_MAP_KEY"
></NeshanMap>
}


export default App

API: Openlayers​

این کامپوننت از نسخه یکپارچه شده‌ی نقشه‌ی openlayers v8.1.0 استفاده می‌کند. برای شخصی‌سازی کردن بیشتر نقشه، می‌توانید از داکیومنت‌های رسمی openlayers نیز استفاده بکنید.

مستندات openlayers

مطالعه مستندات OpenLayers​

Component Props​

Global​

#mapKey*

کلید نقشه که در پروفایل خود در قسمت کلید های دسترسی دریافت نمایید.

poi: true

#center

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

center: CoordsObj
interface  CoordsObj
{
    latitude: number,
    longitude: number,
}

#onInit

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

onInit?: (map: OlMap) => void
بخش تنظیمات لایه ها​

#zoom

 میزان زوم نقشه در هنگام شروع

zoom?: number

#poi

 نمایش یا عدم نمایش مکانها روی نقشه

poi?: boolean

#traffic

نمایش یا عدم نمایش خطوط ترافیک

traffic?: boolean

#defaultType

استایل نقشه در هنگام شروع

 مثال را ببینید.

defaultType?: MapType

type MapType =
    |"neshan"
    |"dreamy"
    |"dreamy-gold"
    |"standard-night"
    |"standard-day"
    |"osm-bright"
Methods​

توابع و متغیر هایی که می‌توانید خارج از کامپوننت به آن ها دسترسی داشته باشید را در اختیارتان قرار می‌دهد.
 مثال را ببینید.

#mapRef.mapContainer

المان html ای که نقشه در آن قرار دارد.

mapContainer :  HTMLDivElement

#mapRef.ol

آبجکت OpenLayer

ol?:  Ol

#mapRef.map

نقشه‌ی ایجاد شده روی openlayers.

map?:  OlMap | null

#mapRef.isInitiated

وضعیت نقشه که آیا ایجاد شده‌است یا خیر.

isInitiated:  boolean
متدهای نقشه (olMap)​​

نقشه‌ای که در اختیار توسعه‌دهنده قرار داده می‌شود، چند متد به شرح زیر بیشتر از نقشه‌ی پایه‌ی openlayers دارد.

#olMap.setMapType

پس از ایجاد شدن نقشه، می‌توانید نوع نقشه را با این تابع تغییر دهید.

setMapType(value: MapType): void

#olMap.switchPoiLayer

پس از ایجاد شدن نقشه، می‌توانید نمایش نقاط نقشه را با این تابع خاموش و روشن کنید.

switchPoiLayer(value: boolean): void

#olMap.switchTrafficLayer

پس از ایجاد شدن نقشه، می‌توانید نمایش ترافیک نقشه را با این تابع خاموش و روشن کنید.

switchTrafficLayer(value: boolean): void

مثالها:​

شروع نقشه:​
import NeshanMap from "@neshan-maps-platform/react-openlayers"
import "@neshan-maps-platform/react-openlayers/dist/style.css"


function App() {
 return <NeshanMap
       mapKey="YOUR_MAP_KEY"
></NeshanMap>
}


export default App

مرکز نقشه و زوم:​
import {useEffect, useRef} from "react"
import {Map} from "@neshan-maps-platform/ol"
import NeshanMap, {NeshanMapRef} from "@neshan-maps-platform/react-openlayers"


function App() {
 return <NeshanMap
       	mapKey="YOUR_MAP_KEY"
      center={{ latitude: 35.7665394, longitude: 51.4749824 }}
        	zoom={14}
></NeshanMap>
}


export default App
استفاده از نقشه و متد های نقشه:​
import {useEffect, useRef} from "react"
import {Map} from "@neshan-maps-platform/ol"
import NeshanMap, {NeshanMapRef} from "@neshan-maps-platform/react-openlayers"

function App() {
    const mapRef = useRef<NeshanMapRef | null>(null)

    const onInit = (map: Map) => {
        map.setMapType("osm-bright")
        map.switchTrafficLayer(true)
    }

    useEffect(() => {
        if (mapRef.current?.map) {
            mapRef.current?.map.switchTrafficLayer(true)
            mapRef.current?.map.setMapType("standard-night")
        }
    }, [])


    return (
        <div style={{ width: "100vh"}}>
            <NeshanMap
                mapKey="Your_Map_Key"
                defaultType="neshan"
                center={{latitude: 35.7665394, longitude: 51.4749824}}
                style={{height: "48vh", width: "100%"}}
                onInit={onInit}
                zoom={13}
                traffic={false}
                poi={false}
            ></NeshanMap>
            <hr/>
            <NeshanMap
                ref={mapRef}
                mapKey="Your_Map_Key"
                defaultType="dreamy"
                style={{height: "48vh", width: "100%"}}
                traffic={false}
                poi={false}
            ></NeshanMap>
        </div>
    )
}

export default App

پس از چند لحظه:

استایل نقشه در هنگام شروع:​
<NeshanMap
        	mapKey="YOUR_MAP_KEY"
      center={{ latitude: 35.69672648316882, longitude: 51.36281969540723 }}
        	defaultType="standard-night">
</NeshanMap>