Open Layers'a Giriş

Bir web sayfasına basit bir haritanın nasıl yerleştirileceğini öğrenin.

Modern JavaScript, modülleri kullanırken ve yazarken en iyi şekilde çalışır. OpenLayers'ı kullanmanın önerilen yolu ol paketi kurmaktır . Bu eğitim, her şeyin çalışması için node gerektiren basit bir geliştirme ortamı kurmanızda size yol gösterir.

olpaket

OpenLayers'ı kullanmanın önerilen yolu olpaketle çalışmaktır . En son sürümü şu şekilde yükleyebilirsiniz npm:

npm install ol
 

Geliştirme için barındırılan derlemeler

OpenLayers'ı hiçbir şey indirmeden denemek istiyorsanız ( üretim için önerilmez ), html sayfanızın başına şunları ekleyin:

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">

 

V6.5.0 sürümü için indirme

Arşiv Açıklama
v6.5.0-dist.zip Kitaplığın tam derlemesini ( ol.js), bir kaynak eşlemesini ( ol.js.map) ve kitaplık CSS'sini ( ol.csskaynak eşlemi ile ol.css.map) içerir.
v6.5.0.zip Yukarıdakilerin yanı sıra örnekleri, API belgelerini ve kaynakları içerir.

Bu eğitimde, uygulamamızı paketlemek için Parcel'i kullanacağız. README'den bağlantılı olan birkaç seçenek daha vardır.

İlk adımlar

Projeniz için yeni bir boş dizin oluşturun ve çalıştırarak ona gidin mkdir new-project && cd new-project. İle projenizi başlatın

npm init

Bu, package.json çalışma dizininizde bir dosya oluşturacaktır . OpenLayers'ı uygulamanıza bağımlılık olarak ekleyin

npm install ol

Bu noktada NPM'den gerekli geliştirme bağımlılıklarını eklemesini isteyebilirsiniz.

npm install --save-dev parcel-bundler

 

Uygulama kodu ve index.html

Uygulama kodunuzu yerleştirin index.js. İşte basit bir başlangıç ??noktası:

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
  })
});
  

index.html Paketinizi kullanacak bir dosyaya da ihtiyacınız olacak. İşte basit bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>
  

Bir paket oluşturmak

İki ek satır ile package.jsonkomutları tanıtabilir npm run buildve npm startpaketinizi manuel olarak oluşturabilir ve sırasıyla değişiklikleri izleyebilirsiniz. Son package.jsoniki ek komutla "start"ve şöyle "build"görünmelidir:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "parcel index.html", "build": "parcel build --public-url . index.html" },
  "author": "",
  "license": "ISC" }
 

Bu kadar. Şimdi uygulamanızı çalıştırmak için şunu girin:

npm start

konsolunuzda. Uygulamanızı test etmek için tarayıcınızda http: // localhost: 1234 / adresini açın. Bir şeyi her değiştirdiğinizde, değişikliklerinizin sonucunu göstermek için sayfa otomatik olarak yeniden yüklenecektir.

Tüm uygulama kodunuzu ve uygulamanızda kullanılan tüm bağımlılıkları içeren tek bir JavaScript dosyasının oluşturulduğunu unutmayın. OpenLayers paketinden yalnızca gerekli bileşenleri içerir.

Uygulamanızın bir üretim paketini oluşturmak için şunu yazın:

npm run build

ve dist/ klasörünü sunucunuza kopyalayın .

Bir sayfaya harita yerleştirin

Aşağıda eksiksiz bir çalışma örneği bulacaksınız. Yeni bir dosya oluşturun, aşağıdaki içeriği kopyalayın ve bir tarayıcıda açın:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style> .map { height: 400px; width: 100%; } </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript"> 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([37.41, 8.82]), zoom: 4 }) }); </script>
  </body>
</html>
  
 

Neler oldu?

Bir haritaya bir web sayfası eklemek için 3 şeye ihtiyacınız olacak:

  1. OpenLayers'ı dahil et
  2. <div> harita kapsayıcı
  3. Basit bir harita oluşturmak için JavaScript

OpenLayers'ı dahil et

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
  
 

