OpenLayers adalah alat JavaScript yang kuat yang membolehkan kita membuat dan memaparkan pelbagai jenis peta di laman web. Artikel ini akan membimbing anda dalam menambahkan ciri titik dan rentetan garis, kemudian mengubah unjuran mereka untuk menggunakan koordinat, kemudian menambahkan sedikit warna dengan menetapkan gaya lapisan.
Harap maklum bahawa anda perlu memasang peta OpenLayers yang berfungsi di halaman web untuk mengikuti artikel ini. Sekiranya anda tidak memilikinya, lihat Cara Membuat Peta Menggunakan OpenLayers 3.
Langkah-langkah
Bahagian 1 dari 3: Menambah Ciri Titik dan Rentetan Garis
Langkah 1. Buat ciri titik
Cukup salin baris kod berikut ke dalam
unsur:
var point_feature = ol. Feature baru ({});
Langkah 2. Tetapkan geometri titik
Untuk memberitahu OpenLayers di mana meletakkan titik, anda perlu membuat geometri dan memberikannya satu set koordinat, yang merupakan susunan dalam bentuk [bujur (E-W), garis lintang (N-S)]. Kod berikut menjadikannya dan menetapkan geometri titik:
var point_geom = ol.geom. Point baru ([20, 20]); point_feature.setGeometry (point_geom);
Langkah 3. Buat ciri rentetan baris
Jalur tali adalah garis lurus yang dipecah menjadi segmen. Kami membuatnya seperti titik, tetapi kami menyediakan sepasang koordinat untuk setiap titik rentetan garis:
var linestring_feature = ol. Feature baru ({geometri: new ol.geom. LineString (
Langkah 4. Tambahkan ciri ke lapisan vektor
Untuk menambahkan ciri ke peta, anda perlu menambahkannya ke sumber, yang anda tambahkan ke lapisan vektor, yang kemudian anda dapat tambahkan ke peta:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}}) map.addLayer (vector_layer);
Bahagian 2 dari 3: Mengubah Geometri Ciri untuk Menggunakan Koordinat
Seperti mana-mana perisian pemetaan yang kuat, peta OpenLayers dapat memiliki lapisan yang berlainan dengan cara menampilkan maklumat yang berbeza. Kerana Bumi adalah dunia dan tidak rata, ketika kita mencoba memaparkannya di peta rata, perisian harus menyesuaikan lokasi agar sesuai dengan peta rata. Kaedah yang berbeza untuk memaparkan maklumat peta dipanggil unjuran. Untuk menggunakan lapisan vektor dan lapisan jubin bersama pada peta yang sama bermaksud kita harus mengubah lapisan dari satu unjuran ke yang lain.
Langkah 1. Masukkan ciri ke dalam larik
Kita mulakan dengan meletakkan ciri-ciri yang ingin kita ubah menjadi array yang dapat kita ulangi.
ciri var = [point_feature, linestring_feature];
Langkah 2. Tuliskan fungsi transform
Di OpenLayers, kita dapat menggunakan fungsi transform () pada objek geometri setiap ciri. Letakkan kod transform ini menjadi fungsi yang boleh kita panggil kemudian:
fungsi transform_geometry (elemen) {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 transform pada ciri
Sekarang lakukan lelaran sahaja.
ciri.forEach (transform_geometry);
Bahagian 3 dari 3: Menetapkan Gaya Lapisan Vektor
Untuk mengubah penampilan setiap ciri di peta, kita perlu membuat dan menerapkan gaya. Gaya boleh mengubah warna, ukuran, dan atribut titik dan garis lain, dan mereka juga dapat menampilkan gambar untuk setiap titik, yang sangat berguna untuk peta yang disesuaikan. Bahagian ini tidak perlu, tetapi menyenangkan dan berguna.
Langkah 1. Buat isi dan masukkan
Buat objek gaya pengisian dan warna merah separa telus, dan gaya guratan (garis) yang merupakan garis merah padat:
var fill = ol.style baru. Isi ({color: [180, 0, 0, 0.3]}); var stroke = ol.style baru. Stroke ({warna: [180, 0, 0, 1], lebar: 1});
Langkah 2. Buat gaya dan terapkan ke lapisan
Objek gaya OpenLayers cukup kuat, tetapi kami hanya akan mengatur pengisian dan coretan buat masa ini:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), isi: isi, stroke: stroke}); vector_layer.setStyle (gaya);
