اعلانات انجمن


موضوع بسته شده است 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
شروع کار با openlayers
نویسنده پیام
mousavi آفلاین
مدیر انجمن
*****

ارسال‌ها: 463
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 140
ارسال: #1
شروع کار با openlayers
با سلام خدمت دوستان

در این تاپیک به شروع کار با Openlayers میپردازیم . برای آشنایی با Openlayers به مبحث معرفی Openlayers در حوزه وب جی آی اس مرجعه نمایید.

1- دانلود openlayers : برای دانلود Openlayers میتوانید به وبسایت رسمی http://openlayers.org/ مراجعه کرده و آنرا دانلود کنید( دانلود آخرین نسخه در این تاریخ )

2- فایل zip را در یکی از درایو ها unzip کنید .در حال حاضر ما به دو پوشه themes،img و فایل Openlayers.js نیاز داریم . بنابراین آنها را کپی کرده و در یک مسیر جداگانه مثلا ( C:\code) کپی کنید . دایرکتوری اصلی شما برای انجام کار ها همین دایرکتوری خواهد بود .
3- یک فایل به نام index.html در همین دایرکتوری ایجاد کنید ( منظور در پوشه code است).
4- کد موجود در فایل پیوستی در Index.html وارد کنید . برای این کار میتوانید از برنامه های مختلفی مثل++ Notepadاستفاده کنید . اینحانب به شخصه با Jetbrains webstorm راحت تر هستم . شما IDE خود را میتوانید با توجه به تجربه خود انتخاب کنید . برای راحتی کار میتوانید فایل پیوستی را با فرمت html و نام index ذخیره کنید و از محیط های IDE اسفاده نکنید)
5- تبریک میگم شما اولین وب جی آی اس را با استفاده از openlayers ساختید . شما میتوانید از همین کد به عنوان پایه برای کار های دیگر در Openlayers استفاده کنید .


فایل‌(های) پیوست شده
.txt  code.txt (اندازه: 619 bytes / تعداد دفعات دریافت: 75)
(آخرین ویرایش در این ارسال: ۲۵-۵-۱۳۹۲ ۱۱:۵۴ عصر، توسط mousavi.)
۲۵-۵-۱۳۹۲ ۰۱:۵۳ عصر
یافتن تمامی ارسال‌های این کاربر
 اعتبار داده شده توسط : ادمین(+1)
behdad آفلاین
کاربر عادی
*

ارسال‌ها: 42
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 30
ارسال: #2
RE: شروع کار با openlayers
با تشکر از مطلب خوبتون.چرا openlayers رو دانلود کردیم؟به نرم افزار اشاره نکردین باید نصب بشه؟نقش اون فایل چی بود دانلود کردیم؟
با سپاس
۲۷-۵-۱۳۹۲ ۱۰:۱۸ عصر
یافتن تمامی ارسال‌های این کاربر
mousavi آفلاین
مدیر انجمن
*****

ارسال‌ها: 463
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 140
ارسال: #3
RE: شروع کار با openlayers
با سلام


برای اجرای openlayers نیاز به اجرای نرم افزار به صورت فایل EXE نیست . در واقعا فایل های اجرایی همان فایل هایی هستند که شما در فایل zip مشاهده میکنید . در این فایل ها کد های لازم برای بالا آمدن و اجرای سرویس ها و همچنین control ها از جمله zoom in و zoom out و edit و ... وجود دارد . شما برای customize به این control ها نیاز به دارید .
۲۷-۵-۱۳۹۲ ۱۰:۴۳ عصر
یافتن تمامی ارسال‌های این کاربر
 اعتبار داده شده توسط : behdad(+1)
mahmoodgh آفلاین
کاربر عادی
*

ارسال‌ها: 25
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 22
ارسال: #4
RE: شروع کار با openlayers
پیشنهاد می‌کنم اگه به مسأله 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 به ما این اجازه رو میده که ما کدها جاوااسکریپت رو اونجا بنویسیم.
و اما میریم سراغ کد های اصلی :
کد php:
var map
ما با دستور var در واقع یک متغییر تعریف کردیم به اسم map .
کد php:
function init() {
.
.

تمام دستورات رو باید در این فانکشن بنویسید،چون باید این فانکشن رو بعدا مورد استفاده قرار بدین ، اسمش این فانکشن 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 و پایه ای هست.
کد php:
map.addLayer(wms); 
با این تکه کد ، درواقع ما متغییر 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 سر بزنید و نمونه کارها و سورس هاشو با دقت بررسی کنید. مطمئنا به درد شما میخوره. سوالی اگه بود بپرسین ، اگه بلد بودم جواب میدم تصویر: images/smilies/heart.gif
 
(آخرین ویرایش در این ارسال: ۱۷-۷-۱۳۹۲ ۰۱:۳۱ صبح، توسط mahmoodgh.)
۱۷-۷-۱۳۹۲ ۰۱:۱۹ صبح
یافتن تمامی ارسال‌های این کاربر
 اعتبار داده شده توسط : mousavi(+1) ، ادمین(+2) ، علوی(+1)
علوی آنلاین
ناظر انجمن
******

ارسال‌ها: 495
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 246
ارسال: #5
RE: شروع کار با openlayers
[attachment=78 نوشته شده توسط: 'mahmoodgh' pid='233' dateline='1381268988'"]
پیشنهاد می‌کنم اگه به مسأله WebGis و مخصوصا OpenLayers علاقه‌مند هستید حتما کتاب Cookbook OpenLayers  رو مطالعه کنین. بسیاری از نرم افزارهای معروف وب جی‌آی‌اس با همین OpenLayers ارتقاء پیدا کردن مثل GeoExplorer یا GeoServer Suite یا ... .
.
.
.

 

مطلب خیلی خوبی بود جناب غریبی
چون بحث از OpenLayers شد گفتم بد نیست این نکته رو هم من اضافه کنم
کتابخانه ای هست به اسم GeoExt که از ترکیب دو کتابخانه Openlayers و ExtJS درست شده. OpenLayers که به خوبی در مطالب بالا معرفی شده، ExtJS را هم میشود به نوعی شکل پیشرفته تر و با امکانات بیشتر کتابخانه جی کوئری (jQuery) در نظر گرفت.
جی کوئری کتابخانه ای است که هر برنامه نویس حرفه ای جاوااسکریپت آن را می شناسد و در بسیاری از پروژه های وب نیز از آن استفاده می شود. به طوری که به قطع می توان گفت محبوبترین و رایج ترین کتابخانه جاوااسکریپت است. ExtJS همه امکانات جی کوئری را در اختیار قرار می دهد به علاوه امکانات بسیار دیگری مخصوصا در حوزه نمایش زیباتر صفخات وب
حال ترکیب OpenLayers و ExtJS به چه معناست؟
به طور مثال فرض کنید کاربر برروی عارضه ای کلیک کرده و می خواهد اطلاعات توصیفی آن را ببیند. OpenLayers با امکانات نمایشی محدود خود این اطلاعات را در یک قالب ساده و به شکل زیر عرضه می کند
 [تصویر:  attachment.php?aid=78]

اما GeoExt که از کتابخانه ExtJS بهره می برد می تواند اطلاعات را در شکل زیبای زیر به کاربر ارائه کند (این مثال وب سایت GeoExt است که البته همچنان قابلیت بهبود بیشتری دارد)
 [تصویر:  attachment.php?aid=79]
 
البته همچنان GeoExt برکتابخانه OpenLayers متکی بوده و –در آینده نیز- خواهد بود. پس دانستن OpenLayers برای استفاده از GeoExt الزامی است.
 


فایل‌(های) پیوست شده بندانگشتی (ها)
       

دو اصل اساسی انجمن:
1- احترام به یکدیگر
2- درصورت نقل مطلب، ذکر منبع و لینک به اصل مطلب

برای تقدیر و تشکر از دکمه [تصویر:  postbit_reputation.gif] در پایین هر ارسال استفاده کنید.
(آخرین ویرایش در این ارسال: ۱۸-۷-۱۳۹۲ ۱۰:۳۶ صبح، توسط علوی.)
۱۸-۷-۱۳۹۲ ۱۰:۳۳ صبح
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
mousavi آفلاین
مدیر انجمن
*****

ارسال‌ها: 463
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 140
ارسال: #6
RE: شروع کار با openlayers
بسیار عالی بود . لازم شد وارد جزییاتش بشیم 

ممنونم 

نظرات و پیشنهادات شما یاری رسان ما و دوستانتان خواهد بود
 
۱۸-۷-۱۳۹۲ ۱۲:۳۷ عصر
یافتن تمامی ارسال‌های این کاربر
mousavi آفلاین
مدیر انجمن
*****

ارسال‌ها: 463
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 140
ارسال: #7
RE: شروع کار با openlayers
سلام دوستان
من برای  معرفی سرویس wfs  arcgis serverبه openlayers سوالی داشتم. اگر دوستان نمونه ای از کد آن را در این بخش قرار دهند ممنون میشم . در واقع در قسمت openlayers.protocol.wfs، لینک wfs را معرفی میکنم .اما در معرفی دیگر گزینه ها مثل featuretype و featureNS و... مشکل دارم .بدون این گزینه ها لایه نشان داده نمیشود. 
​متشکرم

نظرات و پیشنهادات شما یاری رسان ما و دوستانتان خواهد بود
 
۲۰-۷-۱۳۹۲ ۱۲:۳۲ صبح
یافتن تمامی ارسال‌های این کاربر
mahmoodgh آفلاین
کاربر عادی
*

ارسال‌ها: 25
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 22
ارسال: #8
RE: شروع کار با openlayers
ولله دقیق متوجه نشدم که مشکل شما در چیه ، اما یک نمونه کد میذارم و اندک توضیحی درمورد اون دو موردی که نام بردین میدم :
کد php:
new OpenLayers.Layer.Vector("States", {
                
minScale15000000,
                
strategies: [new OpenLayers.Strategy.BBOX()],
                
protocol: new OpenLayers.Protocol.WFS({
                    
url"http://demo.opengeo.org/geoserver/wfs",
                    
featureType"states",
                    
featureNS"http://www.openplans.org/topp"
                
}),
                
renderersrenderer
            
}) 
خب ، به عکسی که پیوست این پست کردم نگاه کنید ، همونطور که میبینید ما در قسمت WorkSpace دو عدد فیلد داریم به نام Name و NameSpace URI ، خب پس FeatureType ما برار میشه با Name و FeatureNS برار میشه با NameSpaceURI که میتونید در صورت دسترسی به سرور اون رو ویرایش کنید. البته اطلاعات بنده در این مورد بخصوص کامل نیست. ضمنا اگه کد نویسی خاصی انجام دادین و مشکل دادین ، بهتر بخشی از کدتون رو که فکر میکنین مشکل داره رو بزارین تا روش حرف بزنیم.تصویر: images/smilies/shy.gif
 

     

 

 
(آخرین ویرایش در این ارسال: ۲۰-۷-۱۳۹۲ ۰۲:۴۸ عصر، توسط mahmoodgh.)
۲۰-۷-۱۳۹۲ ۰۲:۴۷ عصر
یافتن تمامی ارسال‌های این کاربر
 اعتبار داده شده توسط : علوی(+1)
علوی آنلاین
ناظر انجمن
******

ارسال‌ها: 495
تاریخ عضویت: مرد ۱۳۹۲
اعتبار: 246
ارسال: #9
RE: شروع کار با openlayers
این سوال رو بهتر بود در یک تاپیک جداگانه مطرح می کردید.
چون عنوان این تاپیک "شروع کار با OpenLayers" گذاشته شده، بهتره مطالب مقدماتی و آموزش اصولی OpenLayers در اون گذاشته باشه.
به هر حال اگه هنوز هم مشکل ادامه داشت بهتره یک موضوع جدید باز کنید.

دو اصل اساسی انجمن:
1- احترام به یکدیگر
2- درصورت نقل مطلب، ذکر منبع و لینک به اصل مطلب

برای تقدیر و تشکر از دکمه [تصویر:  postbit_reputation.gif] در پایین هر ارسال استفاده کنید.
۲۰-۷-۱۳۹۲ ۰۵:۲۳ عصر
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
Bowman_ir آفلاین
کاربر عادی
*

ارسال‌ها: 6
تاریخ عضویت: دي ۱۳۹۲
اعتبار: 1
ارسال: #10
RE: شروع کار با openlayers
سلام بر دوستان...
من تا به امروز از ASPMAP برای نمایش نقشه استفاده میکردم.
این کنترل برای بارگذاری اطلاعات و نمایش نقشه به صورت مستقیم روی دیتابیس Query میزنه و دیتا رو لود میکنه.
و اینکه خیلی کاراش سمت سروره.
حالا میخوام از OpenLayer در WebApp استفاده کنم...
فقط اینکه میخوام بدونم روش لود کردن نقشه برای این API به چه شکلیه؟؟؟
غیر از فرمت های فایل نقشه...
روشهایی که میشه داده ها رو از دیتابیس برای اون بارگذاری کرد...
با یه نمونه یا مثال اگه برام توضیح بدید ممنون میشم دوستان عزیز.
 
(آخرین ویرایش در این ارسال: ۱۰-۱۰-۱۳۹۲ ۱۲:۳۳ عصر، توسط Bowman_ir.)
۱۰-۱۰-۱۳۹۲ ۱۲:۱۲ عصر
یافتن تمامی ارسال‌های این کاربر
موضوع بسته شده است 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان