:هدنسیونgisplus.ir/ebook/openlayer_googlemap_gisplus.ir.pdf · ۴ openlayers زا...

:هنویسند

علی درخشان

http://mansour.adibi.info











2

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

فهرست

3 .......................................................................................................... مقدمه

3 ...................................................................................................... دیکن شروع یعمل را OpenLayers آموزش

4 .................................................................................................................تیسا وب در نقشه شینما آموزش

4 .............................................................................................................................. وب صفحه جادیا: اول گام

Google Map API ...................................................................................................... 6 کردن اضافه: دوم گام

OpenLayers .............................................................................................................. 8 کردن اضافه: سوم گام

11 ..................................................................................................................... گوگل نقشه شینما: چهارم گام

14 .............................................................................................. تیسا وب در گوگل نقشه شینما آموزش لمیف

15 ................................................................................................................................................ یانیپا سخن

3


مقدمهراه اندازی را در وب پیاده سازی نمایید. اگر مقدمات GISمی توانید قابلیت های OpenLayersشما با استفاده از

Web GIS را مهیا کرده باشید، آموزشOpenLayers شروع برنامه نویسی گام بعدی برایWeb GIS ی م

باشد.

را به شما Web GISپیاده سازی نوشته هایی را منتشر کرده ایم تا این مسیر GISPlusسایت تا کنون در

ته نیز ذکر کرده ایم. پس تا انتها با ما همراه باشید.بیاموزیم. برای یادآوری شما این مقدمات را در انتهای نوش

OpenLayersشروع کردیم و به شما گفتیم OpenLayersمعرفی را از نوشته OpenLayersآموزش

قدرتمند برای نمایش نقشه در وب JavaScriptکتابخانه یک OpenLayersهمان طور که گفتیم، چیست؟

می باشد. در وب GISپیاده سازی قابلیت های و

را داشته باشیم. به عنوان یک کار OpenLayersبه صورت عملی، شروع کار با مینوشته قصد دار نیدر ااینک

در وب سایت نمایش دادیم را این بار Google Map APIاستفاده از ساده، می خواهیم نقشه گوگل که قبال با

...دیبا ما همراه باشنمایش دهیم. OpenLayersاستفاده از با

است. برای مشاهده آموزش های پیشین و دانلود فیلم و WEB GISآکادمی این نوشته از مجموعه آموزش های

PDF آکادمی آن ها، می توانید به صفحهWEB GIS .مراجعه نمایید

را عملی شروع کنید OpenLayersآموزش

OpenLayersکتابخانه ، JavaScript قدرتمند متن باز است که برای نمایش نقشه ها در صفحات Web

ارایه شده است. در این سلسله ۴و 3، 2، ۱های ، در نسخهOpenLayer کتابخانه .مورد استفاده قرار می گیرد

که یکی از پایدارترین 2.۱2از نسخه ارایه می شود، GISPlus سایت که در OpenLayers آموزش نوشته های

.های این کتابخانه قدرتمند است، استفاده خواهیم کرد نسخه

Web GIS آکادمیورود به

http://gisplus.ir/%D8%A2%DA%A9%D8%A7%D8%AF%D9%85%DB%8C+WebGIS




http://gisplus.ir/courses/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-web-gis/




http://www.gisplus.ir/


http://gisplus.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-openlayers-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-openlayers-%D8%AF%D8%B1-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-web-gis/



http://www.gisplus.ir/openlayers

http://gisplus.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%86%d9%82%d8%b4%d9%87-%da%af%d9%88%da%af%d9%84-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/



http://gisplus.ir/?p=21516









۴


آموزش نمایش نقشه در وب سایت

Google Mapاین کار را پیش تر با استفاده از برای قراردادن نقشه در وب سایت، راه های مختلفی وجود دارد.

API ،کتابخانه چگونگی نمایش نقشه در سایت با استفاده از آموزش دادیم. در این آموزشOpenLayers را در

آموزش خواهیم داد. چهار گام

ایجاد صفحه وب

