پیشنهاد میکنم اگه به مسأله WebGis و مخصوصا OpenLayers علاقه‌مند هستید حتما کتاب Cookbook OpenLayers رو مطالعه کنین. بسیاری از نرم افزارهای معروف وب جی‌آی‌اس با همین OpenLayers ارتقاء پیدا کردن مثل GeoExplorer یا GeoServer Suite یا ... .
حالا کمی میخوام درباره کدی که دوستمون گذاشتن صحبت کنم تا اگه ابهامی وجود داره رفع بشه. برای شروع کار کد خوب و ساده و قابل فهمی هست. نکته ای که باید قبل از هر چیز بگم اینه که ما در OpenLayers با نرم افزار خاصی سر و کار نداریم ، یعنی محیط کد نویسی ما می تونه یه NotePad باشه ، اما به شخصه از نرم افزار های طراحی وب استفاده میکنم به چند دلیل ؛ اول اینکه : تگ ها رو بصورت رنگی نشون میده و خوانا تر هست ، دوم اینکه : مثلا نرم افزار مثل Web Builder 2014 قادر هست که فانکشن های OpenLayers رو بخونه و بصورت AutoComplet نمایش بده و سوم اینکه : کد نویسی لذت بخش تری رو اونجا تجربه میکنید چراکه بسیاری از دوستورات بصورت اتوماتیک کامل میشن. خب بریم سر اصل مطلب.
در کدی که دوستمون ضمیمه کردن ما در واقع با دو نوع کد طرف هستیم ، بخش ابتدایی و انتهایی اون از کدها HTML تشکیل میشه مربوط به ساخت بیرونی فایل نهائی ماست ، و در بخش میانی با کدهای JavsScript طرف هستیم که تو اون ما فانکشن های مربوط به OpenLayers رو اجرا میکنیم. خب قدم اولین قدم ما این بود که بین تگ head کد زیر رو وارد کردیم :
کد php:
<script type='text/javascript' src='OpenLayers.js'></script>
خب کد بالا باعث میشه تا ما به کتابخانه ی OpenLayers دسترسی داشته باشیم. می ریم سراغ خط بعدی:
کد php:
<script type='text/javascript'>
.
.
.
</scipt>
تگ script به ما این اجازه رو میده که ما کدها جاوااسکریپت رو اونجا بنویسیم.
و اما میریم سراغ کد های اصلی :
ما با دستور var در واقع یک متغییر تعریف کردیم به اسم map .
تمام دستورات رو باید در این فانکشن بنویسید،چون باید این فانکشن رو بعدا مورد استفاده قرار بدین ، اسمش این فانکشن init هست.
کد php:
map = new OpenLayers.Map('map_element', {});
متغیری map رو اینجا مقدار دهی میکنیم. درواقع داریم میگم map یه نقشه ی جدیده که آیدیش برار هست با "map_element" .
کد php:
var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);
خب ، قبل از اینکه تکه کد بالا رو توضیح بدم باید عرض کنم که ما می تونیم به فایلهای مختلفی رو Add کنیم به نقشه.در این کد ما یک لایه رو از روی سرور wms رو اضافه میکنیم به نقشه . خب خط اول باز ما متغیر wms رو تعریف و مقدار دهی کردیم. همونطور که در خط دوم می بینیم اسم لایه ای که قرار نمایش داده بشه OpenLayers wms خواهد بود. آدرس سرور این لایه در خط سوم هست و خط چهارم هم نوع لایه رو مشخص میکنه. ما دونوع لایه داریم ، یکی Basic و یکی Overly .ما اینجا گفتیم که لایه ی اضافه شده از نوع Basic و پایه ای هست.
با این تکه کد ، درواقع ما متغییر wms که حالا حاوی اطلاعات هست رو به نقشه جهت نمایشش اضافه میکنیم.
البته همونطور که عرض کردم روش های دیگه ای هم وجود داره ، مثلا من لایه ی osm که مربوط به نقشه های OpenStreet هست رو اینطور Add میکنم :
کد php:
olmapnik = new OpenLayers.Layer.OSM("OpenStreetMap Mapnik", "http://tile.openstreetmap.org/${z}/${x}/${y}.png",{'displayInLayerSwitcher':false,attribution:"Mahmood Gharibi Joybari"});
map.addLayer(olmapnik);
map.setBaseLayer(olmapnik)
خب ، بگذریم.کد بالا رو فقط جهت آشنایی آوردم و مورد بحث نیست. میریم سراغ ادامه ی کدها مون.
کد php:
if(!map.getCenter()){
map.zoomToMaxExtent();
}
این کد هم به متغییر map که حالا نقشه ی ما توشه دستور میده که تمام نقشه رو نشون بده.
کد php:
+<body onload='init();'>
+<div id='map_element' style='width: 500px; height: 500px;'>
+</div>
+</body>
و بالاخره اینکه ، ما اینجا توی تگ Body فانکشن init رو لود فرامیخونیم. بعد یک div ایجاد میکنیم و آیدی نقشه مون رو بهش میدیم که همونطور که قبلا تعریف کرده بودیم برار هست با map_element ، این id رو ما توضیح دادیم که کجا باید تعریف کرد و یا تغییر داد. در قسمت Style هم که طول و عرض رو مشخص میکنیم.
غرض از اینهمه توضیح روان خوانی کدها بود برای دوستانی که احتمالا مثل چند وقت پیشه من از javaScript و OpenLayers هیچ اطلاعاتی ندارن و فکر میکنن خیلی سخته ، در صورتی که اینطور نیست.. متاسفانه مرجع فارسی خوبی نیست برای رجوع. گفتم شاید این استارتی باشه برای این کار. به سایت OpenLayers.Org سر بزنید و نمونه کارها و سورس هاشو با دقت بررسی کنید. مطمئنا به درد شما میخوره. سوالی اگه بود بپرسین ، اگه بلد بودم جواب میدم
![[تصویر: postbit_reputation.gif]](http://gistech.ir/forum/images/MIBlue2/postbit_reputation.gif)
در پایین هر ارسال استفاده کنید.
