پلتفرم نقشه نشان

هشـدار!
صفحه‌ای که در حال مشاهده آن هستید، حاوی مستندات نسخه قدیمی می‌باشد. نسخه جدیدی از این SDK در دسترس توسعه‌دهندگان قرار گرفته است. لطفا با مراجعه به این صفحه از نسخه جدید استفاده نمایید.

پـیش نیازها

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

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

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

ثبت‌نام و دریافت کلید دسترسی

راه‌اندازی نقشـه با Leaflet با OpenLayers

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

<link href="https://static.neshan.org/sdk/openlayers/4.6.5/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/4.6.5/ol.js" type="text/javascript"></script>

* فایل polyfill.js که قبل از اسکریپت اصلی لود می‌شود جهت تضمین سازگاری با مرورگرهای قدیمی می‌باشد

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

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

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

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

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

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

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

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

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

dreamy
neshan
standard-day
standard-night
osm-bright

Dreamy

myMap.setMapType("dreamy");

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");

نشان زیرساخت توسعه‌ی نقشه

SDK نقشه وب

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