وب جی ای اس (Web GIS )در عمل : HTML5 و عنصر بوم برای نقشه برداری آنلاین تعاملی

HTML5 به عنوان نسخه اصلی بعدی HTML (زبان نشانه گذاری فرامتن)، زبان نشانه گذاری اصلی شبکه جهانی وب در حال توسعه است. هدف آن کاهش نیاز به فناوری های اختصاصی و مبتنی بر پلاگین برنامه های کاربردی اینترنت غنی (RIA) مانند Adobe Flash است. عنصر بوم بخشی از HTML5 است و برای ترسیم گرافیک با استفاده از اسکریپت (مثلاً جاوا اسکریپت) استفاده می شود. این مقاله Cartagen را معرفی می‌کند، یک چارچوب منبع باز، مبتنی بر برداری، و چارچوب سمت مشتری برای ارائه نقشه‌های تعاملی بدون پلاگین، با قابلیت آفلاین در HTML5 بومی در طیف گسترده‌ای از مرورگرهای وب و تلفن‌های همراه. Cartagen در گروه طراحی محیط زیست MIT Media Lab توسعه داده شد. کاربردهای بالقوه این فناوری به عنوان یک توانمند برای نقشه برداری آنلاین مشارکتی شامل نقشه برداری از آلودگی هوا در زمان واقعی، گزارش دهی شهروندان، و پاسخ به بلایا و بسیاری از امکانات دیگر است.

HTML5 به عنوان نسخه اصلی بعدی HTML (زبان نشانه گذاری فرامتن)، زبان نشانه گذاری اصلی شبکه جهانی وب در حال توسعه است [ 1 ، 2 ]. هدف آن کاهش نیاز به فناوری های اختصاصی برنامه های کاربردی اینترنت غنی مبتنی بر پلاگین (RIA) مانند Adobe Flash، Microsoft Silverlight [ 3 ] و Oracle-Sun JavaFX [ 4 ] است. به عنوان مثال، یوتیوب در حال برنامه ریزی یک نسخه HTML5 از سرویس خود است که به Adobe Flash متکی نیست، بلکه در عوض از HTML5 برای پخش ویدیوها در مرورگرهای وب استفاده می کند [ 5 ]. به طور مشابه، اپل پشتیبانی از فلش را در دستگاه iPad خود [ 6 ] به نفع HTML5 حذف کرده است .

عنصر بوم بخشی از HTML5 [ 7 ] است و برای ترسیم گرافیک با استفاده از اسکریپت (به عنوان مثال، جاوا اسکریپت) استفاده می شود. ابتدا توسط اپل برای استفاده در داشبورد Mac OS X و مرورگر سافاری معرفی شد، سپس در مرورگرهای مبتنی بر Gecko، مانند Mozilla Firefox، در Opera [8]، و همچنین در Google Chrome (Chrome در اطراف ساخته شده است) پیاده‌سازی شد. همان موتور WebKit مورد استفاده در سافاری). مایکروسافت اینترنت اکسپلورر نسخه‌های 7 و 8 هنوز از عنصر بوم خارج از جعبه پشتیبانی نمی‌کنند، اما Google Chrome Frame [ 9 ]، یک افزونه رایگان برای اینترنت اکسپلورر، می‌تواند برای ارائه صفحات وب که از HTML5 و عنصر بوم استفاده می‌کنند استفاده شود. داخل اینترنت اکسپلورر

برخی از نسخه‌های نمایشی HTML5 در [ 10 ] در دسترس هستند ، از جمله یک نسخه ی نمایشی مکان جغرافیایی HTML5 که بر روی Apple iPhone OS 3، و همچنین در Firefox 3.5 (و جدیدتر) اجرا می‌شود. فایرفاکس اکنون از W3C (کنسرسیوم وب جهانی) Geolocation API بدون نیاز به نصب هیچ پلاگین مکان پشتیبانی می کند. ابتدا از کاربر می پرسد که آیا کاربر می خواهد موقعیت مکانی خود را به اشتراک بگذارد. در صورت موافقت کاربر، اطلاعات مربوط به نقاط دسترسی بی سیم نزدیک و آدرس IP کامپیوتر کاربر (پروتکل اینترنت) را جمع آوری می کند و سپس این اطلاعات را برای ارائه تخمینی از موقعیت مکانی کاربر به ارائه دهنده خدمات موقعیت مکانی پیش فرض، Google Location Services می فرستد. آن تخمین مکان در نهایت با صفحه وب درخواست کننده به اشتراک گذاشته می شود، که به نوبه خود مکان کاربر را با استفاده از نقشه های گوگل نشان می دهد [ 11 ، 12 ].

HTML5 و عنصر بوم پتانسیل جدی در بسیاری از برنامه های کاربردی مفید دارند [ 13 ]، اما بقیه این مقاله فقط بر روی Cartagen [ 14 ] تمرکز می کند، یک چارچوب مبتنی بر برداری و سمت مشتری برای ارائه نقشه ها در HTML5 بومی، و پتانسیل آن. برنامه های کاربردی.