İlk bölüm JavaScript kitaplığını dahil etmektir. Bu eğiticinin amacı için, burada tüm kütüphaneyi almak için openlayers.org web sitesini işaret ediyoruz. Bir üretim ortamında, yalnızca uygulamamız için gerekli olan modülü içeren kitaplığın özel bir sürümünü oluştururduk.

İsteğe bağlı: Uygulamanın Internet Explorer veya Android 4.x gibi eski platformlarda çalışması amaçlanıyorsa, OpenLayers'tan önce başka bir komut dosyasının eklenmesi gerekir:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
  

Haritayı içeren <div>

<div id="map" class="map"></div>
  

Uygulamadaki harita bir <div> HTML öğesinin içinde yer alır . Bu <div> sayede genişlik, yükseklik ve sınır gibi harita özellikleri CSS aracılığıyla kontrol edilebilir. Haritayı 400 piksel yüksekliğinde ve tarayıcı penceresi kadar geniş yapmak için kullanılan CSS öğesi.

<style> .map { height: 400px; width: 100%; } </style>
  

Basit bir harita oluşturmak için: JavaScript

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([37.41, 8.82]),
      zoom: 4
    })
  });
  

Bu JavaScript koduyla, Afrika Doğu sahilinde yakınlaştırılmış bir OSM katmanıyla bir harita nesnesi oluşturulur. Bunu parçalayalım:

Aşağıdaki satır bir OpenLayers Mapnesnesi oluşturur . Sadece kendi başına, ona bağlı hiçbir katman veya etkileşim olmadığından hiçbir şey yapmaz.

  var map = new ol.Map({ ... });
 

Harita nesnesini öğesine eklemek için <div>, harita nesnesi a'yı target argümanlara alır . Değeri id arasında <div>:

    target: 'map'
 

layers: [ ... ] Dizi haritası mevcut katmanların listesini tanımlamak için kullanılır. Şu anda ilk ve tek katman kiremitli bir katmandır:

    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ]
 

OpenLayers'daki katmanlar, bir kaynak içeren bir türle (Görüntü, Döşeme veya Vektör) tanımlanır. Kaynak, harita döşemelerini almak için kullanılan protokoldür.

MapNesnenin bir sonraki kısmı View. Görünüm, haritanın merkezini, çözünürlüğünü ve dönüşünü belirlemeye izin verir. Bir görünümü tanımlamanın en basit yolu, bir merkez noktası ve bir yakınlaştırma seviyesi tanımlamaktır. Yakınlaştırma düzeyi 0'ın uzaklaştırıldığını unutmayın.

    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
 

center Belirtilenin enlem / boylam koordinatlarında olduğunu fark edeceksiniz (EPSG: 4326). Kullandığımız tek katman Küresel Mercator projeksiyonunda (EPSG: 3857) olduğundan, haritayı doğru koordinatlarda yakınlaştırabilmek için onları anında yeniden yansıtabiliriz.

Örnek1: Marker kullanılarak oluşturulmuş harita

<!DOCTYPE html>
<html>
    <head>
        <script src="/html/OpenLayers/v6.5.0-dist/ol.js"></script>
        <link rel="stylesheet" href="/html/OpenLayers/v6.5.0-dist/ol.css">
        <script src="/html/jquery/jquery-3.5.1.min.js"></script>
        <script src="/html/bootstrap/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="/html/bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css" />

        <meta charset="utf-8">
        <title>Using Parcel with OpenLayers</title>
        <style>
            #map-canvas {
                width: 640px;
                height: 480px;
            }
            #marker {
                width: 20px;
                height: 27px;
                /*border: 1px solid #088;
                border-radius: 10px;
                background-color: #0FF;*/
                opacity: 0.7;
                background-image: url('map-pin.png');
                background-size: cover;
                /*display: none;*/
            }
            .popover-content {
                min-width: 180px;
            }
        </style>
    </head>
    <body>
        <div id="map-canvas"></div>
        <div id="popup" data-toggle="popover" data-content="Gösterilecek Konum burası"></div>
        <div id="marker" title="Marker"></div>

        <script type="text/javascript">
         <!--
            var HaritaMerkezi = ol.proj.fromLonLat([28.979781979490546, 41.00847924916758]);

            var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                target: 'map-canvas',
                view: new ol.View({
                    //center: [28.96, 41.03],
                    //center: ol.proj.fromLonLat([16.3725, 48.208889]),
                    center: HaritaMerkezi,
                    zoom: 13
                   //projection: "EPSG:4326"
                })

            });

            //Yer Gosterici
            var marker = new ol.Overlay({
                position: HaritaMerkezi,
                positioning: 'center-center',
                element: document.getElementById('marker'),
                stopEvent: false
            });
            map.addOverlay(marker);

            //-->
        </script>
    </body>
