شروع با نقشه وب نسخه 1.4

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

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

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

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

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

            <link href="https://static.neshan.org/sdk/openlayers/5.3.0/ol.css" rel="stylesheet" type="text/css">
  <script
    src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://static.neshan.org/sdk/openlayers/5.3.0/ol.js" type="text/javascript"></script>
        
* فایل polyfill.js که قبل از اسکریپت اصلی لود می‌شود جهت تضمین سازگاری با مرورگرهای قدیمی می‌باشد

۲- قرار دادن یک 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 href="https://static.neshan.org/sdk/openlayers/5.3.0/ol.css" rel="stylesheet" type="text/css">
<script
  src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://static.neshan.org/sdk/openlayers/5.3.0/ol.js" type="text/javascript"></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>

        

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

<link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
<script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>

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

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

در ادامه یک مثال از چگونگی تغییر استایل نقشه را مشاهده می‌کنید:
تغییر استایل نقشه
  • در حال حاضر در زیرساخت توسعه‌ی نقشه وب نشان چهار نوع استایل برای نقشه آماده شده است. شما به راحتی می‌توانید از طریق متد 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");
فهرست مطالب این صفحه