همانطور که داده های نقشه غنی تر می شوند و ما در تلاش برای ارائه داده های چند لایه در انواع پیش بینی ها و سطوح بزرگنمایی نقشه هستیم، تکنیک های سنتی نقشه برداری وب شروع به غیرقابل انعطاف شدن می کنند. اکثر نقشه های وب فعلی از یک سیستم تولید کننده کاشی سمت سرور و سیستم کش استفاده می کنند، که در آن نقشه مورد نظر زودتر از موعد ارائه می شود و بسته به درخواست کاربر از سرور در مقیاس های مختلف به کاشی های تصویر بریده می شود. در حالی که این برای یک مجموعه داده منفرد، به عنوان مثال، خطوط زمین، به خوبی کار می کند، با اضافه شدن داده های بیشتر، نقشه به بالشتکی از نقاط ناخوانا تبدیل می شود (شکل 1 را ببینید – تصویری از صفحه [ 15]]) تا زمانی که یک سطح بزرگنمایی جدید توسط کاربر انتخاب شده و در سرور ارائه شود. با استفاده از تکنیک‌های جدیدی که با پشتیبانی گسترده مرورگر برای HTML5 و به‌ویژه عنصر بوم امکان‌پذیر شده است، اکنون می‌توانیم نقشه‌هایی ایجاد کنیم که از قبل رندر نشده‌اند، اما در لحظه تولید می‌شوند. این ما را از یک طرح، سطح بزرگنمایی یا نمایش (که به ازای هر درخواست سرور واکشی می‌شود) آزاد می‌کند و یک سبک کارتوگرافی پویا، تعاملی و روایی‌تر را امکان‌پذیر می‌کند. داده های برداری گسسته (متشکل از نقاط، خطوط و مناطق) را می توان یک بار دانلود کرد و در هر مقیاس و با هر سبکی نمایش داد. افزایش اخیر در سرعت اجرای جاوا اسکریپت [ 16] نرخ فریم نسبتاً بالایی را ممکن می کند (~ 15 فریم در ثانیه) در یک نوت بوک معمولی، نیاز به افزونه های مرورگر مانند Flash یا جاوا را برطرف می کند و نقشه برداری پویا HTML5 را حتی در دستگاه های تلفن همراه مانند iPhone قابل دسترسی می کند. ، اندروید (سیستم عامل تلفن همراه با استفاده از نسخه اصلاح شده هسته لینوکس [ 17 ])، و پلتفرم های Windows Mobile [ 18 ].

به جای ارسال کاشی های از پیش رندر شده برای هر سطح بزرگنمایی، Cartagen نقشه ها را به صورت پویا در سمت مشتری ترسیم می کند. این بدان معناست که نقشه‌ها می‌توانند حرکت، تطبیق و ترسیم مجدد کنند، و می‌توانند به تعداد لایه‌های داده/سطوح جزئیات که لازم است را شامل شوند. نقشه برداری برداری در HTML5 بومی انجام می شود که روی آیفون (شکل 2 ) و پلتفرم های اندروید اجرا می شود و به طور کلی از پهنای باند و منابع پردازش مشتری کمتری استفاده می کند.

مزایای رندر محلی

اکثر نقشه‌های فعلی درون مرورگر (OpenLayers/TileCache [ 19 ]، Google Maps) از یک سرور قدرتمند استفاده می‌کنند که کاشی‌های شطرنجی 256 × 256 پیکسل را در PNG (گرافیک شبکه قابل حمل)، JPG (فرمت تصویر گروه متخصصان عکاسی مشترک) یا GIF ( فرمت های تبادل گرافیکی) که با یک سیستم کش سریع جفت شده اند تا این کاشی ها را به یک نمایشگر مرورگر جاوا اسکریپت یا فلش ارائه کنند (شکل 3 )). کاربران می‌توانند نقشه را مانند روی یک تکه کاغذ مجازی غول‌پیکر بکشند یا بلغزانند، که در زبان عامیانه به آن نقشه «لغزنده» می‌گویند. این از لزوم تصمیم گیری در مورد یک سبک نقشه رنج می برد، زیرا کاشی ها را نمی توان در زمان واقعی بدون نوعی خوشه سرور یا سیستم ابری تولید کرد. علاوه بر این، کاشی‌ها، پس از ارائه و ارسال به مرورگر، قابل تغییر نیستند – اکثر نقشه‌های وب فعلی را از این نظر «ایستا» می‌کند.

در این مقاله ما در مورد استفاده از Cartagen، یک چارچوب نگاشت برداری منبع باز که در گروه طراحی محیط زیست آزمایشگاه MIT Media Lab توسعه یافته است [ 20 ] بحث می کنیم. از آنجایی که نقشه را در هر فریم روی صفحه می‌کشد (در سمت کلاینت – شکل 3 )، برای تولید کاشی‌های نقشه به یک سرور متکی نیست، و همچنین به یک سبک نمایشی واحد (یا سطوح زوم ارائه‌شده توسط سرور) وابسته نیست. چندین مجموعه داده نقشه می توانند به طور همزمان نمایش داده شوند و ویژگی های نقشه می توانند دارای سبک های پویا باشند، مانند ظاهر متفاوت در شناور، کلیک و سایر رویدادهای کاربر. نقشه‌ها را می‌توان به‌صورت پویا برچسب‌گذاری کرد، به‌جای گام‌ها به آرامی مقیاس‌بندی کرد و به‌طور کلی به‌صورت بصری به دلخواه دستکاری کرد. این باعث می‌شود که کارتاژن یک رابط نقشه بسیار غنی‌تر و انعطاف‌پذیرتر از آنچه کاربران – و طراحان – تا به حال به آن محدود شده‌اند، تبدیل کند.

