OpenLayers adalah alat JavaScript yang kuat yang memungkinkan kita membuat dan menampilkan semua jenis peta di situs web. Artikel ini akan memandu Anda dalam menambahkan fitur titik dan string garis, kemudian mengubah proyeksinya menggunakan koordinat, lalu menambahkan beberapa warna dengan mengatur gaya layer.
Harap dicatat bahwa Anda harus memiliki peta OpenLayers yang berfungsi terpasang di halaman web untuk mengikuti artikel ini. Jika Anda tidak memilikinya, lihat Cara Membuat Peta Menggunakan OpenLayers 3.
Langkah
Bagian 1 dari 3: Menambahkan Fitur String Titik dan Garis
Langkah 1. Buat fitur titik
Cukup salin baris kode berikut ke dalam Anda
elemen:
var point_feature = new ol. Feature({ });
Langkah 2. Atur geometri titik
Untuk memberi tahu OpenLayers di mana harus meletakkan titik, Anda perlu membuat geometri dan memberikannya satu set koordinat, yang merupakan array dalam bentuk [bujur (E-W), lintang (N-S)]. Kode berikut membuat ini dan mengatur geometri intinya:
var point_geom = new ol.geom. Point([20, 20]); point_feature.setGeometry(point_geom);
Langkah 3. Buat fitur string garis
String garis adalah garis lurus yang dipecah menjadi segmen-segmen. Kami membuatnya seperti titik, tetapi kami menyediakan sepasang koordinat untuk setiap titik dari string garis:
var linestring_feature = new ol. Feature({ geometri: new ol.geom. LineString(
Langkah 4. Tambahkan fitur ke lapisan vektor
Untuk menambahkan fitur ke peta, Anda perlu menambahkannya ke sumber, yang Anda tambahkan ke lapisan vektor, yang kemudian dapat Anda tambahkan ke peta:
var vector_layer = new ol.layer. Vector({ source: new ol.source. Vector({ features: [point_feature, linestring_feature] }) }) map.addLayer(vector_layer);
Bagian 2 dari 3: Mengubah Geometri Fitur untuk Menggunakan Koordinat
Seperti halnya perangkat lunak pemetaan yang kuat, peta OpenLayers dapat memiliki lapisan yang berbeda dengan cara yang berbeda untuk menampilkan informasi. Karena Bumi adalah bola dunia dan tidak datar, ketika kami mencoba menampilkannya di peta datar kami, perangkat lunak harus menyesuaikan lokasi agar sesuai dengan peta datar. Cara berbeda untuk menampilkan informasi peta ini disebut proyeksi. Untuk menggunakan lapisan vektor dan lapisan ubin bersama-sama pada peta yang sama berarti kita harus mengubah lapisan dari satu proyeksi ke proyeksi lainnya.
Langkah 1. Masukkan fitur ke dalam array
Kita mulai dengan menempatkan fitur-fitur yang ingin kita ubah menjadi sebuah array yang dapat kita lewati secara iteratif.
var features = [point_feature, linestring_feature];
Langkah 2. Tulis fungsi transformasi
Di OpenLayers, kita bisa menggunakan fungsi transform() pada objek geometri setiap fitur. Masukkan kode transformasi ini ke dalam fungsi yang dapat kita panggil nanti:
function transform_geometry(element) { var current_projection = new ol.proj. Projection({code: "EPSG:4326"}); var new_projection = tile_layer.getSource().getProjection(); element.getGeometry().transform(current_projection, new_projection);); }
Langkah 3. Panggil fungsi transformasi pada fitur
Sekarang cukup ulangi melalui array.
features.forEach(transform_geometry);
Bagian 3 dari 3: Mengatur Gaya Layer Vektor
Untuk mengubah tampilan setiap fitur pada peta, kita perlu membuat dan menerapkan gaya. Gaya dapat mengubah warna, ukuran, dan atribut titik dan garis lainnya, dan juga dapat menampilkan gambar untuk setiap titik, yang sangat berguna untuk peta yang disesuaikan. Bagian ini tidak perlu, tetapi menyenangkan dan bermanfaat.
Langkah 1. Buat isian dan stoke
Buat objek gaya isian dan warna merah semi-transparan, dan gaya goresan (garis) yang merupakan garis merah solid:
var fill = new ol.style. Fill({ color: [180, 0, 0, 0.3] }); var stroke = new ol.style. Stroke({ warna: [180, 0, 0, 1], lebar: 1 });
Langkah 2. Buat gaya dan terapkan ke layer
Objek gaya OpenLayers cukup kuat, tetapi kita hanya akan mengatur isian dan goresan untuk saat ini:
var style = new ol.style. Style({ image: new ol.style. Circle({ fill: fill, stroke: stroke, radius: 8 }), fill: fill, stroke: stroke }); vector_layer.setStyle(gaya);