اضافه کردنgoogle map api به صفحه

اضافه کردنOpenLayers

نمایش نقشه گوگل

گام اول: ایجاد صفحه وب

از محیط ،راحی سایتبرای ط باید وب سایتی که مایل به نمایش نقشه در آن هستیم را ایجاد کنیم. ،گامدر اولین

visual studio استفاده می کنیم. برای ایجاد یک سایت جدید از منویfile گزینهnew سپس و web

site .را انتخاب کنید


5


را انتخاب کنید و در ASP.NET empty web siteگزینه اول یعنی ،new web siteدر پنجره

را کلیک کنید. okو در انتها دکمه MyGMapبه طور مثال مسیر .مسیر وب سایت را انتخاب کنید ،قسمت پایین

تا این مرحله، وب سایت ایجاد شد.

پیاده سازی ،یلاین فا درونساده ایجاد کنیم تا کدهای مربوط به نمایش نقشه را htmlاکنون باید یک صفحه

د.را انتخاب نمایی Add new item همانند تصویر زیر عمل کنید و گزینه ،کنیم. برای این کار

6


index.htmlثال و نامی برای فایل انتخاب نمایید. برای م htmlنوع فایل را ،در پنجره ای که باز می شود

Google Map APIگام دوم: اضافه کردن

را به صفحه Google Map APIبرای آن که بتوانید از نقشه گوگل در وب سایت خود استفاده نمایید می بایست

نید.کدریافت API KEYوب اضافه کنید. برای این منظور، ابتدا باید وارد سایت گوگل شوید و یک

Google Mapsرا در گوگل جستجو کنید و لینکی با عنوان Google Map API keyعبارت

JavaScript API کلیک نمایید. لینکرا انتخاب کنید یا بر روی این

هید کرد. در این مشاهده خوا API keyدر صفحه ای که باز می شود، راهنمایی برای معرفی چگونگی استفاده از

را کلیک کنید. get a keyصفحه دکمه

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

ا کلیک ر create and enable APIرا برای آن انتخاب می کنیم و در انتها دکمه MyGMapکنیم و نام

ه خواهید کرد.می کنیم. پس از گذشت زمان کوتاهی، کلید ایجاد شده را مشاهد

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwidz7WPmITYAhXD1xoKHZP9DYYQFggnMAA&url=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2Fget-api-key&usg=AOvVaw2YD6-u09juQT1EY2uMybug

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwidz7WPmITYAhXD1xoKHZP9DYYQFggnMAA&url=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2Fget-api-key&usg=AOvVaw2YD6-u09juQT1EY2uMybug

7


زیر را به فایل Script که قبال ایجاد کردید را باز کنید و HTMLصفحه اکنون باید از این کلید استفاده کنیم.

HTML بعد از تگ <head> اضافه کنید و عبارتYOUR_API_KEY ن را با کلید دریافت شده جایگزی

کنید.

8


<script async defer

src="https://maps.googleapis.com/maps/api/js?key= YOUR_API_KEY &callback=in

itMap"

type="text/javascript"></script>

OpenLayersاضافه کردن گام سوم:

است. برای دانلود ای کتابخانه جاوااسکریپتی وارد سایت OpenLayersکتابخانه گام بعد، اضافه کردن

GitHub به آدرسhttps://github.com/openlayers/ol2/releases شوید. کتابخانه

OpenLayers کنیم. آن استفاده می 2.۱2در نسخه های متفاوتی وجود دارد. ما از نسخه

است javascriptsل کنیم. پوشه شامل یکسری فولدر و فایخارج می zipپس از اتمام دانلود، فایل را از حالت

ابخانه که کت img ،theme و دو فولدر OpenLayers.jsبا نام javascriptsکه ما کامل ترین فایل

می کنیم. pasteا رها نیاز دارد را کپی می کنیم. با کلیک راست بر روی پروژه خود فایل های کپی شده به ان


https://github.com/openlayers/ol2/releases

9