Cartagen در جاوا اسکریپت نوشته شده است و از عنصر بوم جدید برای بارگذاری داده های نقشه برداری از منابع مختلف، از جمله OpenStreetMap (OSM) استفاده می کند [ 21 ]. API کامل (Application Programming Interface) و مستندات Cartagen را می توان در [ 22 ] یافت.

GSS و داده های برداری

با توانایی جدید ما برای تغییر نحوه نمایش نقشه، نیاز به ابزاری برای بیان سبک های نقشه وجود دارد، و Cartagen به عنوان الهام بخش خود از یک سبک شناخته شده در وب استفاده می کند: CSS یا Cascading Style Sheets. در Cartagem، نقشه‌ها با شیوه نامه جغرافیایی (GSS)، یک مشخصات شیوه نامه آبشاری برای اطلاعات مکانی است که از CSS برای دسترسی بیشتر به سبک نقشه استفاده می‌کند. GSS همچنین یک زبان برنامه نویسی است که Cartagen را به یک چارچوب ایده آل برای نقشه برداری داده های پویا تبدیل می کند. (استفاده از نحو شبیه CSS برای استایل دادن به نقشه ها برای اولین بار توسط Cascadenik میکال میگورسکی [ 23] نشان داده شد.]، که اسناد سبک Mapnik را بر اساس یک قالب ورودی شبیه به CSS ایجاد کرد که نوشتن با دست بسیار آسان‌تر بود. پس از انتشار Cartagen، رندر OpenStreetMap Potlatch شروع به استفاده از نحو مشابهی به نام MapCSS کرد [ 24 ].

کسانی که با تقسیم بندی سبک محتوا بین HTML و CSS آشنا هستند، تمایز مشابهی بین قالب داده نقشه Cartagen (OSM-JSON یا OpenStreetMap-JavaScript Object Notation [25] ) و زبان سبک آن، شیوه نامه جغرافیایی، یا GSS پیدا خواهند کرد.

GSS یک راه ساده برای مرتبط کردن سبک‌های نقشه مانند عرض خط، رنگ پر کردن، اندازه فونت و خانواده، و مجموعه وسیعی از عوامل زیبایی‌شناختی با عناصر نقشه خاص یا معمولاً با برچسب‌هایی مانند «پارک» یا «بزرگراه» است. یک سبک ساده GSS ممکن است به شکل زیر باشد:

پارک: {

strokeStyle: “سبز”،

عرض خط: 3،

}

این نشان دهنده هر ویژگی با برچسب “پارک” با حاشیه سبز 3 پیکسل است. همانطور که در اینجا نشان خواهیم داد GSS بسیار فراتر از رنگ های ساده است.

Cartagen برای دانلود در [ 26 ] موجود است . دانلود استاندارد (“cartagen-client-0.6.2.zip” – نام فایل نسخه فعلی در زمان نوشتن) شامل یک صفحه وب “index.html” است که نقشه روی آن نمایش داده می شود و یک “cartagen.js” فایل (240 کیلوبایت) در دایرکتوری ‘cartagen’ که شامل تمام کدهای چارچوب است. همچنین حاوی داده‌های نمونه قابل توجهی از نقشه (از OpenStreetMap؛ ‘CC By SA’– مجوز Creative Commons Attribution-Share Alike) برای شهر رم است که اگر فایل ‘index.html’ را در فایرفاکس، سافاری باز کنید، بارگیری می‌شود. کروم یا اپرا (اگر از ویندوز یا لینوکس استفاده می کنید، ممکن است مجبور شوید فایل فشرده را قبل از باز کردن هر یک از محتویات آن در مرورگر باز کنید؛ نمی توانید Cartagen را از داخل خود فایل فشرده اجرا کنید.)

Cartagen داده‌های نقشه را در (در میان فرمت‌های دیگر) نشانه‌گذاری شی جاوا اسکریپت یا JSON [ 25 ]، یک استاندارد رایج برای داده‌های ساخت‌یافته که شبیه به XML (زبان نشانه‌گذاری توسعه‌یافته) است، می‌خواند. فایل‌های JSON که معمولاً با پسوند فایل «json.» قابل شناسایی هستند، بوسیله مرورگرهای مدرن دارای جاوا اسکریپت قابل تجزیه هستند و بیشتر از XML برای انسان قابل خواندن هستند. یک ویژگی نقشه ساده ممکن است به صورت زیر نمایش داده شود:

{“osm”:

{“node”:

[

{“lat”:”42.3608″,

“lon”:”-71.08768″،

“قابل مشاهده”:”درست”،

“نمایش”: درست است،

“img”:”image-url.png”

}،

{“lat”:”42.3608″,

“lon”:”-71.08768″،

“قابل مشاهده”:”درست”،

“نمایش”: درست است،

“img”:”image-url.png”

}

]

}

}

