یک مسیر شراب بوسنیایی را با Mapbox Optimized Directions ایجاد کنید.

شراب + دوچرخه + جعبه نقشه

من فکر کردم ایجاد یک مسیر شراب دوچرخه در بوسنی یک پروژه جالب خواهد بود. وب سایت رسمی شراب مسیر ، مکان ها را لیست می کند ، اما مسیری ندارد. بسیار کاربر پسند نیست و لایه پایه Mapquest OSM دیگر در دسترس نیست. بنابراین تصمیم گرفتم یک مسیر شراب برای گردشگران و سایر دوستداران شراب ایجاد کنم.

صفحه مسیر شراب بوسنی http://wineroute.ba/fa/posjeti/mapa؟type٪5B٪5D=vinski_podrum

مرحله 1. داده ها را جمع آوری کنید

زمان: 2 ساعت

ما باید مکان های شراب سازی ها را "وام بگیریم". مکان های شراب را نمی توان به سادگی از وب سایت ارائه شده توسط دروپال بارگیری کرد. به نظر می رسد از افزونه OpenLayer استفاده شده است که باعث می شود نگاهی به کد منبع بیندازم. یک روش آسان برای انجام این کار ، فشار دادن Ctrl + U است

مشاهده منبع: http: //wineroute.ba/fa/posjeti/mapa؟ نوع٪ 5B٪ 5D = vinski_podrum

می توانم از تابع جستجوی Ctrl + F برای یافتن "نقطه" استفاده کنم. بعد از هر نقطه ، طول و عرض جغرافیایی تک کارخانه های فرد نمایش داده می شود. در آینده می توان انتظار داشت که بقیه اطلاعات را جمع آوری کنیم ، اما در حال حاضر مکان کافی خواهد بود.

با این روش توانستیم در مدت زمان کوتاه 24 مکان شراب سازی را ثبت کنیم.

دیرینه و طولانی از شراب سازی ها

مرحله 2. کد شروع را دریافت کنید

زمان: 1 ساعت

یک جستجوی سریع در وب سایت Mapbox به نظر می رسد که آنها قبلاً کد مناسب و معقولی دارند تا از نقطه A به B برسند و زیبایی به نظر برسند.

https://www.mapbox.com/help/getting-started-directions-api/

اولین مرحله کپی کردن کد است. من پیشنهاد می کنم اگر می خواهید مسیری را برای خودتان ایجاد کنید ، باید آنچه را که همه کد انجام می دهد و می گوید را بخوانید. از آنجا که ما فقط به دستورالعمل های فعلی احتیاج نداریم ، تصمیم خواهیم گرفت که کدهای نسخه ی نمایشی 2 را کپی کنید. برای این کار کافی است بر روی Demo 2 کلیک راست کنید ، پیوند را در رایانه خود ذخیره کنید و آن را در ویرایشگر متنی مانند Notepad ++ باز کنید.

مرحله 3. موقعیت نقشه را تغییر داده و سبک را تغییر دهید

زمان: 20 دقیقه

در خطوط 28-33 ، من دستورالعملهای مربوط به سبک جعبه نقشه ، موقعیت و سطح زوم را قرار دادم.

