عکس افزودن نقشه به سایت

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

با توجه به محدودیت هایی که در برای افزودن نقشه گوگل به وب سایت های ایرانی به وجود آمده لذا تصمیم گرفتیم آموزشهایی برای افزودن نقشه گوگل و سایر نقشه‌ها به سایت متشر کنیم با توجه به شرایط کنونی  یکی از بهترین کتابخانه ها OpenLayers می‌باشد.با استفاده از این کتابخانه شما می‌توانید انواع نقشه‌ها (نقشه ی گوگل،بینگ،osm و …) را به وب سایت خود اضافه کنید.

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

این کتابخانه به صورت داخلی از انواع فرمت نقشه‌‌های (image,vector tile ) تجاری و مجانی پشتیبانی می‌کند و در مرحله‌ی  طراحی سایت می‌توانید نقشه‌های مورد نظر را به وب سایت اضافه کنید.با استفاده از این کتابخانه می‌توان نقشه ها را در سیستم‌ها مختصات (projection)مختلفی نمایش داد.

 API عمومی

این کتابخانه با نام ol در لیست پکیج‌های npm ثبت شده است که با نصب آن می‌توانید از تمام API  های رسمی این کتابخانه استفاده کنید.

نمایش و پشتیبانی در انواع مروگرها

به صورت پیش فرض این کتابخانه از روشهای بهینه سازی شده برای لود و نمایش نقشه  اسفاده می‌کند.

این کتابخانه در تمام مرورگرهای مدرن مثل کروم، فایرفاکس، سافاری و Edge  که از HTML5 و ECMAScript5 پشتیبانی می‌کنند قابل  اجرا می‌باشد.برای پشتیبانی و اجرا در مرورگر و پلت فرم‌های قدیمی مثل اینترنت اکسپلورر ۹ و اندروید۴.x و pollyfills  باید کدها را با کامپایلرهای جاوا اسکریپت (مثل bable)که ecm5 را به جاوا اسکریپت قابل فهم در مرورگرهای قدیمی می‌کند تبدیل کنیم و با polyfills  وصله کنیم .کتابخانه‌ی ol  در انواع دستگاه‌ها مانند دسکتاپ لپ‌تاپ و تبلت و موبایل قابل استفاده می‌باشد و از تمامی رویدادهای ماوس و تاچ پشتیبانی می‌کند.

ماژولها  و کنوانسیون نام‌ گذاری

ماژول های این کتابخانه کلاسهایی شامل توابع و ثابت‌ها  فراهم می‌کنند که می‌توان به راحتی آنها را در پروژه import و استفاده کرد.این کلاسها به روش CamelCase نام گذاری شده‌اند.


import Map from 'ol/Map';
import View from 'ol/View'

کلاسهای سلسله مراتبی با استفاده والدشان سازماندهی و گروه بندی شده‌اند.به طوری که والد آنها در یکی از  زیر پوشه‌ی ol که هم نام با نام کلاس والد است قرار گرفته اند و کلاسهای فرزند در پوشه‌ والدشان قرار گرفته اند با توجه به ساختار پوشه ها و زیر پوشه ها می‌توان تکه کد بالا را  به صورت زیر نیز در پروژه وصله کرد:


import {Map, Viwe} from 'ol';
improt {Tile, Vector} from 'ol/layer';

در خط اول کلاسهای Map , View از پوشه‌ی  ol وصله شده‌اند و در خط دوم کلاسها Tile , Vector که از کلاس Layer مشتق شده‌اند  از مسیر ol/layer به صفحه‌ی مربوطه وصله می‌شوند.

علاوه بر کلاسها، ماژولها با همان نام‌ کلاس متناظر  که تماما با کاراکترهای کوچک نام گذاری شده اند  توابع و ثابت‌ها را در ارائه می‌کنند:


import {inherits} from 'ol';
import {fromLonLat} from 'ol/proj'

دیدگاه خود را بنویسید