Cartagen از مدل داده‌های OpenStreetMap (OSM) گره‌ها، راه‌ها و روابط پیروی می‌کند و این «OSM-JSON» ترجمه‌ای کاملاً تحت اللفظی از قالب داده‌های XML OpenStreetMap است. (OSM-JSON چندین مزیت مهم نسبت به استاندارد GeoJSON نشان می دهد [ 27]؛ با ارتباط گره ها و راه ها توسط مرجع، چند ضلعی هایی که گره های زیادی را به اشتراک می گذارند، مانند مرزهای مشترک بین دو کشور، نیازی به تعاریف گره اضافی ندارند. در عوض آنها به سادگی مجموعه ای از گره های مشترک را با شناسه گره خود ارجاع می دهند. علاوه بر این، OSM-JSON، مانند OSM-XML، می‌تواند از یک پایگاه داده با حداقل منابع ارائه شود، زیرا ساختار پایگاه داده را بسیار نزدیک منعکس می‌کند و اساساً مجموعه چند ضلعی را روی مشتری بارگذاری می‌کند.) ما به زودی یاد خواهیم گرفت که چگونه شما را دستکاری و ایجاد کنید. مجموعه داده های خود را، اما برای شروع، اجازه دهید برخی از داده ها را از مجموعه داده OpenStreetMap بگیریم.

در یک پنجره مرورگر جدید، صفحه اصلی اصلی Cartagen [ 14 ] را باز کنید، هر نام مکانی را در کادر “Go Somewhere” تایپ کنید، به عنوان مثال، “Shanghai”، و Go را فشار دهید. شما باید بارگذاری مکان مورد نظر را ببینید و اگر مقدار معقولی از داده ها در دسترس باشد، نقشه ای در حین مشاهده ترسیم می شود. برای دانلود این داده‌ها، «دانلود داده» را در گوشه سمت چپ پایین صفحه فشار دهید، و از شما خواسته می‌شود یک منطقه را انتخاب کنید. مگر اینکه کامپیوتر بسیار قدرتمندی داشته باشید، فقط یک منطقه کوچک (مثلاً چند کیلومتر عرض) را انتخاب کنید.

پنجره ای با مختصات کران انتخاب شما ظاهر می شود (شکل 4 ). این مختصات را در قالب ارائه شده کپی کنید. ما در یک لحظه به آنها نیاز خواهیم داشت. داده ها همچنین بلافاصله در فایلی به نام ‘map.json’ در پشت پنجره مرورگر فعلی دانلود می شوند. به پوشه “دانلودها” خود بروید و آن فایل را به پوشه “cartagen-client-0.6.2” که قبلا دانلود کردیم منتقل کنید.

اکنون فایل «index.html» را در یک ویرایشگر متن باز کنید، مانند TextMate در مک، Notepad++ در ویندوز، یا Emacs یا Vim در لینوکس. (کاربران مک ممکن است در مشاهده کد خام با TextEdit مشکل داشته باشند، و کاربران ویندوز ممکن است با بازگرداندن حمل در Notepad مشکل داشته باشند. یک ویرایشگر متن حرفه ای ترجیح داده می شود.) چند خط پایین تر، کد راه اندازی زیر را خواهید دید که مقدار اولیه را تنظیم می کند. محیط کارتاژن:

<script type=”text/javascript” charset=”utf-8″>

Cartagen.setup({

شیوه نامه: “samples/rome/style.gss”،

static_map: true

static_map_layers: [

“samples/rome/park.js”،

“samples/rome/rail.js”،

“samples/rome/waterway.js”،

“samples/rome/primary.js”،

“samples/rome/secondary.js”،

“samples/rom/building.js”،

“samples/rome/area.js”،

//”more.json”

]،

لات: 41.891،

lng: 12.4902

})

</script>

ادامه دهید و خطوط static_map_layers را حذف کنید، و به جای آنها، یک static_map_layer به نام ‘map.json’ اضافه کنید – با فرض اینکه فایل را به درستی در پوشه اصلی Cartagen قرار داده اید، در داده های جدیدی که ما دانلود کردیم بارگیری می شود. شما باید با:

<script type=”text/javascript” charset=”utf-8″>

Cartagen.setup({

شیوه نامه: “samples/rome/style.gss”،

static_map: true

static_map_layers: [

“map.json”

]،

لات: 41.891،

lng: 12.4902

})

</script>

در مرحله بعد، دو خط آخر تنظیمات را پیدا کنید و «lat» و «lng» (طول و عرض جغرافیایی) را مشخص کنید. آنها را با کدی که قبلاً هنگام بارگیری داده های جدید کپی کرده بودیم جایگزین کنید (شکل 4 )، به طوری که ممکن است به چیزی شبیه به این برسیم (کد جدید با حروف برجسته-مورب):

<script type=”text/javascript” charset=”utf-8″>

Cartagen.setup({

شیوه نامه: “samples/rome/style.gss”،

static_map: true

static_map_layers: [

“map.json”

]

لات: 31.236372025076946

lng: 121.47323055641542

زوم_سطح: 1.24

})

</script>

در مثال بالا، ما یک قطعه را دانلود کردیم که حول بخش‌هایی از جاده نانجینگ و جاده جیوجیانگ، شانگهای، چین متمرکز شده بود، بنابراین این کد اکنون تضمین می‌کند که نقشه به جای مجموعه داده پیش‌فرض Rome، بر روی آن انتخاب متمرکز شده است، و zoom_level که استفاده می‌کردیم نیز حفظ شده است. صفحه “index.html” را در مرورگر خود بارگیری مجدد کنید، و باید ناحیه ای را که انتخاب کرده اید ببینید. (اگر این کار را نمی کنید، مطمئن شوید که تمام کاماها، براکت ها و سایر قالب بندی ها را حفظ کرده اید.) این نقشه کاملاً محلی است. هیچ تماسی با سرورهای کاشی دور برقرار نمی کند و اگر از اینترنت قطع شود، همچنان کار می کند. این فایل ها را روی سرور قرار دهید و بدون سرور کاشی یا سیستم کش، نقشه خود را خواهید داشت.

