کیت توسعه Openlayers نشان

اطلاع

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

این کیت توسعه نرم‌افزار (SDK) که با زبان جاوااسکریپت نوشته شده است، به توسعه‌دهندگان وب امکان می‌دهد تا به سادگی نقشه‌های داینامیک را به پروژه‌های خود اضافه کنند. توسط متدهای استاندارد این کیت، می‌توانید آیتم‌های مختلفی مانند نشانگر (Marker)، خط، چندضلعی، دایره و... را به نقشه اضافه کنید.

این SDK بر پایه‌ی کتابخانه‌ OpenLayers (نسخه‌ی 8.1.0) پیاده‌سازی شده است، بنابراین آشنایی با مبانی اولیه این کتابخانه مفید خواهد بود. خوشبختانه OpenLayers مستندات و نمونه کدهای کاملی را ارائه می‌دهد.

برای اطلاعات بیشتر می‌توانید به منابع زیر مراجعه کنید:

نکته

در حال حاضر دو لایه ترافیک آنلاین و لایه مکان‌ها (POIs) در این کتابخانه بروزرسانی نمی‌شوند. در صورت تمایل برای استفاده از این دو لایه می‌توانید از کیت توسعه Mapbox GL نشان استفاده کنید.

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

این کتابخانه به دو روش CDN و نصب پکیج NPM قابل راه‌اندازی است.

روش اول: استفاده از CDN

۱. ابتدا فایل‌های CSS و JavaScript مربوط به SDK را با افزودن لینک‌های زیر به صفحه HTML خود اضافه کنید:

<link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
<script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></script>

۲. یک تگ div با id مشخص در صفحه قرار دهید و یک نمونه جدید از نقشه ایجاد کنید.

۳. نمونه کد کامل:

<!doctype html>
<html lang='fa'>
<head>
    <meta charset="utf-8">
    <title>نقشه نشان با OpenLayers</title>
    <style>
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
        }
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
    <script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></script>
</head>
<body>
    <div id='map' class='map'></div>
    <script type='text/javascript'>
        var map = new ol.Map({
            maptype: 'neshan',
            target: 'map',
            key: 'YOUR_WEB_API_KEY',
            poi: true,
            traffic: true,
            view: new ol.View({
                center: ol.proj.fromLonLat([51.389, 35.6892]),
                zoom: 14
            })
        });
    </script>
</body>
</html>

روش دوم: نصب از طریق NPM

ابتدا پکیج را با استفاده از مدیر بسته دلخواه خود نصب کنید:

npm
yarn

npm i @neshan-maps-platform/leaflet

yarn add @neshan-maps-platform/leaflet

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

import '@neshan-maps-platform/ol/ol.css';
import Map from '@neshan-maps-platform/ol/Map';
import View from '@neshan-maps-platform/ol/View';
import { fromLonLat } from '@neshan-maps-platform/ol/proj';

const map = new Map({
    mapType: 'neshan',
    target: 'map',
    key: 'YOUR-WEB-API-KEY',
    poi: false,
    traffic: false,
    view: new View({
        center: fromLonLat([51.389, 35.6892]),
        zoom: 14
    })
});

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

تغییر استایل نقشه

شما می‌توانید به راحتی از طریق متد setMapType استایل نقشه را تغییر دهید. استایل‌های موجود عبارتند از:

dreamy
dreamy-gold
neshan
standard-day
standard-night
osm-bright

همچنین امکان استفاده از سرور کاشی (Tile Server) دلخواه نیز وجود دارد.

مثال تغییر استایل:

// تغییر به استایل Dreamy Gold
myMap.setMapType("dreamy-gold");

// تغییر به استایل Standard Day
myMap.setMapType("standard-day");

// استفاده از سرور کاشی دلخواه (مثلاً OpenStreetMap)
myMap.setMapType("https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png");