var map = Mapboxgl.Map جدید ({کانتینر: 'نقشه' ، // سبک شناسه کانتینر: 'جعبه نقشه: // سبک / مگابایت / خیابان-v9' ، // محل قرارگیری صفحه سبک: [-84،52،39، 12] ، // بزرگنمایی موقعیت شروع: 12 // start zoom})؛

در اینجا ما این مسئله را به منطقه جهان مورد نظر و سطح بزرگنمایی تغییر می دهیم. خوشبختانه وب سایت شراب شراب این کار را برای ما انجام داد.

"اولیه": {"مرکز نقطه": "17.775878873987523 ، 43.32517769487897" ، "بزرگنمایی": "8"}

اگر اکنون به کد خود نگاه کنیم ، اینگونه خواهد بود.

var map = newboxbox.Map ({کانتینر: 'نقشه' ، // سبک شناسه کانتینر: 'جعبه نقشه: // سبک / نقشه باکس / street-v9' ، // محل قرارگیری صفحه سبک: [17.775878873987523 ، 43.32517769487897] ، // بزرگنمایی موقعیت شروع: 8 // شروع بزرگنمایی})؛
کارت خالی غم انگیز است

ما همچنین می توانیم پیش برویم و یک سبک جدید به نقشه اضافه کنیم.

برای سبک جدیدی به نقشه می توانید یکی از عکسهای زیبا را از وب سایت Wine Routes وام بگیرید.

سبک: 'جعبه نقشه: // سبک / نقشه برداری / cjflnjch603hf2roh9yslokw3' ، // محل صفحه شیوه

مرحله 4. مسیر ما را اضافه کنید

زمان: 1 ساعت

بیایید این مسیر را اضافه کنیم. بگذارید اکنون خطوط 39-42 را تحلیل کنیم

var start = [-84.518641 ، 39.134270]؛ var end = [-84.512023 ، 39.102779]؛ var linesRequest = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start [0] + '،' + start [1] + '؛' + end [0] + '،' + end [1] + '؟ geometries = geojson & access_token = '+ mapboxgl.accessToken؛

از این کد ، باید هر کارخانه شراب سازی را به عنوان متغیر اضافه کنیم. ما می توانیم با اضافه کردن آنها به 1 به 1 این کار را انجام دهیم. من شروع و پایان متفاوت را ترک می کنم زیرا ما می خواهیم در یک نقطه از هتل یا جاذبه مهم گردشگری شروع و پایان دهیم.

مرحله بعدی تغییر کد مسیریابی برای اضافه کردن همه شرابخانه ها است.

+ شروع [0] + '،' + شروع [1] + '؛' + پایان [0] + '،' + end [1] +

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

+ Weingut1 [0] + '،' + Weingut1 [1] + '؛' + Weingut2 [0] + '،' + Weingut2 [1] +
هوززا !!

کار کرد! قدم بعدی اضافه کردن 21 کارخانه شراب سازی دیگر است.

به نظر نمی رسد مانند یک مسیر جالب

مرحله 5. کارخانه های شراب سازی را به عنوان نقاط روی نقشه اضافه کنید

زمان: 40 دقیقه

بیایید کارخانه های شراب سازی را نیز به عنوان نقاط روی نقشه اضافه کنیم. اگر به کدی که امتیاز اضافه می کند توجه کنید ، باید اضافه کنیم:

map.addLayer ({id: "شروع" ، نوع: "دایره" ، منبع: {نوع: "Geojson" ، داده ها: {نوع: "ویژگی" ، هندسه: {نوع: "نقطه" ، مختصات: شروع}}} })؛

به نتایجی می رسیم که 23 بار شبیه به این خواهد بود.

map.addLayer ({id: "Weingut1" ، نوع: "Kreis" ، منبع: {نوع: "Geojson" ، داده ها: {نوع: "ویژگی" ، هندسه: {نوع: "Punkt" ، مختصات: Weingut1}} })؛
بسیاری از شراب سازی ها ، فقط یک حباب

مرحله 6. مسیر را بهینه کنید

زمان: 3 ساعت و برخی از کمک های پاتریک نیکلاس در Mapbox!

مسیر بهینه نشده است. برای این کار باید کد مسیریابی را تغییر دهیم. برای کسانی که مراقب نیستند؛ این کد به ما دستورالعمل می دهد.

http://api.mapbox.com/directions/v5/mapbox/cycling/ "" مختصات "؟ Geometries = geojson & access_token = '+ mapboxgl.accessToken؛

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

https://api.mapbox.com/directions/v5/mapbox/cycling/

خواهد شد

https://api.mapbox.com/optimized-trips/v1/mapbox/cycling/

ما می توانیم پایان را حفظ کنیم ، اما می توانیم بعداً با تغییر دادن آنها مطابق در API بهینه سازی ، مسیرها را تغییر دهیم.

؟ geometries = geojson & access_token = '+ mapboxgl.accessToken؛

با تشکر از بینش پاتریک نیکلاس در Mapbox! (اگر برنده شوم ، به شما دوچرخه سواری را از طریق مزارع شراب در جنوب بوسنی و هرزگوین مدیون هستم.)

همچنین باید کد زیر را تغییر دهیم.

var مسیر = data.routes [0] .geometry؛

به

var مسیر = data.trips [0] .geometry؛

در اینجا کد نگار نمونه API آورده شده است

https://codepen.io/jonwit/pen/dmqpRj
# درخواست یک تور دوچرخه بهینه سازی شده با مراحل و پاسخ geojson به حلقه "https://api.mapbox.com/optimized-trips/v1/mapbox/cycling/-122.42،37.78 ؛-122.45،37.91 ؛-122.48،37.73؟steps = true & geometries = geojson & access_token =
نشانه دسترسی شما "

کارت ها را به اشتراک بگذارید

زمان: 30 دقیقه

از آنجا که شراب سازی های زیادی وجود دارد که فقط در یک مسیر شراب جا می گیرند ، من آنها را به یک منطقه شمالی و جنوبی تقسیم کرده ام تا نقشه های زیبایی تری ایجاد کنم. این کار به سادگی با برداشتن شرابخانه ها در متغیر Directions انجام شد. من همچنین مجبور شدم چند شراب شراب را از شراب شراب شمالی حذف کنم تا آنها را به 12 محدود کنم. با تشکر فراوان از Mapbox به خاطر فکر کردن که 12 لیوان شراب در یک تور شراب کافی است! API بهینه سازی فقط 12 مکان را امکان پذیر می کند.

کارخانه های شراب سازی Trebenje

زمان: 30 دقیقه

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

مرحله 7. کد کارت را در سایت وردپرس خود قرار دهید

زمان: 1 ساعت

مرحله آخر نمایش نقشه در وب سایت است. وب سایتی که می خواهم این را در آن قرار دهم ، یک وب سایت وردپرس است. من از چارچوب HTML استفاده خواهم کرد مجبور به استفاده نمونه ای از این کد را می توان در وب سایت Mapbox یافت.