</html>

 

Open Layers'a Giriş

 

Örnek2: Popup kullanılarak oluşturulmuş harita

<!DOCTYPE html>
<html>
    <head>
        <script src="/html/OpenLayers/v6.5.0-dist/ol.js"></script>
        <link rel="stylesheet" href="/html/OpenLayers/v6.5.0-dist/ol.css">
        <script src="/html/jquery/jquery-3.5.1.min.js"></script>
        <script src="/html/bootstrap/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="/html/bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css" />

        <meta charset="utf-8">
        <title>Using Parcel with OpenLayers</title>
        <style>
            #map-canvas {
                width: 640px;
                height: 480px;
            }
            #marker {
                width: 20px;
                height: 27px;
                /*border: 1px solid #088;
                border-radius: 10px;
                background-color: #0FF;*/
                opacity: 0.7;
                background-image: url('map-pin.png');
                background-size: cover;
                display: none;
            }
            .popover-content {
                min-width: 180px;
            }
        </style>
    </head>
    <body>
        <div id="map-canvas"></div>
        <div id="popup" data-toggle="popover" data-content="Gösterilecek Konum burası"></div>
        <div id="marker" title="Marker"></div>

        <script type="text/javascript">
         <!--
            var HaritaMerkezi = ol.proj.fromLonLat([28.979781979490546, 41.00847924916758]);

            var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                target: 'map-canvas',
                view: new ol.View({
                    //center: [28.96, 41.03],
                    //center: ol.proj.fromLonLat([16.3725, 48.208889]),
                    center: HaritaMerkezi,
                    zoom: 13
                   //projection: "EPSG:4326"
                })

            });

            //popup
            var popup = new ol.Overlay({
                element: document.getElementById('popup'),
                positioning: 'center-center',
                stopEvent: false
            });
            map.addOverlay(popup);

            $(document).ready(function () {
                var element = popup.getElement();
                var coordinate = HaritaMerkezi;
                var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                        coordinate, 'EPSG:3857', 'EPSG:4326'));

                popup.setPosition(coordinate);

                $(element).popover({
                    'container': element,
                    'placement': 'top',
                    'animation': true,
                    'html': true
                });
                $(element).removeClass('d-none');
                $(element).popover('show');
            });

            //-->
        </script>
    </body>
</html>

 

Open Layers'a Giriş

Örnek3: Tıklanan Yerin Koordinat Bilgilerini Almak

