Angular uygulamalar\u0131nda haritalar olu\u015fturmak, \u00f6zellikle co\u011frafi verileri g\u00f6rselle\u015ftirmek ve kullan\u0131c\u0131 etkile\u015fimini sa\u011flamak s\u00f6z konusu oldu\u011funda g\u00fc\u00e7l\u00fc bir yetenektir. Leaflet, bu ama\u00e7la kullanabilece\u011finiz hafif, a\u00e7\u0131k kaynakl\u0131 ve mobil uyumlu bir JavaScript k\u00fct\u00fcphanesidir. \u00d6nceki b\u00f6l\u00fcmlerde Angular ile Leaflet haritalar\u0131n\u0131 nas\u0131l entegre edece\u011fimizi ve temel harita katmanlar\u0131n\u0131 nas\u0131l y\u00f6netece\u011fimizi incelemi\u015ftik. Bu d\u00f6rd\u00fcnc\u00fc b\u00f6l\u00fcmde ise harita \u00fczerindeki \u00e7e\u015fitli \u00e7izimleri (i\u015faretleyiciler, \u00e7izgiler, \u00e7okgenler vb.) y\u00f6netmek i\u00e7in merkezi bir “\u015eekil Servisi” (Shape Service) olu\u015fturman\u0131n \u00f6nemini ve nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\n
Harita \u00fczerinde dinamik olarak \u015fekiller eklemek, d\u00fczenlemek veya kald\u0131rmak, genellikle karma\u015f\u0131k mant\u0131k ve yo\u011fun olay i\u015fleme gerektirir. Bu t\u00fcr bir i\u015flevselli\u011fi do\u011frudan bir Angular bile\u015feninde y\u00f6netmek, bile\u015fenin \u015fi\u015fkinle\u015fmesine, kodun tekrar\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7abilir. \u0130\u015fte bu noktada, t\u00fcm \u015fekil y\u00f6netimi mant\u0131\u011f\u0131n\u0131 kaps\u00fclleyen ba\u011f\u0131ms\u0131z bir servis devreye girer. Bir Shape Service, harita bile\u015fenlerimizden ba\u011f\u0131ms\u0131z olarak \u015fekilleri y\u00f6netmemizi sa\u011flayarak kodumuzu daha d\u00fczenli, yeniden kullan\u0131labilir ve test edilebilir hale getirir.<\/p>\n
Leaflet’te “\u015fekil” terimi, harita \u00fczerinde g\u00f6rsel olarak temsil edilen \u00e7e\u015fitli co\u011frafi nesneleri ifade eder. Bunlar ba\u015fl\u0131ca \u015funlard\u0131r:<\/p>\n
Bu \u015fekillerin her biri kendi \u00f6zelliklerine, stillerine ve etkile\u015fimlerine sahiptir. Bir Angular uygulamas\u0131nda bu \u015fekilleri y\u00f6netirken kar\u015f\u0131la\u015f\u0131lan zorluklar \u015funlard\u0131r:<\/p>\n
Bu nedenlerle, bir Shape Service olu\u015fturmak, daha b\u00fcy\u00fck ve karma\u015f\u0131k Angular-Leaflet uygulamalar\u0131nda vazge\u00e7ilmez bir mimari desendir.<\/p>\n
\u015eekil servisimiz, Leaflet k\u00fct\u00fcphanesini kullanarak harita \u00fczerinde \u00e7e\u015fitli geometrik \u015fekilleri olu\u015fturacak, y\u00f6netecek ve olaylar\u0131n\u0131 i\u015fleyecek y\u00f6ntemleri i\u00e7erecektir. \u0130lk ad\u0131m olarak, Angular CLI kullanarak bir servis olu\u015ftural\u0131m:<\/p>\n
ng generate service services\/shape<\/code><\/pre>\nBu komut, src\/app\/services\/shape.service.ts<\/code> dosyas\u0131n\u0131 ve ilgili test dosyas\u0131n\u0131 olu\u015fturacakt\u0131r. \u015eimdi shape.service.ts<\/code> dosyas\u0131n\u0131n i\u00e7eri\u011fini tasarlayal\u0131m:<\/p>\n\u015eekil Servisi Tan\u0131m\u0131<\/h3>\nimport { Injectable } from '@angular\/core';\nimport * as L from 'leaflet';\nimport { Subject, Observable } from 'rxjs';\n\n\/\/ \u015eekil t\u00fcrlerini tan\u0131mlayal\u0131m\nexport type CustomShape = L.Marker | L.Polyline | L.Polygon | L.Circle | L.Rectangle;\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ShapeService {\n private drawnShapes: CustomShape[] = []; \/\/ Haritadaki t\u00fcm \u00e7izilmi\u015f \u015fekilleri tutar\n private shapeClickedSource = new Subject(); \/\/ T\u0131klanan \u015fekil olaylar\u0131n\u0131 yayar\n shapeClicked$: Observable = this.shapeClickedSource.asObservable();\n\n constructor() { }\n\n \/<\/em>\n * Haritaya bir i\u015faretleyici (marker) ekler.\n * @param map Harita nesnesi.\n * @param latlng \u0130\u015faretleyicinin koordinatlar\u0131.\n * @param options \u0130\u015faretleyici se\u00e7enekleri.\n * @returns Eklenen i\u015faretleyici nesnesi.\n *\/\n addMarker(map: L.Map, latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker {\n const marker = L.marker(latlng, options);\n marker.addTo(map);\n this.drawnShapes.push(marker);\n this.attachShapeEvents(marker); \/\/ Olay dinleyicilerini ekle\n return marker;\n }\n\n \/<\/em>\n * Haritaya bir \u00e7izgi (polyline) ekler.\n * @param map Harita nesnesi.\n * @param latlngs \u00c7izginin koordinatlar\u0131 dizisi.\n * @param options \u00c7izgi se\u00e7enekleri.\n * @returns Eklenen \u00e7izgi nesnesi.\n *\/\n addPolyline(map: L.Map, latlngs: L.LatLngExpression[], options?: L.PolylineOptions): L.Polyline {\n const polyline = L.polyline(latlngs, options);\n polyline.addTo(map);\n this.drawnShapes.push(polyline);\n this.attachShapeEvents(polyline);\n return polyline;\n }\n\n \/<\/em>\n * Haritaya bir \u00e7okgen (polygon) ekler.\n * @param map Harita nesnesi.\n * @param latlngs \u00c7okgenin koordinatlar\u0131 dizisi.\n * @param options \u00c7okgen se\u00e7enekleri.\n * @returns Eklenen \u00e7okgen nesnesi.\n *\/\n addPolygon(map: L.Map, latlngs: L.LatLngExpression[], options?: L.PolylineOptions): L.Polygon {\n const polygon = L.polygon(latlngs, options);\n polygon.addTo(map);\n this.drawnShapes.push(polygon);\n this.attachShapeEvents(polygon);\n return polygon;\n }\n\n \/<\/em>\n * Haritaya bir daire (circle) ekler.\n * @param map Harita nesnesi.\n * @param latlng Dairenin merkez koordinatlar\u0131.\n * @param options Daire se\u00e7enekleri (yar\u0131\u00e7ap dahil).\n * @returns Eklenen daire nesnesi.\n *\/\n addCircle(map: L.Map, latlng: L.LatLngExpression, options?: L.CircleOptions): L.Circle {\n const circle = L.circle(latlng, options);\n circle.addTo(map);\n this.drawnShapes.push(circle);\n this.attachShapeEvents(circle);\n return circle;\n }\n\n \/<\/em>\n * Haritadan belirli bir \u015fekli kald\u0131r\u0131r.\n * @param map Harita nesnesi.\n * @param shape Kald\u0131r\u0131lacak \u015fekil nesnesi.\n *\/\n removeShape(map: L.Map, shape: CustomShape): void {\n map.removeLayer(shape);\n this.drawnShapes = this.drawnShapes.filter(s => s !== shape);\n }\n\n \/<\/em>\n * Haritadaki t\u00fcm \u00e7izilmi\u015f \u015fekilleri kald\u0131r\u0131r.\n * @param map Harita nesnesi.\n *\/\n clearAllShapes(map: L.Map): void {\n this.drawnShapes.forEach(shape => {\n map.removeLayer(shape);\n });\n this.drawnShapes = [];\n }\n\n \/<\/em>\n * Bir \u015fekle temel olay dinleyicilerini ekler.\n * @param shape Olay dinleyicilerinin eklenece\u011fi \u015fekil.\n *\/\n private attachShapeEvents(shape: CustomShape): void {\n shape.on('click', (event: L.LeafletMouseEvent) => {\n console.log('Shape clicked:', shape);\n this.shapeClickedSource.next(shape); \/\/ T\u0131klanan \u015fekli yay\n });\n\n \/\/ \u0130ste\u011fe ba\u011fl\u0131 olarak di\u011fer olaylar\u0131 da ekleyebilirsiniz:\n \/\/ shape.on('mouseover', () => { \/ ... <\/em>\/ });\n \/\/ shape.on('mouseout', () => { \/ ... <\/em>\/ });\n }\n\n \/<\/em>\n * Mevcut \u00e7izilmi\u015f \u015fekilleri d\u00f6nd\u00fcr\u00fcr.\n * @returns \u00c7izilmi\u015f \u015fekiller dizisi.\n *\/\n getDrawnShapes(): CustomShape[] {\n return this.drawnShapes;\n }\n}\n<\/code><\/pre>\nYukar\u0131daki kodda:<\/p>\n
\nCustomShape<\/code> t\u00fcr\u00fc, Leaflet’teki farkl\u0131 \u015fekil t\u00fcrlerini tek bir tip alt\u0131nda toplar.<\/li>\ndrawnShapes<\/code> dizisi, servisin y\u00f6netti\u011fi t\u00fcm \u015fekillerin referanslar\u0131n\u0131 tutar. Bu sayede \u015fekiller \u00fczerinde toplu i\u015flemler (temizleme, arama vb.) yap\u0131labilir.<\/li>\nshapeClickedSource<\/code> bir RxJS Subject<\/code>‘idir. Bu, harita bile\u015fenlerinin t\u0131klanan \u015fekiller hakk\u0131nda bilgi almas\u0131n\u0131 sa\u011flar.<\/li>\naddMarker<\/code>, addPolyline<\/code>, addPolygon<\/code>, addCircle<\/code> gibi y\u00f6ntemler, haritaya belirli t\u00fcrde bir \u015fekil eklemek i\u00e7in kullan\u0131l\u0131r ve eklenen \u015fekli drawnShapes<\/code> dizisine kaydeder.<\/li>\nremoveShape<\/code> ve clearAllShapes<\/code> y\u00f6ntemleri, \u015fekilleri haritadan kald\u0131rmak ve drawnShapes<\/code> dizisinden temizlemek i\u00e7in kullan\u0131l\u0131r.<\/li>\nattachShapeEvents<\/code> \u00f6zel y\u00f6ntemi, her yeni eklenen \u015fekle temel olay dinleyicilerini (\u00f6rne\u011fin ‘click’) ekler. Bu olaylar, shapeClickedSource<\/code> arac\u0131l\u0131\u011f\u0131yla ilgili bile\u015fenlere yay\u0131nlan\u0131r.<\/li>\n<\/ul>\n
\n\u015eekil Servisi Kullan\u0131m\u0131 ve Pratik \u00d6rnekler<\/h2>\n
\u015eimdi bu servisi bir harita bile\u015feninde nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m. Varsay\u0131msal bir MapComponent<\/code>‘imiz oldu\u011funu ve Leaflet haritas\u0131n\u0131 ba\u015flatt\u0131\u011f\u0131n\u0131 varsayal\u0131m.<\/p>\nMapComponent’te Servisi Kullanma<\/h3>\n\/\/ map.component.ts\nimport { Component, OnInit, OnDestroy, AfterViewInit } from '@angular\/core';\nimport * as L from 'leaflet';\nimport { ShapeService, CustomShape } from '..\/services\/shape.service';\nimport { Subscription } from 'rxjs';\n\n@Component({\n selector: 'app-map',\n templateUrl: '.\/map.component.html',\n styleUrls: ['.\/map.component.css']\n})\nexport class MapComponent implements OnInit, AfterViewInit, OnDestroy {\n private map!: L.Map;\n private shapeClickSubscription!: Subscription;\n\n constructor(private shapeService: ShapeService) { }\n\n ngOnInit(): void {\n \/\/ Harita t\u0131kland\u0131\u011f\u0131nda veya y\u00fcklendi\u011finde \u015fekilleri eklemek i\u00e7in uygun yer\n }\n\n ngAfterViewInit(): void {\n this.initMap();\n this.addInitialShapes();\n this.subscribeToShapeClicks();\n }\n\n ngOnDestroy(): void {\n if (this.shapeClickSubscription) {\n this.shapeClickSubscription.unsubscribe();\n }\n if (this.map) {\n this.map.remove(); \/\/ Harita kaynaklar\u0131n\u0131 serbest b\u0131rak\n }\n }\n\n private initMap(): void {\n this.map = L.map('map', {\n center: [ 39.9334, 32.8597 ], \/\/ Ankara koordinatlar\u0131\n zoom: 10\n });\n\n const tiles = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 18,\n minZoom: 3,\n attribution: '© OpenStreetMap<\/a>'\n });\n\n tiles.addTo(this.map);\n }\n\n private addInitialShapes(): void {\n \/\/ \u00d6rnek bir i\u015faretleyici ekleyelim\n this.shapeService.addMarker(this.map, [39.9334, 32.8597], {\n title: 'Ankara Kalesi',\n draggable: true,\n alt: 'Ankara Kalesi'\n }).bindPopup('Ankara Kalesi<\/b>
Ba\u015fkentin tarihi simgesi.');\n\n \/\/ \u00d6rnek bir \u00e7izgi ekleyelim\n const routeCoordinates: L.LatLngExpression[] = [\n [39.95, 32.80],\n [39.90, 32.85],\n [39.92, 32.90]\n ];\n this.shapeService.addPolyline(this.map, routeCoordinates, {\n color: 'blue',\n weight: 5,\n opacity: 0.7\n }).bindPopup('\u00d6rnek Rota');\n\n \/\/ \u00d6rnek bir \u00e7okgen ekleyelim\n const polygonCoordinates: L.LatLngExpression[] = [\n [39.90, 32.75],\n [39.88, 32.78],\n [39.90, 32.82],\n [39.92, 32.78]\n ];\n this.shapeService.addPolygon(this.map, polygonCoordinates, {\n color: 'red',\n fillColor: '#f03',\n fillOpacity: 0.5\n }).bindPopup('\u00d6rnek B\u00f6lge');\n\n \/\/ \u00d6rnek bir daire ekleyelim\n this.shapeService.addCircle(this.map, [39.91, 32.89], {\n radius: 500, \/\/ metre cinsinden\n color: 'green',\n fillColor: '#0f3',\n fillOpacity: 0.4\n }).bindPopup('500m Yar\u0131\u00e7apl\u0131 Daire');\n }\n\n private subscribeToShapeClicks(): void {\n this.shapeClickSubscription = this.shapeService.shapeClicked$.subscribe(clickedShape => {\n console.log('Harita bile\u015feninde t\u0131klanan \u015fekil:', clickedShape);\n \/\/ T\u0131klanan \u015fekle g\u00f6re UI'da bir \u015feyler yapabiliriz\n \/\/ \u00d6rne\u011fin, bir panelde \u015feklin \u00f6zelliklerini g\u00f6sterebiliriz.\n if (clickedShape instanceof L.Marker) {\n console.log('T\u0131klanan bir i\u015faretleyici:', clickedShape.getLatLng());\n } else if (clickedShape instanceof L.Polyline) {\n console.log('T\u0131klanan bir \u00e7izgi veya \u00e7okgen.');\n \/\/ \u00c7izginin rengini de\u011fi\u015ftirebiliriz\n clickedShape.setStyle({ color: 'purple', weight: 8 });\n }\n });\n }\n\n \/\/ Kullan\u0131c\u0131 etkile\u015fimiyle \u015fekil ekleme \u00f6rne\u011fi\n addCustomMarker(): void {\n const randomLat = 39.8 + Math.random() * 0.2;\n const randomLng = 32.7 + Math.random() * 0.3;\n this.shapeService.addMarker(this.map, [randomLat, randomLng], {\n title: 'Yeni \u0130\u015faretleyici',\n icon: L.icon({\n iconUrl: 'assets\/marker-icon-2x.png', \/\/ Kendi ikonunuzu kullanabilirsiniz\n iconSize: [25, 41],\n iconAnchor: [12, 41]\n })\n }).bindPopup('Dinamik olarak eklenen i\u015faretleyici');\n }\n\n \/\/ T\u00fcm \u015fekilleri temizleme \u00f6rne\u011fi\n clearMapShapes(): void {\n this.shapeService.clearAllShapes(this.map);\n console.log('Haritadaki t\u00fcm \u015fekiller temizlendi.');\n }\n}\n<\/code><\/pre>\n\n<\/div>\n\n