شروع با نقشه وب

چطور شروع کنم؟

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

با توجه به اینکه SDK ‌ نقشه وب نشان در نسخه‌ی جاری بر پایه‌ی کتابخانه‌های OpenLayers (نسخه‌ی 8.1.0) و Leaflet (نسخه‌ی 1.9.4) پیاده‌سازی شده است، لازم است تا مبانی اولیه‌ی کار با این کتابخانه‌ها را بدانید. چنانچه با این کتابخانه‌ها آشنایی ندارید نگران نباشید! خوشبختانه این کتابخانه‌ها مجموعه‌ی کاملی از مستندات و نمونه کدهای آماده در اختیار شما قرار می‌دهند که از طرق آنها به راحتی می‌توان از قابلیت‌های متنوع نقشه استفاده کرد.

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

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

۱- قرار دادن 2 فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 8.1.0 کتابخانه‌ی OpenLayers می‌باشند.

            
<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 مشخص در صفحه و ایجاد یک instance جدید از نقشه.

۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را می‌توانید مشاهده کنید.

            <!doctype html>
<html lang='en'>
<head>
    <meta charset="utf-8">
    <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>

    <title>OpenLayers example</title>
</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',
        poi: true,
        traffic: true,
        view: new ol.View({
            center: ol.proj.fromLonLat([51.389, 35.6892]),
            zoom: 14
        })
    });
</script>
</body>
</html>

        

نحوه استفاده در باندلر ها مانند webpack, rollup :

1- ابتدا پکیج openLayer نشان را در پروژه خود نصب نمائید:

در صورتی که از npm استفاده می‌کنید:

            // using npm
npm i @neshan-maps-platform/ol
        

در صورتی که از yarn استفاده می‌کنید:

            // using yarn
yarn add @neshan-maps-platform/ol
        

2- اختصاص یک المنت برای نمایش نقشه در صفحه html مورد نظرتان درون پروژه:

            <div id="map"></div>
        

3- ایجاد نقشه در محیط توسعه:

            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';

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

۱- قرار دادن ۲ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 1.9.4 کتابخانه‌ی Leaflet می‌باشند. همچنین توجه کنید که از این فایل‌ها نباید بصورت لوکال یا افلاین استفاده کنید:

            <link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
    <script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>
        

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

۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را می‌توانید مشاهده کنید:

            <!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Map</title>

    <link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
    <script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>

    <style>
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
        }

        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const testLMap = new L.Map("map", {
        key: "YOUR_API_KEY",
        maptype: "neshan",
        poi: false,
        traffic: false,
        center: [35.699756, 51.338076],
        zoom: 14,
    })
</script>
</body>
</html>

        
در ادامه یک مثال از چگونگی تغییر استایل نقشه را مشاهده می‌کنید:
تغییر استایل نقشه
  • در حال حاضر در زیرساخت توسعه‌ی نقشه وب نشان چهار نوع استایل برای نقشه آماده شده است. شما به راحتی می‌توانید از طریق متد setMapType در کلاس Map از آن‌ها استفاده کنید. همچنین امکان استفاده از سایر نقشه‌های زیر دست در این زیرساخت پیش‌بینی شده است. در ادامه شیوه‌ی استفاده از این متد و همچنین قابلیت استفاده از سایر نقشه‌های زیردست را یک مثال برای شما توضیح داده‌ایم.

    انواع استایل نقشه در نشان عبارتند از:

    • dreamy
    • dreamy-gold
    • neshan
    • standard-day
    • standard-night
    • osm-bright
Dreamy
myMap.setMapType("dreamy");
Dreamy Gold
myMap.setMapType("dreamy-gold");
Neshan
myMap.setMapType("neshan");
Standard Day
myMap.setMapType("standard-day");
Standard Night
myMap.setMapType("standard-night");
OSM Bright
myMap.setMapType("osm-bright");
Custom Tile Server
myMap.setMapType("https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png");

مثال ها

مثال های کتابخانه Leaflet:

افزودن مارکر به نقشه با استفاده از کتابخانه Leaflet

افزودن آیکون شخصی سازی شده به نقشه با استفاده از کتابخانه Leaflet

رسم مسیر بر روی نقشه با استفاده از کتابخانه Leaflet

مثال های کتابخانه OpenLayers:

افزودن مارکر به نقشه با استفاده از کتابخانه OpenLayers

افزودن آیکون شخصی سازی شده به نقشه با استفاده از کتابخانه OpenLayers

رسم مسیر بر روی نقشه با استفاده از کتابخانه OpenLayers

فهرست مطالب این صفحه