OpenLayers Kullanımı

OpenLayers, herhangi bir web sayfasına dinamik bir harita yerleştirmeyi kolaylaştırır. Herhangi bir kaynaktan yüklenen harita döşemelerini, vector data ve işaretçileri görüntüleyebilir.

Core concepts

OpenLayers temel kavramları:

Map: Harita, OpenLayers’ın temel bileşenidir. Bir haritanın oluşturulabilmesi için bir görünüm, bir veya daha fazla katman ve bir hedef kapsayıcı gereklidir.
View: Görünüm, haritanın nasıl oluşturulacağını belirler. Çözünürlüğü, merkezi konumu vb. ayarlamak için kullanılır. Harita içeriğine baktığımız bir kamera gibidir.
Layers: Katmanlar, haritaya yığılmış bir sırayla eklenebilir. Katmanlar, tarama katmanları (görüntüler) veya vektör katmanları (noktalar/çizgiler/çokgenler) olabilir.
Source: Her katmanın, katman içeriğinin nasıl yükleneceğini bilen bir kaynağı vardır. Vektör katmanları söz konusu olduğunda, kaynağı bir format sınıfı (örneğin GeoJSON veya KML) kullanarak vektör verilerini okur ve katmana bir dizi özellik sağlar.
Features: Özellikler gerçek dünyadaki şeyleri temsil eder ve görünümünü belirleyen (çizgi düşüncesi, dolgu rengi vb.) belirli bir stil kullanılarak farklı geometriler (nokta, çizgi veya çokgen gibi) kullanılarak oluşturulabilir.

Harita Hazırlayalım;

<!DOCTYPE html>
<html lang="tr">
    <head>
        <title>Basit bir harita</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">
        <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>
        <script>
          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([39.1833, 46.3833]),
              zoom: 6
            })
          });
        </script>
    </body>
</html>

Raster Layers Ekleme:

En çok kullanılan raster layer, OpenStreetMap, Stamen, Bing, vb. tarafından sağlanan tiled layers’dır. Tiled layers ol.layer.Tile sınıfı tarafından temsil edilir ve belirli bir sağlayıcıdan döşemelerin nasıl yükleneceğini bilen bir kaynak kullanmalıdır. , ol.source.OSM veya ol.source.Stamen gibi:

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var stamen = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'watercolor'
  })
});

Katmanlar haritaya iki şekilde eklenebilir:

ol.Map’i oluştururken, katmanlar özelliğini kullanma:

var map = new ol.Map({
  ...
  layers: [osm, stamen]
  ...
});

map.addLayer() yöntemiyle manuel olarak ekleme:

map.addLayer(osm);
map.addLayer(stamen);

Vector layers ekleme:

ol.layer.Vector sınıfı tarafından temsil edilir ve ol.source.GeoJSON, ol.source.KML veya ol.source.TopoJSON gibi vektör biçimini okumaya uygun bir kaynak kullanmalıdır.

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: 'url_to_geojson_file'
  })
});

//Haritaya Vector layer ekleme
map.addLayer(vectorLayer);

Önceki kodda url_to_file dosyasını sunucumuza yerleştirilmiş geçerli bir GeoJSON dosyasına işaret edecek şekilde değiştirmemiz gerektiğini unutmayın. Javascript güvenliğinin, farklı bir etki alanı / bağlantı noktasındaki harici bir URL’den veri kümelerinin alınmasını önleyeceğini unutmayın.

Özellikler manuel olarak da oluşturulabilir. Bu durumda, özelliği temsil eden bir geometri oluşturmamız gerekiyor:

// Geometries
var point = new ol.geom.Point(
    ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
    ol.proj.transform([39.1833, 49.3833], 'EPSG:4326', 'EPSG:3857'),
    1000000
);

// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);

// Source
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);

// Vector layer
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

//Vector layer ekleme
map.addLayer(vectorLayer);

Features style uygulama:

Vektör katmanları içindeki özellikler stillendirilebilir. Stil, tümü isteğe bağlı olan dolgu, kontur, metin ve görüntünün bir kombinasyonu ile belirlenir. Ayrıca, içerdiği tüm özelliklerin stilini belirleyen bir katmana veya tek bir özelliğe bir stil uygulanabilir.

var limitsLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/world_limits.json',
    format: new ol.format.TopoJSON(),
    projection: 'EPSG:3857'
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(55, 155, 55, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(55, 155, 55, 0.8)',
      width: 1
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(55, 155, 55, 0.5)',
      })
    })
  })
});

Kodda, bir TopoJSON dosyası yükledik ve onu style özelliği ile şekillendirdik. Çizgiler ve çokgenler için gerekli olan bir dolgu ve kontur ve nokta özellikleri için kullanılan bir görüntü (bu durumda bir daire) belirledik.

Events kullanımı:

Harita, katmanlar veya kontroller gibi bileşenlerin çoğu, değişiklikleri bildirmek için olayları tetikler. Örneğin, fare harita üzerinde her hareket ettiğinde veya bir vektör katmanına bir özellik eklendiğinde vb.

Olaylar, on() yöntemiyle bir nesneye kolayca kaydedilebilir ve un() ile kaydedilmeyebilir.

Aşağıdaki kod, bir harita örneğinde bir olayı kaydeder ve işaretçi her hareket ettiğinde bilgilendirilir. Geri arama işlevi içinde işaretçi koordinatlarını alıyoruz ve tarayıcı konsolunda iki farklı projeksiyonda yazdırıyoruz.

map.on('pointermove', function(event) {
  var coord3857 = event.coordinate;
  var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');

  console.log(coord3857, coord4326);
});