ابتدا فایل جاوا اسکریپتی index.htmlبه صفحه OpenLayersبرای اضافه کردن کتابخانه

OpenLayers.js را انتخاب کرده و در تگhead .برنامه آن را رها می کنیم

۱0


شده و فایل theme/ defaultوارد پوشه OpenLayersهای مربوط به cssبرای اضافه کردن

style.css را انتخاب کرده و در تگhead .آن را رها می کنیم

۱۱


را اضافه OpenLayersو کتابخانه Google Map API، توانستیم OpenLayersتا اینجای آموزش

کنیم.

: نمایش نقشه گوگل چهارمگام

<body>ز تگ برای اضافه کردن کدهای نقشه درون آن، بعد ا container برای نمایش نقشه گوگل، ابتدا یک

اضافه می کنیم.

<div id="map" style="width:100%;height:500px"></div>

mapپت با نام یک فایل جاوا اسکری ،دنبرای اضافه کردن کدهای جاوا اسکریپتی که باعث نمایش نقشه می شو

طبق تصویر زیر ایجاد کنید:

ه مقدارش وجود دارد ک callback پارامتری به نام Google Map APIطور که مشاهده می کنید داخل همان

شد متد به طور کامل فراخوانی Google Mapهنگامی که ،به این معنی است واست initmapبرابر با

initmap اجرا شود. بنابراین باید تابعی با نامinitmap به فایلmap.js .اضافه کنیم

نیم. تدا چند پارامتر را مقدار دهی کبباید ا ،که بتوانیم نقشه گوگل را نمایش دهیم برای این

در ابتدا به معرفی نقشه خود می پردازیم که دو پارامتر ورودی می گیرد.

۱2


mapآن را id ای است که قصد نمایش نقشه گوگل در آن را داریم که قبال id <- Containerپارامتر اول:

قرار دادیم.

استفاده googleپارامتر دوم: معرفی سیستم مختصاتی است که از آن استفاده می کنیم. ما از سیستم مختصات

گوگل است. کد سیستم مختصات 9009۱3یک کد استاندارد برای انواع سیستم مختصات است و EPSGمی کنیم.

تا اینجا، نقشه به صفحه وب معرفی شد.

یه را از نوعالبرای این کار استفاده کرده و نوع layersگام بعدی اضافه کردن الیه گوگل است. از کالس

google نام و تعیین می کنیمgoogle street به آن نسبت می دهیما ر.

نویسیم. کد زیر را میبرای مشاهده الیه گوگل باید آن را به نقشه خود اضافه کنیم. برای این کار

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

که مشخص کننده طول و عرض جغرافیایی است. LonLatپارامتر اول:

پارامتر دوم: مشخص می کنیم که این نقشه در چه سطح بزرگ نمایی به ما نشان داده شود.

نکته:

۱3


یستم مختصات موجود سطول و عرض جغرافیایی را با هر سیستم مختصاتی می توانیم تعیین کنیم ولی باید آن را به

تصات مرکز شهر استفاده می کنیم و مخ ۴326اگر از سیستم مختصاتی با کد نقشه تبدیل کنیم. به طور مثال

( باید آن را تبدیل به سیستم مختصاتی گوگل کنیم.32,5۱اصفهان را به آن می دهیم )

صفحه، فراخوانی Loadاست. تنها کافی است آن را در Webما آماده نمایش بر روی صفحه ()initتا اینجا تابع

کنیم.

صفحه وب باید دو کار انجام دهیم: Loadدر ()initبرای فراخوانی تابع

نسبت می دهیم. ()initرا به تابع ()onloadرویداد -۱

را به صفحه وب خود اضافه کنیم. map.jsفایل -2

۱۴


د اضافه را به پروژه خو OpenLayersیاد گرفتید که چگونه کتابخانه ،OpenLayersتا اینجای آموزش

کنید. پس از اجرای برنامه، نقشه ای به شکل زیر به شما نمایش داده می شود.

آموزش نمایش نقشه گوگل در وب سایت فیلم