حالا اجازه دهید از شر هر چیز دیگری که نمی خواهیم خلاص شویم، مانند روکش بزرگ کارتاژن با آرم و موارد دیگر. تنها چیزی که واقعاً در صفحه نیاز داریم، خطوط زیر در داخل تگ‌های <head> است:

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>

<script src=”cartagen/cartagen.js” type=”text/javascript” charset=”utf-8″></script>

<script type=”text/javascript” charset=”utf-8″>

Cartagen.setup({

// کد راه اندازی شما اینجاست

})

</script>

و فقط یک خط در تگ های <body>:

<canvas id=”canvas”></canvas>

طراحی نقشه با GSS

اکنون ما آماده ایم که ظاهر نقشه را با استایل شیت خود تغییر دهیم. اجازه دهید با نگاهی به کد Cartagen.setup() که قبلاً داشتیم شروع کنیم. همان خط اول مشخص می کند که از چه شیوه نامه ای برای این داده ها استفاده شود: ‘stylesheet: “samples/rome/style.gss”‘. برای استفاده از فایل خودمان، کافیست یک فایل جدید به نام “somefilename.gss” در دایرکتوری ریشه Cartagen ایجاد کنیم و خط Cartagen.setup() را تغییر دهیم تا به stylesheet جدید ما اشاره کند. در ” somefilename.gss “، اجازه دهید با سبک های اصلی شروع کنیم:

بدن: {

الگو: “samples/rom/images/brown-paper.jpg”،

}،

مسیر: {

strokeStyle: “#222″،

عرض خط: 3،

}،

