OpenLayers เป็นเครื่องมือ JavaScript ที่ทรงพลังที่ช่วยให้เราสร้างและแสดงแผนที่ทุกประเภทบนเว็บไซต์ บทความนี้จะแนะนำคุณในการเพิ่มจุดและคุณลักษณะสตริงของเส้น จากนั้นแปลงการฉายภาพเพื่อใช้พิกัด จากนั้นเพิ่มสีด้วยการตั้งค่าสไตล์ของเลเยอร์
โปรดทราบว่าคุณต้องติดตั้งแผนที่ OpenLayers ที่ใช้งานได้ในหน้าเว็บเพื่อติดตามบทความนี้ หากคุณไม่มี โปรดดูวิธีสร้างแผนที่โดยใช้ OpenLayers 3
ขั้นตอน
ส่วนที่ 1 จาก 3: การเพิ่มคุณสมบัติจุดและสตริงบรรทัด
ขั้นตอนที่ 1 สร้างคุณสมบัติจุด
เพียงคัดลอกโค้ดบรรทัดต่อไปนี้ลงใน your
ธาตุ:
var point_feature = ol. Feature ใหม่ ({ });
ขั้นตอนที่ 2 ตั้งค่าเรขาคณิตของจุด
หากต้องการบอก OpenLayers ว่าจะวางจุดใด คุณต้องสร้างรูปทรงเรขาคณิตและกำหนดชุดพิกัดซึ่งเป็นอาร์เรย์ในรูปแบบของ [ลองจิจูด (E-W) ละติจูด (N-S)] รหัสต่อไปนี้สร้างสิ่งนี้และตั้งค่าเป็นเรขาคณิตของจุด:
var point_geom = ใหม่ ol.geom. Point([20, 20]); point_feature.setGeometry(point_geom);
ขั้นตอนที่ 3 สร้างคุณลักษณะสตริงบรรทัด
เส้นสายเป็นเส้นตรงที่แบ่งเป็นส่วนๆ เราสร้างพวกมันเหมือนกับจุด แต่เราให้พิกัดคู่สำหรับแต่ละจุดของสตริงเส้น:
var linestring_feature = ol. Feature ใหม่ ({ เรขาคณิต: ใหม่ ol.geom. LineString (
ขั้นตอนที่ 4 เพิ่มคุณสมบัติให้กับเลเยอร์เวกเตอร์
หากต้องการเพิ่มคุณลักษณะลงในแผนที่ คุณต้องเพิ่มคุณลักษณะลงในแหล่งที่มา ซึ่งคุณเพิ่มลงในเลเยอร์เวกเตอร์ ซึ่งคุณสามารถเพิ่มลงในแผนที่ได้:
var vector_layer = ol.layer. Vector ใหม่ ({ แหล่งที่มา: ol.source. Vector ใหม่ ({ คุณสมบัติ: [point_feature, linestring_feature] }) }) map.addLayer (vector_layer);
ส่วนที่ 2 จาก 3: การเปลี่ยนรูปเรขาคณิตของคุณลักษณะให้ใช้พิกัด
เช่นเดียวกับซอฟต์แวร์การทำแผนที่ที่มีประสิทธิภาพ แผนที่ OpenLayers สามารถมีชั้นต่างๆ ได้พร้อมวิธีการแสดงข้อมูลที่แตกต่างกัน เนื่องจาก Earth เป็นลูกโลกและไม่แบน เมื่อเราพยายามแสดงมันบนแผนที่แบบแฟลตของเรา ซอฟต์แวร์จึงต้องปรับตำแหน่งให้ตรงกับแผนที่แบบเรียบ วิธีต่างๆ เหล่านี้ในการแสดงข้อมูลแผนที่เรียกว่า ประมาณการ. ในการใช้เลเยอร์เวกเตอร์และเลเยอร์ไทล์ร่วมกันในแผนที่เดียวกัน หมายความว่าเราต้องเปลี่ยนเลเยอร์จากการฉายภาพหนึ่งเป็นอีกภาพหนึ่ง
ขั้นตอนที่ 1 ใส่คุณสมบัติลงในอาร์เรย์
เราเริ่มต้นด้วยการรวมคุณสมบัติที่เราต้องการแปลงเป็นอาร์เรย์ที่เราทำซ้ำได้
var features = [point_feature, linestring_feature];
ขั้นตอนที่ 2 เขียนฟังก์ชันการแปลง
ใน OpenLayers เราสามารถใช้ฟังก์ชัน transform() บนออบเจกต์เรขาคณิตของแต่ละฟีเจอร์ได้ วางโค้ดการแปลงนี้เป็นฟังก์ชันที่เราสามารถเรียกได้ในภายหลัง:
ฟังก์ชั่น transform_geometry (องค์ประกอบ) { var current_projection = ol.proj. Projection ใหม่ ({รหัส: "EPSG: 4326"}); var new_projection = tile_layer.getSource().getProjection(); องค์ประกอบ.getGeometry().transform(current_projection, new_projection);); }
ขั้นตอนที่ 3 เรียกใช้ฟังก์ชันการแปลงบนคุณสมบัติ
ตอนนี้เพียงแค่วนซ้ำผ่านอาร์เรย์
features.forEach(transform_geometry);
ส่วนที่ 3 จาก 3: การตั้งค่าสไตล์เลเยอร์เวกเตอร์
ในการเปลี่ยนลักษณะแต่ละจุดบนแผนที่ เราจำเป็นต้องสร้างและใช้สไตล์ รูปแบบสามารถเปลี่ยนสี ขนาด และคุณลักษณะอื่นๆ ของจุดและเส้นได้ และยังสามารถแสดงภาพสำหรับแต่ละจุด ซึ่งสะดวกมากสำหรับแผนที่ที่ปรับแต่งเอง ส่วนนี้ไม่จำเป็น แต่สนุกและมีประโยชน์
ขั้นตอนที่ 1 สร้างการเติมและสโต๊ค
สร้างวัตถุสไตล์การเติมและสีแดงกึ่งโปร่งใส และลักษณะเส้นขีด (เส้น) ที่เป็นเส้นทึบสีแดง:
var fill = new ol.style. Fill({ สี: [180, 0, 0, 0.3] }); var stroke = ol.style. Stroke ใหม่ ({ สี: [180, 0, 0, 1] ความกว้าง: 1 });
ขั้นตอนที่ 2 สร้างสไตล์และนำไปใช้กับเลเยอร์
ออบเจ็กต์สไตล์ OpenLayers ค่อนข้างมีประสิทธิภาพ แต่เราจะตั้งค่าการเติมและจังหวะสำหรับตอนนี้เท่านั้น:
var style = new ol.style. Style({ image: new ol.style. Circle({ เติม: เติม สโตรก: สโตรก รัศมี: 8 }), เติม: เติม, สโตรก: สโตรก }); vector_layer.setStyle(สไตล์);
