OpenLayers, bir web sitesinde her türlü haritayı oluşturmamızı ve görüntülememizi sağlayan güçlü bir JavaScript aracıdır. Bu makale, bir nokta ve bir çizgi dizisi özelliği eklemede size rehberlik edecek, ardından koordinatları kullanmak için projeksiyonlarını dönüştürecek, ardından katmanın stilini ayarlayarak biraz renk katacak.
Bu makaleyi takip etmek için bir web sayfasında çalışan bir OpenLayers haritasının kurulu olması gerektiğini lütfen unutmayın. Eğer yoksa, OpenLayers 3 Kullanarak Harita Nasıl Yapılır bölümüne bakın.
adımlar
Bölüm 1/3: Nokta ve Çizgi Dizisi Özellikleri Ekleme
Adım 1. Bir nokta özelliği oluşturun
Aşağıdaki kod satırını bilgisayarınıza kopyalamanız yeterlidir.
eleman:
var point_feature = new ol. Feature({ });
Adım 2. Noktanın geometrisini ayarlayın
OpenLayers'a noktayı nereye yerleştireceğini söylemek için bir geometri oluşturmanız ve ona [boylam (D-W), enlem (N-S)] biçiminde bir dizi olan bir dizi koordinat vermeniz gerekir. Aşağıdaki kod bunu oluşturur ve noktanın geometrisini ayarlar:
var point_geom = new ol.geom. Point([20, 20]); point_feature.setGeometry(point_geom);
Adım 3. Bir satır dizisi özelliği oluşturun
Çizgi dizileri, parçalara ayrılmış düz çizgilerdir. Onları tıpkı noktalar gibi yaratırız, ancak çizgi dizisinin her noktası için bir çift koordinat sağlarız:
var linestring_feature = new ol. Feature({ geometri: yeni ol.geom. LineString(
Adım 4. Özellikleri bir vektör katmanına ekleyin
Özellikleri haritaya eklemek için, bunları bir vektör katmanına ekleyeceğiniz bir kaynağa eklemeniz gerekir, daha sonra haritaya ekleyebilirsiniz:
var vector_layer = new ol.layer. Vector({ kaynak: yeni ol.source. Vector({ özellikler: [point_feature, linestring_feature] }) }) map.addLayer(vector_layer);
Bölüm 2/3: Unsurların Geometrilerini Koordinatları Kullanacak Şekilde Dönüştürme
Herhangi bir güçlü haritalama yazılımında olduğu gibi, OpenLayers haritaları, farklı bilgi görüntüleme yöntemlerine sahip farklı katmanlara sahip olabilir. Dünya bir küre olduğundan ve düz olmadığından, onu düz haritalarımızda görüntülemeye çalıştığımızda, yazılımın konumları düz haritaya uyacak şekilde ayarlaması gerekir. Harita bilgilerini görüntülemenin bu farklı yollarına projeksiyonlar. Aynı harita üzerinde bir vektör katmanını ve bir döşeme katmanını birlikte kullanmak, katmanları bir projeksiyondan diğerine dönüştürmemiz gerektiği anlamına gelir.
Adım 1. Özellikleri bir diziye yerleştirin
Birlikte dönüştürmek istediğimiz özellikleri, yineleme yapabileceğimiz bir diziye koyarak başlıyoruz.
var özellikler = [point_feature, linestring_feature];
Adım 2. Dönüştürme fonksiyonunu yazın
OpenLayers'da transform() işlevini her bir özelliğin geometri nesnesi üzerinde kullanabiliriz. Bu dönüştürme kodunu daha sonra arayabileceğimiz bir fonksiyona koyun:
function transform_geometry(element) { var current_projection = yeni ol.proj. Projection({kod: "EPSG:4326"}); var new_projection = tile_layer.getSource().getProjection(); element.getGeometry().transform(mevcut_projection, yeni_projection);); }
Adım 3. Özelliklerde dönüştürme işlevini çağırın
Şimdi sadece diziyi yineleyin.
feature.forEach(transform_geometry);
Bölüm 3/3: Vektör Katmanının Stilini Ayarlama
Haritadaki her özelliğin nasıl göründüğünü değiştirmek için bir stil oluşturup uygulamamız gerekiyor. Stiller, noktaların ve çizgilerin renklerini, boyutlarını ve diğer özelliklerini değiştirebilir ve ayrıca özelleştirilmiş haritalar için çok kullanışlı olan her nokta için görüntüler gösterebilir. Bu bölüm gerekli değildir, ancak eğlenceli ve kullanışlıdır.
Adım 1. Doldur ve stoke oluştur
Bir dolgu stili nesnesi ve yarı saydam bir kırmızı renk ve düz kırmızı bir çizgi olan bir kontur (çizgi) stili oluşturun:
var fill = new ol.style. Fill({ color: [180, 0, 0, 0.3] }); var inme = new ol.style. Stroke({ color: [180, 0, 0, 1], width: 1 });
Adım 2. Stili oluşturun ve katmana uygulayın
OpenLayers stili nesnesi oldukça güçlüdür, ancak şimdilik yalnızca dolgu ve konturu ayarlayacağız:
var style = new ol.style. Style({ image: new ol.style. Circle({ fill: fill, kontur: kontur, yarıçap: 8 }), fill: fill, kontur: kontur }); vector_layer.setStyle(stil);
