OpenLayers یک ابزار جاوا اسکریپت قدرتمند است که ما را قادر می سازد تا انواع نقشه ها را در یک وب سایت ایجاد و نمایش دهیم. این مقاله شما را در افزودن یک نقطه و یک ویژگی رشته خط راهنمایی می کند ، سپس پیش بینی آنها را برای استفاده از مختصات تغییر می دهد ، سپس با تنظیم سبک لایه ، مقداری رنگ اضافه کنید.
لطفاً توجه داشته باشید که برای دنبال کردن این مقاله ، باید یک نقشه OpenLayers فعال در یک صفحه وب نصب کنید. اگر چنین ندارید ، نحوه ایجاد نقشه با استفاده از OpenLayers 3 را ببینید.
مراحل
قسمت 1 از 3: اضافه کردن ویژگی های Point and Line String
مرحله 1. یک ویژگی نقطه ایجاد کنید
کافی است خط کد زیر را در کد خود کپی کنید
عنصر:
var point_feature = ol جدید. ویژگی ({}) ؛
مرحله 2. هندسه نقطه را تنظیم کنید
برای اینکه به OpenLayers بگویید که نقطه را کجا قرار دهید ، باید یک هندسه ایجاد کنید و مجموعه ای از مختصات را به آن بدهید ، که یک آرایه به شکل [طول جغرافیایی (E-W) ، عرض جغرافیایی (N-S)] است. کد زیر این را ایجاد می کند و هندسه نقطه را تنظیم می کند:
var point_geom = ol.geom. Point ([20 ، 20]) ؛ point_feature.setGeometry (point_geom) ؛
مرحله 3. یک ویژگی رشته خط ایجاد کنید
رشته های خطی خطوط مستقیمی هستند که به بخش تقسیم شده اند. ما آنها را درست مانند نقاط ایجاد می کنیم ، اما یک جفت مختصات برای هر نقطه از رشته خط ارائه می دهیم:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
مرحله 4. ویژگی ها را به یک لایه بردار اضافه کنید
برای افزودن ویژگی ها به نقشه ، باید آنها را به یک منبع اضافه کنید ، که آن را به یک لایه بردار اضافه می کنید ، و سپس می توانید آن را به نقشه اضافه کنید:
var vector_layer = ol.layer. Vector ({منبع: ol.source. Vector جدید ({ویژگی ها: [point_feature، linestring_feature]})}}) map.addLayer (vector_layer)؛
قسمت 2 از 3: تغییر هندسه ویژگیها برای استفاده از مختصات
مانند سایر نرم افزارهای نقشه برداری قدرتمند ، نقشه های OpenLayers می توانند لایه های متفاوتی با روش های مختلف نمایش اطلاعات داشته باشند. از آنجا که زمین یک کره زمین است و مسطح نیست ، وقتی سعی می کنیم آن را روی نقشه های مسطح خود نمایش دهیم ، نرم افزار باید مکان ها را برای مطابقت با نقشه مسطح تنظیم کند. این روش های مختلف برای نمایش اطلاعات نقشه نامیده می شود طرح ها به برای استفاده از یک لایه بردار و یک لایه کاشی با هم در یک نقشه به این معنی است که ما باید لایه ها را از یک طرح به دیگری تبدیل کنیم.
مرحله 1. ویژگی ها را در یک آرایه قرار دهید
ما شروع به قرار دادن ویژگی هایی می کنیم که می خواهیم آنها را با هم به یک آرایه تبدیل کنیم که می توانیم از طریق آنها تکرار شویم.
ویژگی های var = [ویژگی_ نقطه ، ویژگی خطی]؛
مرحله 2. تابع تبدیل را بنویسید
در OpenLayers ، می توانیم از تابع transform () در شیء هندسی هر ویژگی استفاده کنیم. این کد تبدیل را در تابعی قرار دهید که بعداً می توانیم آن را فراخوانی کنیم:
تابع transform_geometry (element) {var current_projection = new ol.proj. Projection ({کد: "EPSG: 4326"}) ؛ var new_projection = tile_layer.getSource (). getProjection ()؛ element.getGeometry (). transform (جریان_پروژه ، پروژه جدید)؛)؛ }
مرحله 3. تابع transform را روی ویژگی ها فراخوانی کنید
اکنون به سادگی از طریق آرایه تکرار کنید.
features.forEach (transform_geometry) ؛
قسمت 3 از 3: تنظیم سبک لایه برداری
برای تغییر ظاهر هر ویژگی روی نقشه ، باید یک سبک ایجاد و اعمال کنیم. سبک ها می توانند رنگ ، اندازه و سایر ویژگی های نقاط و خطوط را تغییر دهند و همچنین می توانند تصاویر را برای هر نقطه نمایش دهند ، که برای نقشه های سفارشی بسیار مفید است. این بخش ضروری نیست ، اما سرگرم کننده و مفید است.
مرحله 1. Fill و stoke را ایجاد کنید
یک شیء سبک fill و یک رنگ قرمز نیمه شفاف و یک سبک stroke (line) که یک خط قرمز جامد است ایجاد کنید:
var fill = new ol.style. Fill ({رنگ: [180 ، 0 ، 0 ، 0.3]}) ؛ var stroke = new ol.style. Stroke ({رنگ: [180 ، 0 ، 0 ، 1] ، عرض: 1}) ؛
مرحله 2. سبک را ایجاد کرده و آن را روی لایه اعمال کنید
شیء سبک OpenLayers بسیار قدرتمند است ، اما ما در حال حاضر فقط fill و stroke را تنظیم می کنیم:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill، stroke: stroke، radius: 8})، fill: fill، stroke: stroke})؛ vector_layer.setStyle (سبک) ؛