<!DOCTYPE html>
<html>
    <head>
        <script src="/html/OpenLayers/v6.5.0-dist/ol.js"></script>
        <link rel="stylesheet" href="/html/OpenLayers/v6.5.0-dist/ol.css">
        <script src="/html/jquery/jquery-3.5.1.min.js"></script>
        <script src="/html/bootstrap/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="/html/bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css" />

        <meta charset="utf-8">
        <title>Using Parcel with OpenLayers</title>
        <style>
            #map-canvas {
                width: 640px;
                height: 480px;
            }
            #marker {
                width: 20px;
                height: 27px;
                /*border: 1px solid #088;
                border-radius: 10px;
                background-color: #0FF;*/
                opacity: 0.7;
                background-image: url('map-pin.png');
                background-size: cover;
                /*display: none;*/
            }
            .popover-content {
                min-width: 180px;
            }
        </style>
    </head>
    <body>
        <div id="map-canvas"></div>
        <div id="popup"></div>
        <div id="marker" title="Marker"></div>

        <script type="text/javascript">
         <!--
            var HaritaMerkezi = ol.proj.fromLonLat([28.979781979490546, 41.00847924916758]);

            var map = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                target: 'map-canvas',
                view: new ol.View({
                    //center: [28.96, 41.03],
                    //center: ol.proj.fromLonLat([16.3725, 48.208889]),
                    center: HaritaMerkezi,
                    zoom: 13
                   //projection: "EPSG:4326"
                })

            });

            //popup
            var popup = new ol.Overlay({
                element: document.getElementById('popup'),
                positioning: 'center-center',
                stopEvent: false
            });
            map.addOverlay(popup);

            var zoomInfo;
            map.on("moveend", function() {
                zoomInfo = map.getView().getZoom();
            });

            map.on('click', function (evt) {
           
                //alert(zoomInfo);
                var element = popup.getElement();
                var coordinate = evt.coordinate;
                var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                        coordinate, 'EPSG:3857', 'EPSG:4326'));

                var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');

                popup.setPosition(coordinate);

                $(element).popover('dispose');
                $(element).popover({
                    'container': element,
                    'placement': 'top',
                    'animation': true,
                    'html': true,
                    'content': '<p>Tıklanan Yerin Koordinat Bilgisi: <code>' + hdms + '</code></p><p>Long Lat Bilgisi: <code>[' + lonlat[0] + ', ' + lonlat[1] + ']</code></p><p>Zoom değeri: <code>' + zoomInfo + '</code></p>'
                });
                $(element).popover('show');
            });

            //-->
        </script>
    </body>
</html>

 

Open Layers'a Giriş

Kaynak

863 Okunma Henüz yorum yapılmamış 24/04/2021 00:17:32 25/04/2021 13:15:10

Yorumunuzu Ekleyin
Görsel Liste


Google Map 3.0 ile Directions (Yol Tarifi Kullanımı)

Örnek Uygulamamızda API 3.0 kullandık ve Google Mapsle nasıl yol tarifi uygulaması hazırlanabilir göstermek istedik.

37,465 okuma,

Google Map 3.0 ile Directions (Yol Tarifi Kullanımı)
Google Map Kullanarak Harita Tasarlamak

Google bazı ürünlerini kısıtlı kullanım alanlarından sıyırıp yaratıcı ellere teslim ederek hem kendisine duyulan sempatiyi arttırıyor hem de biz kullanıcılara yeni kullanım alanları açabiliyor.

36,492 okuma,

Google Map Kullanarak Harita Tasarlamak
Google Map Api 3.0

Google Maps API 3 resmi API artık. Versiyon 2 API artık resmi olarak önerilmilyor.V2 ile yaptığınız uygulamalarınızı V3 için güncellemeniz gerekli. V3 'ün en büyük özelliği mobil cihazlara göre düzenlenmiş olması ve API keyin artık gerekli olmayışı

26,588 okuma, 30/10/2012

Google Map Api 3.0
Kurumsal Mail Hizmeti İçin Google Kullanmak

Bir host hizmetinden aldığınız mail adresini gmaile yönlendirerek nasıl kullanabileceğinizi anlatan bir makale...

22,758 okuma, 16/04/2013

Kurumsal Mail Hizmeti İçin Google Kullanmak
Google Docs

Paylaş

18,006 okuma,

Google Docs
Google Drive Kullanımı

17,457 okuma,

Google Drive Kullanımı
Youtube Videosunu Kullanmak

Bir youtube videosunun özellikleri

10,899 okuma, 08/12/2015

Youtube Videosunu Kullanmak
Google Adwords API Kullanımı

Google Reklamlarını yönetmek için Google Adwords API'yi kullanmalısınız.

8,004 okuma, 26/07/2018

Google Adwords API Kullanımı
Google Site İçi Arama Motoru

Bir web siteniz var ve ziyaretçilerinizin siteniz içerisinde arama yapmasını istiyorsanız google Custom Search Api kullanmalısınız.

7,790 okuma, 30/06/2018

Google Site İçi Arama Motoru
Google Maps Yerine OpenLayers Kullanmak

Google haritanızı bir OpenLayers Haritası ile değiştirme kılavuzu

897 okuma,

Google Maps Yerine OpenLayers Kullanmak
Yükleniyor...
    Yükleniyor...