Şubat 28, 2020
openlayers-cizim

Openlayers – Harita Üzerinde Çizim İşlemleri

Projemizde şimdiye kadar neler yaptık? Bir hatırlayalım, önce temel seviyede haritamızın görüntülenmesini sağladık. Altlık olarak da OpenStreetMap kullanarak daha anlaşılabilir bir görüntü sağlamış olduk. Sonrasında katman yöneticimizi haritaya ekleyerek katman yönetimini de sağladık. Son olarak da Geolocation olarak adlandırılan sistem üzerinden (genellikle tarayıcı) konum alınarak bunun harita üzerinde gösterilmesi sağlanmıştı. Buraya kadar herhangi bir sorun yaşadıysanız devam etmeden lütfen bu makalenin altında yorum olarak yazın, yardımcı olayım.

Evet, şimdi kodumuza harita üzerinde mouse ile nokta, çizgi, poligon ve daire çizebilme yeteneği kazandıracağız. Yine son yazdığımız koda eklemerek yaparak ilerleyeceğiz, siz de hazırsanız başlayalım.

Kodumuz Geolocation eklenmesi ile aşağıda görüldüğü gibi biraz kalabalık bir hal aldı.

import 'ol/ol.css';
import Geolocation from 'ol/Geolocation';
import {Map, View} from 'ol';
import Feature from 'ol/Feature';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import 'ol-ext/dist/ol-ext.css';
import LayerSwitcher from 'ol-ext/control/LayerSwitcher';

var view = new View({
    center: [0, 0],
    zoom: 2
});

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      title: "OSM",
      source: new OSM()
    })
  ],
  view: view
});

const switcher = new LayerSwitcher();
map.addControl(switcher);

var geolocation = new Geolocation({
    trackingOptions: {
        enableHighAccuracy: true
    },
    projection: view.getProjection()
});

var positionFeature = new Feature();
positionFeature.setStyle(new Style({
    image: new CircleStyle({
        radius: 6,
        fill: new Fill({
            color: '#3399CC'
        }),
        stroke: new Stroke({
            color: '#fff',
            width: 2
        })
    })
}));

var accuracyFeature = new Feature();
geolocation.on('change:accuracyGeometry', function() {
    accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});

geolocation.on('change:position', function() {
    var coordinates = geolocation.getPosition();
    positionFeature.setGeometry(coordinates ?
        new Point(coordinates) : null);
});

new VectorLayer({
    map: map,
    source: new VectorSource({
        features: [accuracyFeature, positionFeature]
    })
});

geolocation.setTracking(true);

Öncelikle ol/interaction/Draw sınıfımızı koda import edelim.

import Draw from 'ol/interaction/Draw';

Çizimlerimizi yeni bir katman ekleyerek onun üzerine yapmamız gerektiği için boş bir VectorSource ve VectorLayer tanımlayalım.

var source = new VectorSource({ wrapX: false });
var vector = new VectorLayer({
    title: "Çizim",
    source: source
});

Şimdi bir metod oluşturacağız ve bu metod aldığı geometri tipi (nokta,çizgi,poligon,daire) parametresine göre ekrana ne çizmeyi istediğimizi Openlayers tarafına bildirmiş olacağız.

var draw;
function addInteraction(type) {
    var value = type;
    if (value !== 'None') {
        draw = new Draw({
            source: source,
            type: value
        });
        map.addInteraction(draw);
    }
}

Temel işlevlerimiz bu kadar, artık addInteraction() fonksiyonuna göndereceğimiz parametreye göre çizim aracımız aktif olacaktır. Parametreler nokta için Point, çizgi için LineString, poligon için Polygon ve daire için ise Circle olarak verilmelidir. Örneğin

addInteraction("LineString");

Çizim bittikten sonra çizim aracını pasif hale getirmek için ise aşağıdaki komutu kullanabilirsiniz.

map.removeInteraction(draw);

Ömür Bilgili

Kıdemli Bilgisayar Mühendisi - GIS Geliştirici

View all posts by Ömür Bilgili →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir