Ocak 25, 2020
openlayers

Openlayers – Temel Harita Gösterimi

Openlayers’ı artık Node Package Manager üzerinden yükleyip kullanabilir hale geldik, bu şekilde harita tabanlı uygulamamızı geliştirdikten sonra Node.js komutlarını kullanarak build edebilir ve kendi local geliştirme ortamımızda run edebiliriz.

Node.js halihazırda yüklü olduğunu varsaydığımız bilgisayarda, siz de hazırsanız ilk harita uygulamamızı geliştirmeye başlayalım.

Node.js command prompt u açarak, uygulamamızı barındıracak bir dizin yaratalım, adı önemli değil ben adını “ole” veriyorum ve “mkdir ole” komutunu kullanarak dizinimi oluşturdum.

cd ole” komutu ile dizinime giriyorum ve “npm init” komutu ile package.json dosyasının oluşturulmasını sağlayacağız, komutu çalıştırıyorum.

npm init” komutu bizden package name,version,description vb. gibi geliştireceğimiz uygulama ile ilgili bazı veriler isteyecek ve aldığı bu veriler doğrultusunda “package.json” dosyamızı oluşturacak. O yüzden istediği tüm bilgileri giriyoruz, tabiki tümünü doldurmamız şart değil, girebildiklerimizi girelim. Sonuç olarak aşağıdaki gibi bir package.json dosyamız olacak.

{
  "name": "ole",
  "version": "1.0.0",
  "description": "ilk uygulama",
  "main": "ole",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "omurbilgili",
  "license": "forumgeo"
}

npm install ol” komutu ile openlayers kütüphanemizi yüklüyoruz. 

npm install –save-dev parcel-bundler” komutu ile parcel adlı uygulama paketleyicimizi yüklüyoruz. 

Artık kodumuzu yazmaya başlayabiliriz. Öncelikle javascript dosyamız ile başlayalım.

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

Openlayers’ın kendi css dosyasını import ettikten sonra, kullanacağımız modülleri import ediyoruz. Buradaki Map modülü Openlayers’ın en temel bileşenidir. Bir Map nesnesinin oluşması için de en az bir katman, bir view ve bir hedef konteyner olmalıdır.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Openlayers ilk harita</title>
    <style>
      html,
      body,
      #map {
         margin: 0;
         height: 100%;
         width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

Yukarıda oluşturduğumuz package.json dosyamıza iki satır kod ekleyerek npm start ve npm run build komutlarını kullanılabilir hale getiriyoruz. Ekledikten sonraki package.json dosyamızın son hali aşağıdaki gibi olacaktır.

{
  "name": "ole",
  "version": "1.0.0",
  "description": "ilk uygulama",
  "main": "ole",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "omurbilgili",
  "license": "forumgeo"
}

Evet, Openlayers’da ilk haritamızı göstermek için yapmamız gerekenler bu kadar. Şimdi tekrar Nodejs konsoluna dönüp npm start komutunu çalıştıralım. Kodlarımız run edildikten sonra konsolda http://localhost:1234/ şeklinde bir url gözükecektir. Tarayıcımızda bu url i açarak, haritamızı görebiliriz.

Ö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