ایجاد و افزودن نقشه به وب سایت
این مقاله نحوه‌ی افزودن نقشه به وب سایت در مرحله‌ی طراحی وب سایت با استفاده از کتابخانه‌ی OpenLayers را آموزش می‌دهیم و در مقاله های بعدی در مورد نمایش طول و عرض جغرافیایی و … مطالبی را منتشر می‌کنیم.
در OpenLayers نقشه مجموعه‌ای از لایه‌هاست.برای تولید و نمایش نقشه در صفحات HTML به یک عنصر اچ تی ام ال (مثل یک عنصر div) برای نمایش نقشه نیاز داریم که با استفاده از سی اس اس می‌توان ابعاد و دیگر خصوصیات ظاهری آن را شخصی سازی کنیم و سپس با استفاده از کدهای جاوا اسکریپت نقشه را در آن نمایش دهیم.
کدهای html مورد نیاز برای نمایش نقشه در وب سایت
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="map-container"></div>
<script src="./main.js"></script>
</body>
</html>
با توجه به کدهای سی اس اس عنصر div تمامی صفحه را می پوشاند.با استفاده از id عنصر div نقشه در محتوی این عنصر نمایش داده خواهد شد.
کدهای جاوا اسکریپت مورد نیاز برای افزودن نقشه به وب سایت
کدهای جاوا اسکریپ زیر را در فایلی به نام main.js در کنار فایل HTML قرار دهید.
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
new Map({
target: 'map-container',
layers: [
new TileLayer({
source: new XYZSource({
url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
در تکه کد بالا ماژول های مورد نیاز را با استفاده از دستور import از پکیج ol به فایل جاوا اسکریپت اضافه کردیم. در خط اول استایل مورد نیاز به نمایش نقشه را اضافه کردیم.قدم بعدی برای ایجاد و نمایش نقشه در مرحله‌ی طراحی سایت ایجاد یک نمونه از کلاس Map می‌باشد برای نمایش صحیح نقشه باید برخی از خصوصیات آن نیز تنظیم شود.
- خاصیت target نمونه‌ی ایجاد شده از کلاس Map با آی‌دی عنصر نگه دارنده‌ی نقشه مقدار دهی شود.
- برای آن که نقشه به صورت tile لود شده و نمایش داده شود خاصیت layers آن با یک نمونه‌ی ایجاد شده از کلاس TileLayers مقدار دهی می‌شود و منبع نقشه نیز با استفاده از خاصیت source این کلاس مشخص می‌شود که خودش یک کلاس می‌باشد در این نمونه منبع نقشه را XYZSource انتخاب کرده‌ایم.
- و در آخر نوبت به مقدار دهی خاصیت view می‌رسد.برای مقدار دهی این مقدار باید یک نمونه از کلاس View ایجاد کرده و خاصیت های center و zoom آن را مقدار دهی کنیم.
حال اگر parcel را نصب کرده باشید اگر فرمان parcel index.html درا در ترمینال در مسیر پروژه اجرا کنید می توانید نتیجه را در آدرس http://locallhost:1234 در مرورگر خودتون مشاهده نمائید.برای کسب اطلاعات بیشتر از نحوه‌ی راه اندازی و نمایش نقشه های OpenLayers در وب سایت به اینجا مراجعه نمائید.
فایلها index.html , main.js را از لینک زیر دانلود نمائید