اینها رنگ‌های پس‌زمینه و سبک پیش‌فرض را برای هر «راه» یا خطی تعریف می‌کنند. شما باید یک رنگ پس زمینه کاغذ قهوه ای با خطوط خاکستری تیره ریز روی آن ببینید (شکل 5a ). توجه داشته باشید که ما از کدهای رنگی هگزا دسیمال (“#222”) درست مانند CSS استفاده می کنیم، اگرچه می توانیم از کلماتی مانند “سبز” یا “rgba(0.1،1،0.8،0.4)” برای RGB کامل (قرمز سبز آبی) استفاده کنیم. رنگ با یک کانال آلفا (A) اضافی.

سپس اجازه دهید یک سبک جدید برای ویژگی های نقشه با برچسب “ساختمان” اضافه کنیم:

ساختمان: {

fillStyle: “#444″،

کدورت: 0.4،

}

در اینجا یک سبک پیچیده تر است (شکل 5b ):

بزرگراه: {

strokeStyle: “سفید”،

عرض خط: 6،

عرض طرح: 3،

رنگ طرح: “سبز”،

رنگ قلم: “#333″،

fontBackground: “سفید”،

fontScale: “ثابت”،

text: function() {

بازگشت this.tags.get(‘name’)

}

}

فهرست کاملی از سبک های ممکن در [ 28 ] موجود است.

افزودن داده های جدید

نمایش خیابان ها و پارک ها کافی نیست. ما باید بتوانیم داده های خود را نمایش دهیم. برای انجام این کار، می توانیم Nodes و Ways خود را اضافه کنیم. (اصطلاحات OSM که Cartagen از آن پیروی می کند، به ترتیب به جای «نقاط» و «چند ضلعی» رایج تر، از Nodes و Ways استفاده می کند.) اجازه دهید مجموعه ای از نقاط را با نمادهای سفارشی اضافه کنیم. ابتدا یک فایل در دایرکتوری ریشه Cartagen به نام ‘mine.json’ ایجاد می کنیم. بیایید بگوییم که ما چهار مکان جغرافیایی داریم و می خواهیم هر کدام را با یک نماد منحصر به فرد علامت گذاری کنیم. در «mine.json»، می‌توانیم آنها را در قالب زیر اضافه کنیم:

{“osm”:

{“node”:

[

{“lat”:”42.3608″,

“lon”:”-71.08768″،

“قابل مشاهده”:”درست”،

“نمایش”: درست است،

“img”:”image-url.png”

}،

{“lat”:”42.3608″,

“lon”:”-71.08768″،

“قابل مشاهده”:”درست”،

“نمایش”: درست است،

“img”:”image-url.png”

}

]

}

}

برای آسان‌تر کردن یافتن طول و عرض جغرافیایی مکان‌هایمان، سرویسی در [ 29 ] وجود دارد که اگر آدرسی مانند ’31 Maple Ave, Cambridge, Massachusetts’ را تایپ کنید، یک عبارت OSM-JSON با فرمت مناسب را برمی‌گرداند. (شکل 6 ).

برای افزودن یک چند ضلعی، باید مجموعه‌ای از گره‌ها را ایجاد کنیم، و سپس به آنها در یک ویژگی «way» ارجاع دهیم. Cartagen به دنبال هر یک از گره های تشکیل دهنده راه می شود و آنها را به یک چند ضلعی متصل می کند. این امر کمی پیچیده به نظر می رسد:

{“osm”:

{“node”:

[

{“lon”: “12.5103451”،

“id”: “339420390”,

“lat”: “41.8569274”}،

{“lon”: “12.5106756”,

“id”: “339420395”,

“lat”: “41.8569569”}،

{“lon”: “12.5107474”,

“id”: “339420398”,

“lat”: “41.8565097”}،

{“lon”: “12.5104169”,

“id”: “339420392”,

“lat”: “41.8564803”}

]،

“مسیر”:

[

{“visible”: “درست”،

“nd”:

[

{“ref”: “339420390”}،

{“ref”: “339420395”}،

{“ref”: “339420398”}،

{“ref”: “339420392”}،

]،

“برچسب”:

[

{“v”: “Fosse Ardeatine”، “k”: “name”}،

{“v”: “کاتولیک”، “ک”: “مذهب”}،

]

]

}

}

چند ضلعی فوق یک ساختمان در رم را نشان می دهد و از مجموعه داده OpenStreetMap گرفته شده است. برای آسان‌تر کردن کارها، نسخه بعدی Cartagen دارای یک ابزار گرافیکی ترسیم چند ضلعی خواهد بود که یک نمایش OSM-JSON از هر چیزی که کاربر می‌تواند ترسیم کند را برمی‌گرداند. پشتیبانی از سایر فرمت های داده مانند GeoJSON نیز در حال انجام است.

اگر کسی بتواند جاوا اسکریپت بنویسد، می تواند به صورت دوره ای موقعیت این نقاط داده را به روز کند. آنها اشیاء بومی جاوا اسکریپت هستند. یک نمونه نقشه پیشرفته‌تر ایجاد شده با Cartagen در [ 30 ] (شکل 7 ) موجود است ، که در آن داستان‌های خبری که هر دقیقه از Google News واکشی می‌شوند، بر روی یک نقشه تعاملی از جهان ترسیم می‌شوند، جایی که کاربر می‌تواند اخبار را بر اساس موضوع یا منطقه کاوش کند.

تکنیک های پیشرفته: منوهای زمینه و اسکریپت نویسی

اجازه دهید برخی از ویژگی‌های پیشرفته‌تر را امتحان کنیم، از جمله منوهای متنی کلیک راست. Cartagen دارای پشتیبانی داخلی برای منوهای زمینه است (شکل 8 ). برای افزودن یکی به یک ویژگی خاص، باید سبک GSS مناسب را اصلاح کنیم:

ساختمان: {

fillStyle: “#444″،

text: function() { return this.tags.get(‘name’) },

شناور: {

fillStyle: ‘#222’

}،

منو: {

“نام را به من نشان بده”: function() {

هشدار(this.tags.get(‘name’)

}،

“کد را به من نشان بده”: function() {

window.open(“” + this.tags.get(‘name’), “_blank”) https://en.wikipedia.org/wiki/Special:Search?go=Go&search=

}

}

}،

ما در اینجا چند کار انجام داده ایم. ابتدا، اجازه دهید به ویژگی “text” نگاه کنیم، جایی که به جای کمی متن مانند “Building”، “function() { return this.tags.get(‘name’) }” را نوشته ایم. این یک تابع ساده جاوا اسکریپت است که “this.tags.get(‘name’)” را برمی گرداند. کلمه کلیدی ‘this’ در اینجا برای دسترسی به ویژگی نقشه در حال نمایش استفاده می شود. سپس به تگ های آن ویژگی نگاه می کنیم و برچسبی به نام «نام» را دریافت می کنیم. نتیجه نهایی این است که تمام ویژگی های نقشه که با عنوان “ساختمان” برچسب گذاری شده اند با نام خود برچسب گذاری می شوند. تعدادی ویژگی در شی «this» وجود دارد، مانند «this.area» که ناحیه x، y چند ضلعی را به دست می‌دهد (در صورت وجود)، «this.author» – نام کاربری OpenStreetMap را که این ویژگی را ایجاد کرده است، به دست می‌دهد. ‘this.lat’، ‘this.

توجه داشته باشید که ما همین کار را با یکی از آیتم های منو پایین تر انجام داده ایم. دو آیتم منو وجود دارد، یکی به نام “Show me the name” و دیگری “Show me the code”. اگر کاربر روی ساختمان کلیک راست کرده و آنها را انتخاب کند، هر کدام یک هشدار استاندارد جاوا اسکریپت ظاهر می شوند. اولی باید آشنا باشد. فقط نام ساختمان را نمایش می دهد (با فرض اینکه یک نام داشته باشد)، با استفاده از همان نحو به عنوان ویژگی “text”.

مورد دوم منو کمی جالب تر است. در واقع نام ساختمان را می گیرد و یک جستجوی ویکی پدیا برای آن نام در یک پنجره مرورگر جدید ایجاد می کند (شکل 8 ). اگر نامی وجود نداشته باشد، “null” را جستجو می کند یا ناموفق است، بنابراین تا حدودی کد شلخته است، اما همچنان به خواننده مزه نوع اسکریپت نویسی را که می توان با Cartagen به دست آورد، و انواع داده های موجود را می دهد. به توسعه دهندگان در نقشه در مقابل، نقشه‌های مبتنی بر کاشی معمولاً هیچ ابرداده‌ای بر اساس هر ویژگی ندارند، و هیچ وسیله‌ای برای مرتبط کردن ابرداده با ویژگی‌های خاص ندارند.

Cartagen شاید اولین چارچوب جامع نقشه برداری پویا در نوع خود باشد که از HTML5 و عنصر بوم برای نقشه برداری آنلاین تعاملی بدون پلاگین و آفلاین استفاده می کند. اخیراً، Google اولین نسخه کاملاً مبتنی بر HTML5 خود از Google Maps را بر روی Palm Pre (یک گوشی هوشمند چندرسانه‌ای دارای سیستم عامل مبتنی بر لینوکس) نمایش داد [ 31 ]. توانایی ساخت برنامه هایی که به صورت بومی در مرورگر اجرا می شوند بدون نیاز به افزونه به سازمان هایی مانند پلیس، دولت و خدمات بهداشتی اجازه می دهد تا داده هایی را که در حال حاضر به دلیل قوانین نصب افزونه ها و نرم افزارها محدود شده اند مشاهده کنند. شبکه های. همچنین این آژانس‌ها را قادر می‌سازد تا از فناوری‌های اختصاصی یک فروشنده از Adobe (Flash)، مایکروسافت (Silverlight) و دیگران اجتناب کنند [ 32]. همچنین بر اساس گزارش‌ها، چنین فناوری‌هایی در مقایسه با محتوای خالص HTML5، منابع پردازشی بیشتری را مصرف می‌کنند که منجر به کاهش قابل توجه باتری در گوشی‌های هوشمند و سایر دستگاه‌های تلفن همراه می‌شود.

از نظر عملکرد، JSON [ 25 ] سریعتر و کارآمدتر از GML (زبان نشانه گذاری جغرافیایی، یک دستور زبان XML است که توسط کنسرسیوم فضایی باز (OGC) برای بیان ویژگی های جغرافیایی [33] تعریف شده است، گزارش شده است [ 34 ] . (Cartagen از OSM-JSON استفاده می کند که قرار است حتی کارآمدتر از GeoJSON [ 27 ] باشد.) علاوه بر این، در مقایسه با نقشه های SVG (گرافیک برداری مقیاس پذیر) [ 35 ]، به نظر می رسد بوم با تعداد زیادی از اشیاء رندر شده بهتر مقابله می کند [ 36 ] ]. تست‌های عملکرد بوم اضافی در [ 37] موجود است]. انتظار می رود عملکرد با گذشت زمان بیشتر بهبود یابد، زیرا مشخصات HTML5 نهایی می شود و پیاده سازی مرورگر وب آن کاملاً بهینه و بالغ می شود (اگرچه راه پیش رو ممکن است چندان هموار نباشد [38، 39 ] ) .

پتانسیل کاربردی نقشه های HTML5

جریان داده های زنده و نقشه برداری مشارکتی در دسترس توسط توده ها

Cartagen می تواند نقشه هایی را نمایش دهد که بر اساس جریان داده های زنده تغییر می کنند. برای مثال، Cartagen می‌تواند داده‌های OpenStreetMap را به‌طور زنده نشان دهد که به موجب آن بینندگان ویرایش‌ها را در زمان واقعی، بدون بار رندر روی سرور مشاهده می‌کنند. کاربران این امکان را دارند که نقشه‌های خود را ایجاد کنند – نه فقط پین‌ها و همپوشانی‌ها، بلکه نقشه‌های کاملاً طراحی‌شده که داده‌های غنی و پویا را در خود جای داده و داستان‌های منحصربه‌فردی را روایت می‌کنند. به جای یک نقشه متعارف واحد برای همه، افراد و جوامع اکنون می توانند به راحتی نقشه های محلی و شخصی را ایجاد کنند. این امر به ویژه در عصر امروز نقشه برداری مشارکتی GIS (سیستم های اطلاعات جغرافیایی) و وب اجتماعی (“Web 2.0”) اهمیت دارد.

Cartagen به طور بالقوه می تواند با استفاده از نقشه برداری و جستجوی پیام کوتاه (سرویس پیام کوتاه) به عاملی برای مشارکت جامعه تبدیل شود. رمزگذاری جغرافیایی مبتنی بر رشته (به عنوان مثال، ‘نقشه باگالپور، هند’) به کاربران اجازه می دهد تا نقشه های خود را در میدان فقط با یک تلفن همراه اولیه تولید کنند. این می تواند مشارکت بیش از چهار میلیارد کاربر تلفن همراه در سراسر جهان و همچنین مناطق روستایی خارج از دسترسی کابلی و اینترنت مبتنی بر تلفن ثابت را افزایش دهد (پیامک حتی برای گزارش یک حادثه قابل نقشه برداری نیازی به اتصال اینترنت تلفن همراه ندارد). نقشه برداری جغرافیایی با پیام های متنی در گزارش حوادث توسط شهروندان، در واکنش به بلایا، و در بسیاری از سناریوهای بهداشتی و مراقبت های بهداشتی کاربرد دارد (به تصویر [ 40 ] مراجعه کنید ).

نگاشت داده های کسب و کار در لایه پس زمینه Virtual Globe

ظهور سیستم‌های نرم‌افزاری Virtual Globe مانند Google Earth، Microsoft Virtual Earth و NASA World Wind، روش سنتی استفاده از اطلاعات مکانی را متحول کرده است و به‌جای استفاده از افراد بسیار ماهر، اطلاعات جغرافیایی جهانی را به راحتی در دسترس عموم قرار داده و به راحتی قابل استفاده است. کارشناسان حوزه [ 41]. محبوبیت گسترده این سیستم‌های نرم‌افزاری Virtual Globe در جوامع جغرافیایی و عمومی، راه‌های بیشتری را برای کاوش و استفاده از آنها در جنبه‌های مختلف زندگی روزمره باز کرده است. یکی از سناریوهای بالقوه در زمینه این مقاله، ترکیب قدرت رندر پویا HTML5 با نقشه‌ها و تصاویر پس‌زمینه با کیفیت بالا و وضوح بالا است که توسط Virtual Globes ارائه شده است. بنابراین کاربران می توانند داده های عملیاتی خود را بر روی لایه پس زمینه Virtual Globe در زمینه کسب و کار خود قرار دهند و تجربه شهودی تری برای تفسیر داده ها داشته باشند. سبک کارتوگرافی پویا، تعاملی و روایی فعال شده توسط HTML5 برای نمایش داده های برداری پویا و سبک مناسب است، در حالی که فناوری Virtual Globe برای هضم اطلاعات مبتنی بر وب مناسب است. اطلاعات جغرافیایی در مقیاس بزرگ و تصاویر شطرنجی. بنابراین، فناوری‌های HTML5 و Virtual Globe می‌توانند مکمل یکدیگر باشند و داده‌های مکانی جامعی را که پویا یا ایستا هستند و تجربیات غنی‌تری را برای کاربران فراهم می‌کنند.

تحلیل فضایی بر اساس داده های دینامیکی

تمرکز اصلی استفاده از HTML5 در زمینه این مقاله، نقشه برداری پویا کارتوگرافی است. چنین توابع تجسمی را می توان با توابع تحلیل فضایی مرسوم ترکیب کرد، بنابراین به کاربران اجازه می دهد تا فرآیندهای علم زمین را بررسی کنند. به عنوان مثال، یک تابع تجزیه و تحلیل بافر جغرافیایی می تواند هنگام ارزیابی تأثیر خطر سیل استفاده شود، و سپس نتیجه تجزیه و تحلیل را می توان در حین پرواز مشاهده کرد. ادغام توابع تجزیه و تحلیل داده ها مستلزم افشای توابع تحلیل فضایی مرسوم در وب است. یک پارادایم سرویس گرا می تواند به کار گرفته شود، که در آن توابع تجزیه و تحلیل جغرافیایی سیلد سنتی به عنوان خدمات وب با رابط ها و پروتکل های قابل تعامل در معرض نمایش قرار می گیرند. در حوزه جغرافیایی، در حال حاضر استانداردی وجود دارد که بر روی پردازش جغرافیایی از طریق وب تمرکز می‌کند، یعنی مشخصات OGC Web Processing Service (WPS) [42 ]. خدمات ژئوپردازش متقابل مبتنی بر استانداردها، مقدار زیادی از عملکردهای تجزیه و تحلیل جغرافیایی را به راحتی در دسترس کاربران قرار می دهد، دقیقاً مانند منابع محلی آنها، و امکان تجزیه و تحلیل plug-and-play داده های جغرافیایی را فراهم می کند. داده‌های برداری که در Cartagen تجسم شده‌اند، می‌توانند برای تجزیه و تحلیل بر اساس تقاضا به خدمات ژئوپردازش ارسال شوند و سپس نتایج به Cartagen برگردانده شوند تا روی داده‌های موجود لایه‌بندی شوند. معرفی توابع تجزیه و تحلیل جغرافیایی و فن آوری های وب سرویس به طور قابل توجهی اهداف نقشه برداری اولیه Cartagen را گسترش داده و گسترش می دهد و آن را در رسیدگی به نیازهای تحلیلی کاربران فرانت اند قدرتمندتر و مقیاس پذیرتر می کند.

در این مقاله، ما انواع ویژگی‌های تعاملی نقشه کارتاژن HTML5 را نشان داده‌ایم که تحقق آنها با استفاده از سیستم‌های نقشه‌برداری آنلاین مبتنی بر کاشی غیرممکن یا بسیار پیچیده‌تر بود: رویدادهای شناور و کلیک برای هر ویژگی، تعاریف سبک هر ویژگی، آفلاین تولید تصاویر نقشه وب، و دسترسی کامل به هندسه نقشه و ابرداده ویژگی ها از طریق کلمه کلیدی “این”. علاوه بر این، استفاده از تگ های نقشه از طریق قرارداد CSS ‘class’ ابزاری انعطاف پذیر و به راحتی قابل ویرایش برای نوشتن سبک های جدید و تولید نقشه های جدید ارائه می دهد. در نهایت، محیط های نقشه پویا و قابل نوشتن مانند Cartagen/GSS نحوه درک و استفاده از نقشه ها را تغییر خواهند داد. به جای صرفا خواندن نقشه ها، کاربران بیشتر و بیشتری تشویق می شوند تا با اطلاعات جغرافیایی تعامل داشته باشند، آنها را تغییر دهند و دوباره ترکیب کنند. همه اینها بدون نیاز به هیچ پلاگین ویژه مرورگر برای مشاهده یا اشتراک گذاری ساخته های آنها، که در محیط هایی که محدودیت هایی برای نصب پلاگین ها و نرم افزارهای شبکه وجود دارد، از اهمیت حیاتی برخوردار است. ما Cartagen را به عنوان اولین گام به سوی چنین رسانه نقشه برداری HTML5 مشارکتی برای ارتباط می بینیم.