نلود نمایید. ما برای نمایش نقشه گوگل در وب سایت را دا OpenLayersبه شما پیشنهاد می کنیم فیلم آموزش

آشنا می کنیم. OpenLayersدر این فیلم، شما را با مراحل نمایش نقشه گوگل در سایت با استفاده از کتابخانه

۱5


سخن پایانی

می بایست مقدماتی را به شرح زیر فراهم آورید: GISراه اندازی وب برای

یا ایجاد پایگاه داده مکانیGeoDatabase و توصیفی در آنو قراردادن نقشه ها و داده های مکانی

با استفاده از یک انتشار نقشه ها در وبWeb Map Server نظیرGeoServer یا

MapServer برنامه نویسی قابلیت های ایجاد یک وب سایت و شروعGIS در وب

OpenLayers به شما آموزش دادیم چگونه یک وب سایت ساده ایجاد کنید و با استفاده از کتابخانهتا این جا،

، امکانات گسترده ای را در اختیار استفاده کنندگان ه های تحت وبنقشنقشه گوگل را در وب سایت نمایش دهید.

به شما یاد می دهیم چگونه OpenLayersدر آموزش های آتی از سلسله نوشته های آموزش قرار می دهند.

شامل تصویر ماهواره ای، نقشه معابر و... را در وب سایت خود نمایش دهید و به مرور Googleانواع نقشه های


http://gisplus.ir/%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%be%d8%a7%db%8c%da%af%d8%a7%d9%87-%d8%af%d8%a7%d8%af%d9%87-%d9%85%da%a9%d8%a7%d9%86%db%8c-%d8%a8%d8%a7-postgresql/

http://gisplus.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-web-gis-%d8%a7%d9%86%d8%aa%d8%b4%d8%a7%d8%b1-%d9%86%d9%82%d8%b4%d9%87-%d9%87%d8%a7-%d8%af%d8%b1-%d9%88%d8%a8/


http://gisplus.ir/%d9%88%d8%a8-%d8%ac%db%8c-%d8%a2%db%8c-%d8%a7%d8%b3-%da%86%db%8c%d8%b3%d8%aa%d8%9f/

http://gisplus.ir/22148-2/%D9%86%D9%85%D8%A7%DB%8C%D8%B4+%D9%86%D9%82%D8%B4%D9%87+%DA%AF%D9%88%DA%AF%D9%84+%D8%A8%D8%A7+%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87+%D8%A7%D8%B2+OpenLayers

۱6


GISآموزش برنامه نویسی وب خواهیم پرداخت و شما به صورت گام به گام Web GISسامانه لیت های یک قاب

را فرا می گیرید.

را پیگیری نمایید، تا از آخرین نوشته ها، آگاه GISPlusاینستاگرام و یا صفحه GISPlusکانال تلگرام می توانید باشید.

)بر روی تصاویر کلیک کنید( پیشنهاد ما برای خواندن


http://gisplus.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%86%d9%85%d8%a7%db%8c%d8%b4-%d9%86%d9%82%d8%b4%d9%87-%da%af%d9%88%da%af%d9%84-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/

http://gisplus.ir/%d9%88%d8%a8-%d8%ac%db%8c-%d8%a2%db%8c-%d8%a7%d8%b3-%da%86%db%8c%d8%b3%d8%aa%d8%9f/


https://telegram.me/gisplus

http://www.instagram.com/gisplus.ir

۱7


تواناسازی جامعه با استفاده از رسالت ما،

سازی و می باشد. همواره آگاهاطالعات مکانی

گسترش دانش استفاده از سامانه های

اطالعات مکانی سرلوحه کار ما قرار دارد. لذا

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

با ما تماس بگیرید. GISزمینه آموزش

مشاوره رایگان

w w w ● G I S P l u s ● i r

http://gisplus.ir/consultation/


http://www.GISPlus.ir

































:هدنسیونgisplus.ir/ebook/openlayer_googlemap_gisplus.ir.pdf · ۴ openlayers زا...

Documents