1/** 2 * Drawing Clipped Features Module 3 * Handles drawing of clipped features (roads, waterways, electric, water) 4 */ 5 6/** 7 * Clipped features drawing methods for ProParcelApp 8 */ 9export function createClippedFeaturesMethods(app) { 10 return { 11 /** 12 * Draw clipped features 13 */ 14 drawClippedFeatures(clippedDict) { 15 // Drawing clipped features 16 if (!clippedDict) { 17 return; 18 } 19 20 try { 21 // Draw roads 22 if (clippedDict.clipped_roads) { 23 24 25 // Convert LineString features to GeoJSON FeatureCollection 26 const roadFeatures = clippedDict.clipped_roads.map(road => { 27 // Koordinat sırasını deÄiÅtir: [lat, lon] â [lon, lat] 28 const coordsLngLat = road.coordinates.map(coord => [coord[1], coord[0]]); 29 return { 30 type: 'Feature', 31 geometry: { 32 type: road.type, 33 coordinates: coordsLngLat 34 }, 35 properties: { fclass: road.fclass || 'road' } 36 }; 37 }); 38 39 const roadGeoJSON = { 40 type: 'FeatureCollection', 41 features: roadFeatures 42 }; 43 44 // Cache roads geojson for 3D restore 45 this.lastRoadsGeoJSON = roadGeoJSON; 46 47 // Draw on 2D - LineString için özel çizim 48 const layer2D = this.leafletRenderer.drawLineStringsFromGeoJSON('road', roadGeoJSON, { 49 color: "#FF9800", 50 weight: 2, 51 group: 'road', 52 road: true, 53 visible: true 54 }); 55 56 // Register 2D layer to LayerManager 57 if (layer2D && this.layerManager) { 58 this.layerManager.registerLayer('2d', 'road', layer2D, { 59 visible: true, 60 group: 'road' 61 }); 62 } 63 64 // Draw on 3D - TEK SOURCE Ä°LE TÃM ROADS 65 if (this.mapboxRenderer) { 66 try { 67 // TEK SOURCE: roads için tüm road'ları birleÅtir 68 this.drawAllRoadsWithSingleSource(roadGeoJSON); 69 70 // Grup kaydını da ekle 71 if (this.layerManager) { 72 this.layerManager.registerLayerGroup('3d', 'road', null, { visible: true }); 73 // Ayrıca tekil katmanları da kaydet 74 this.layerManager.registerLayer('3d', 'roads', null, { 75 visible: true, 76 group: 'road' 77 }); 78 } 79 } catch (error) { 80 } 81 } 82 } else { 83 } 84 85 // Draw waterways 86 if (clippedDict.clipped_waterway) { 87 // Drawing waterways 88 89 // Convert LineString features to GeoJSON FeatureCollection 90 const waterwayFeatures = clippedDict.clipped_waterway.map(waterway => { 91 // Koordinat sırasını deÄiÅtir: [lat, lon] â [lon, lat] 92 const coordsLngLat = waterway.coordinates.map(coord => [coord[1], coord[0]]); 93 return { 94 type: 'Feature', 95 geometry: { 96 type: waterway.type, 97 coordinates: coordsLngLat 98 }, 99 properties: { fclass: waterway.fclass || 'waterway' } 100 }; 101 }); 102 103 const waterwayGeoJSON = { 104 type: 'FeatureCollection', 105 features: waterwayFeatures 106 }; 107 // Cache waterways geojson for 3D restore 108 this.lastWaterwaysGeoJSON = waterwayGeoJSON; 109 110 // Draw on 2D - LineString için özel çizim 111 const layer2D = this.leafletRenderer.drawLineStringsFromGeoJSON('waterway', waterwayGeoJSON, { 112 color: "#40E0D0", 113 weight: 10, 114 group: 'waterway', 115 waterway: true, 116 visible: true 117 }); 118 119 // Register 2D layer to LayerManager 120 if (layer2D && this.layerManager) { 121 this.layerManager.registerLayer('2d', 'waterway', layer2D, { 122 visible: true, 123 group: 'waterway' 124 }); 125 } 126 127 // Draw on 3D - TEK SOURCE Ä°LE TÃM WATERWAYS 128 if (this.mapboxRenderer) { 129 try { 130 // TEK SOURCE: waterways için tüm waterway'leri birleÅtir 131 this.drawAllWaterwaysWithSingleSource(waterwayGeoJSON); 132 133 // Grup kaydını da ekle 134 if (this.layerManager) { 135 this.layerManager.registerLayerGroup('3d', 'waterway', null, { visible: true });
136 // Ayrıca tekil katmanları da kaydet 137 this.layerManager.registerLayer('3d', 'waterways', null, { 138 visible: true, 139 group: 'waterway' 140 }); 141 } 142 } catch (error) { 143 } 144 } 145 } else { 146 } 147 148 // Draw electric lines 149 if (clippedDict.clipped_electric && Array.isArray(clippedDict.clipped_electric) && clippedDict.clipped_electric.length > 0) { 150 151 // Convert electric features to GeoJSON 152 const electricFeatures = clippedDict.clipped_electric.map((electric, index) => { 153 const coordsLngLat = electric.coordinates.map(coord => [coord[1], coord[0]]); 154 return { 155 type: 'Feature', 156 geometry: { 157 type: electric.type || 'LineString', 158 coordinates: coordsLngLat 159 }, 160 properties: { 161 fclass: 'electric', 162 id: index, 163 group: 'electric' 164 } 165 }; 166 }); 167 168 const electricGeoJSON = { 169 type: 'FeatureCollection', 170 features: electricFeatures 171 }; 172 173 // Draw on 2D 174 const layer2D = this.leafletRenderer.drawLineStringsFromGeoJSON('electric', electricGeoJSON, { 175 color: "#FFD700", 176 weight: 3, 177 group: 'electric', 178 electric: true, 179 visible: true 180 }); 181 182 // Register 2D layer to LayerManager 183 if (layer2D && this.layerManager) { 184 this.layerManager.registerLayer('2d', 'electric', layer2D, { 185 visible: true, 186 group: 'electric' 187 }); 188 } 189 190 // Draw on 3D 191 if (this.mapboxRenderer) { 192 try { 193 this.mapboxRenderer.drawLineStringsFromGeoJSON('electric', electricGeoJSON, { 194 color: "#FFD700", 195 weight: 3, 196 group: 'electric', 197 visible: true 198 }); 199 200 if (this.layerManager) { 201 this.layerManager.registerLayerGroup('3d', 'electric', null, { visible: true }); 202 } 203 } catch (error) { 204 } 205 } 206 } 207 208 // Draw water polygons 209 if (clippedDict.clipped_water && Array.isArray(clippedDict.clipped_water) && clippedDict.clipped_water.length > 0) { 210 211 // Convert water features to GeoJSON 212 const waterFeatures = clippedDict.clipped_water.map((water, index) => { 213 const coordsLngLat = water.coordinates.map(coord => [coord[1], coord[0]]); 214 return { 215 type: 'Feature', 216 geometry: { 217 type: water.type || 'Polygon', 218 coordinates: [coordsLngLat] 219 }, 220 properties: { 221 fclass: 'water', 222 id: index, 223 group: 'water' 224 } 225 }; 226 }); 227 228 const waterGeoJSON = { 229 type: 'FeatureCollection', 230 features: waterFeatures 231 }; 232 233 // Draw on 2D 234 const layer2D = this.leafletRenderer.drawPolygonsFromGeoJSON('water', waterGeoJSON, { 235 color: "#2196F3", 236 weight: 2, 237 fillColor: "#2196F3", 238 fillOpacity: 0.3, 239 group: 'water', 240 water: true, 241 visible: true 242 }); 243 244 // Register 2D layer to LayerManager 245 if (layer2D && this.layerManager) { 246 this.layerManager.registerLayer('2d', 'water', layer2D, { 247 visible: true, 248 group: 'water' 249 }); 250 } 251 252 // Draw on 3D 253 if (this.mapboxRenderer) { 254 try { 255 this.mapboxRenderer.drawPolygonsFromGeoJSON('water', waterGeoJSON, { 256 color: "#2196F3", 257 weight: 2, 258 fillColor: "#2196F3", 259 fillOpacity: 0.3, 260 group: 'water', 261 visible: true 262 }); 263 264 if (this.layerManager) { 265 this.layerManager.registerLayerGroup('3d', 'water', null, { visible: true });
266 } 267 } catch (error) { 268 } 269 } 270 } 271 272 // Draw water bodies - TEK SOURCE Ä°LE 273 if (clippedDict.water) { 274 // Draw on 2D (KALDIRILDI - Sadece 3D'de görünecek) 275 // 2D'de su kütlesi çizimi yapılmıyor 276 277 // Draw on 3D - TEK SOURCE Ä°LE TÃM WATER BODIES 278 if (this.mapboxRenderer) { 279 try { 280 this.drawAllWaterWithSingleSource(clippedDict.water); 281 282 // Grup kaydını da ekle 283 if (this.layerManager) { 284 this.layerManager.registerLayerGroup('3d', 'water', null, { visible: true }); 285 } 286 } catch (error) { 287 } 288 } 289 } 290 291 // Draw electric lines 292 if (clippedDict.clipped_electric) { 293 // Drawing electric lines 294 295 // Draw on 2D (KALDIRILDI - Sadece 3D'de görünecek) 296 // 2D'de elektrik çizimi yapılmıyor 297 298 // Draw on 3D - TEK SOURCE Ä°LE TÃM ELECTRIC LINES 299 if (this.mapboxRenderer && Array.isArray(clippedDict.clipped_electric) && clippedDict.clipped_electric.length > 0) { 300 301 try { 302 // Electric lines için GeoJSON oluÅtur 303 const electricFeatures = clippedDict.clipped_electric.map((electricLine, index) => { 304 if (electricLine.type === 'LineString') { 305 const coordsLngLat = electricLine.coordinates.map(coord => this.coordinateUtils.toLngLat(coord)); 306 return { 307 type: 'Feature', 308 geometry: { 309 type: 'LineString', 310 coordinates: coordsLngLat 311 }, 312 properties: { 313 id: index, 314 type: 'electric_line' 315 } 316 }; 317 } 318 return null; 319 }).filter(f => f !== null); 320 321 const electricGeoJSON = { 322 type: 'FeatureCollection', 323 features: electricFeatures 324 }; 325 326 // TEK SOURCE: electric için tüm hatları birleÅtir 327 this.drawAllElectricWithSingleSource(electricGeoJSON); 328 329 // Grup kaydını da ekle 330 if (this.layerManager) { 331 this.layerManager.registerLayerGroup('3d', 'electric', null, { visible: false }); // BaÅlangıçta gizli 332 } 333 334 } catch (error) { 335 } 336 } else { 337 // MapboxRenderer not available 338 // 3D map yüklenene kadar bekle 339 const map3d = this.mapManager.getMap('3d'); 340 if (map3d && !map3d.isStyleLoaded()) { 341 map3d.once('style.load', () => { 342 if (this.mapboxRenderer && Array.isArray(clippedDict.clipped_electric) && clippedDict.clipped_electric.length > 0) { 343 // Electric çizimini tekrar dene 344 const electricFeatures = clippedDict.clipped_electric.map((electricLine, index) => { 345 if (electricLine.type === 'LineString') { 346 const coordsLngLat = electricLine.coordinates.map(coord => this.coordinateUtils.toLngLat(coord)); 347 return { 348 type: 'Feature', 349 geometry: { type: 'LineString', coordinates: coordsLngLat }, 350 properties: { id: index, type: 'electric_line' } 351 }; 352 } 353 return null; 354 }).filter(f => f !== null); 355 356 this.drawAllElectricWithSingleSource({ 357 type: 'FeatureCollection', 358 features: electricFeatures 359 }); 360 } 361 }); 362 } 363 } 364 } else { 365 } 366
367 // Clipped features drawn successfully 368 } catch (error) { 369 } 370 }, 371 372 /** 373 * Draw all roads with single source (no more src-road-0, src-road-1...) 374 */ 375 drawAllRoadsWithSingleSource(roadGeoJSON) { 376 // Drawing all roads with single source 377 378 const map3d = this.mapManager.getMap('3d'); 379 if (!map3d) { 380 return; 381 } 382 // Stil henüz hazır deÄil hatası olursa tekrar dene (timeout ile) 383 384 // Style kontrolünü atla - boÅ style bile çizim yapabilir 385 // Roads çizimi baÅlıyor 386 387 try { 388 const sourceId = 'src-roads'; // TEK SOURCE 389 const layerId = 'roads'; // TEK LAYER 390 391 // Eski roads source/layer'ları temizle 392 // Test kodu approach: Source varsa güncelle, yoksa ekle 393 if (map3d.getSource(sourceId)) { 394 map3d.getSource(sourceId).setData(roadGeoJSON); 395 } else { 396 map3d.addSource(sourceId, { 397 type: 'geojson', 398 data: roadGeoJSON 399 }); 400 } 401 402 // Layer yoksa ekle (test kodu approach) 403 if (!map3d.getLayer(layerId)) { 404 // Test kodu gibi beforeLayer bulma 405 const beforeLayer = (map3d.getStyle().layers || []).find(l => l.type === 'symbol')?.id; 406 407 map3d.addLayer({ 408 id: layerId, 409 type: 'line', 410 source: sourceId, 411 paint: { 412 'line-color': '#FF0000', // Kırmızı 413 'line-width': 4, 414 'line-opacity': 1 415 }, 416 layout: { 417 'line-cap': 'round', 418 'line-join': 'round' 419 } 420 }, beforeLayer); 421 } 422 423 // Single roads layer added successfully 424 425 // LayerManager'a kaydet 426 if (this.layerManager) { 427 this.layerManager.registerLayer('3d', layerId, null, { 428 visible: true, 429 group: 'road', 430 sourceId: sourceId 431 }); 432 // Grup görünürlüÄünü açık tut 433 try { this.layerManager.registerLayerGroup('3d', 'road', null, { visible: true }); } catch {} 434 try { this.layerManager.setLayerGroupVisibility('3d', 'road', true); } catch {} 435 try { this.layerManager.setLayerVisibility('3d', layerId, true); } catch {} 436 } 437 438 // UI: road butonunu aktif göster 439 440 441 return { sourceId, layerId }; 442 443 } catch (error) { 444 // Style not ready ise kısa gecikmeyle tekrar dene 445 try { 446 if (!map3d.isStyleLoaded || !map3d.isStyleLoaded()) { 447 setTimeout(() => { 448 try { this.drawAllRoadsWithSingleSource(roadGeoJSON); } catch {} 449 }, 250); 450 } 451 } catch {} 452 return null; 453 } 454 }, 455 456 /** 457 * Draw all waterways with single source (no more src-waterway-0, src-waterway-1...) 458 */ 459 drawAllWaterwaysWithSingleSource(waterwayGeoJSON) { 460 // Drawing all waterways with single source 461 462 const map3d = this.mapManager.getMap('3d'); 463 if (!map3d) { 464 return; 465 } 466 // Stil hazır deÄil hatası olursa timeout ile tekrar dene 467 468 // Style kontrolünü atla - boÅ style bile çizim yapabilir 469 // Waterways çizimi baÅlıyor 470 471 try { 472 const sourceId = 'src-waterways'; // TEK SOURCE 473 const layerId = 'waterways'; // TEK LAYER 474 475 // Eski waterways source/layer'ları temizle 476 if (map3d.getLayer(layerId)) map3d.removeLayer(layerId);
477 if (map3d.getSource(sourceId)) map3d.removeSource(sourceId); 478 479 // Tek source ekle 480 map3d.addSource(sourceId, { 481 type: 'geojson', 482 data: waterwayGeoJSON 483 }); 484 485 // Tek layer ekle - label'ların altına ekle 486 const beforeLayer = map3d.getLayer('road-label') ? 'road-label' : 487 map3d.getLayer('place-label') ? 'place-label' : undefined; 488 489 map3d.addLayer({ 490 id: layerId, 491 type: 'line', 492 source: sourceId, 493 paint: { 494 'line-color': '#40E0D0', // Turkuaz 495 'line-width': 20, 496 'line-opacity': 1 497 }, 498 layout: { 499 'line-cap': 'round', 500 'line-join': 'round' 501 } 502 }, beforeLayer); 503 504 // Single waterways layer added successfully 505 506 // LayerManager'a kaydet 507 if (this.layerManager) { 508 this.layerManager.registerLayer('3d', layerId, null, { 509 visible: true, 510 group: 'waterway', 511 sourceId: sourceId 512 }); 513 // Grup görünürlüÄünü açık tut 514 try { this.layerManager.registerLayerGroup('3d', 'waterway', null, { visible: true }); } catch {} 515 try { this.layerManager.setLayerGroupVisibility('3d', 'waterway', true); } catch {} 516 try { this.layerManager.setLayerVisibility('3d', layerId, true); } catch {} 517 } 518 519 // UI: waterway butonunu aktif göster 520 521 522 return { sourceId, layerId }; 523 524 } catch (error) { 525 try { 526 if (!map3d.isStyleLoaded || !map3d.isStyleLoaded()) { 527 setTimeout(() => { 528 try { this.drawAllWaterwaysWithSingleSource(waterwayGeoJSON); } catch {} 529 }, 250); 530 } 531 } catch {} 532 return null; 533 } 534 }, 535 536 /** 537 * Draw all electric lines with single source (no more src-electric-0, src-electric-1...) 538 */ 539 drawAllElectricWithSingleSource(electricGeoJSON) { 540 541 const map3d = this.mapManager.getMap('3d'); 542 if (!map3d) { 543 return; 544 } 545 546 // Style kontrolünü atla - boÅ style bile çizim yapabilir 547 548 try { 549 const sourceId = 'src-electric'; // TEK SOURCE 550 const layerId = 'electric'; // TEK LAYER 551 552 // Eski electric source/layer'ları temizle 553 if (map3d.getLayer(layerId)) map3d.removeLayer(layerId); 554 if (map3d.getSource(sourceId)) map3d.removeSource(sourceId); 555 556 // Tek source ekle 557 map3d.addSource(sourceId, { 558 type: 'geojson', 559 data: electricGeoJSON 560 }); 561 562 // Tek layer ekle - label'ların altına ekle 563 const beforeLayer = map3d.getLayer('road-label') ? 'road-label' : 564 map3d.getLayer('place-label') ? 'place-label' : undefined; 565 566 map3d.addLayer({ 567 id: layerId, 568 type: 'line', 569 source: sourceId, 570 paint: { 571 'line-color': '#FFD700', // Altın sarısı 572 'line-width': 8, 573 'line-opacity': 1 574 }, 575 layout: { 576 'line-cap': 'round', 577 'line-join': 'round', 578 'visibility': 'none' // BaÅlangıçta gizli - buton aktif olana kadar görünmeyecek 579 } 580 }, beforeLayer); 581 582 583 // LayerManager'a kaydet 584 if (this.layerManager) { 585 this.layerManager.registerLayer('3d', layerId, null, { 586 visible: false, // BaÅlangıçta gizli - buton aktif olana kadar görünmeyecek 587 group: 'electric', 588 sourceId: sourceId 589 }); 590 } 591 592 return { sourceId, layerId }; 593 594 } catch (error) { 595 return null; 596 } 597 }, 598 599 /** 600 * Draw all water bodies with single source 601 */ 602 drawAllWaterWithSingleSource(waterData) { 603 604 const map3d = this.mapManager.getMap('3d'); 605 if (!map3d) { 606 return; 607 } 608 609 try { 610 const sourceId = 'src-water'; // TEK SOURCE 611 const layerId = 'water'; // TEK LAYER 612 613 // Eski water source/layer'ları temizle 614 if (map3d.getLayer(layerId)) map3d.removeLayer(layerId);
615 if (map3d.getSource(sourceId)) map3d.removeSource(sourceId); 616 617 // Water data'yı GeoJSON'a dönüÅtür 618 const waterGeoJSON = { 619 type: 'FeatureCollection', 620 features: Array.isArray(waterData) ? waterData.map((water, index) => ({ 621 type: 'Feature', 622 geometry: water, 623 properties: { 624 id: index, 625 type: 'water_body' 626 } 627 })) : [] 628 }; 629 630 // Tek source ekle 631 map3d.addSource(sourceId, { 632 type: 'geojson', 633 data: waterGeoJSON 634 }); 635 636 // Layer ekleme sırası belirleme 637 const beforeLayer = map3d.getLayer('road-label') ? 'road-label' : 638 map3d.getLayer('place-label') ? 'place-label' : undefined; 639 640 // Tek layer ekle (fill type for polygons) 641 map3d.addLayer({ 642 id: layerId, 643 type: 'fill', 644 source: sourceId, 645 paint: { 646 'fill-color': '#2196F3', 647 'fill-opacity': 0.3 648 } 649 }, beforeLayer); 650 651 // Outline layer da ekle 652 map3d.addLayer({ 653 id: `${layerId}-outline`, 654 type: 'line', 655 source: sourceId, 656 paint: { 657 'line-color': '#2196F3', 658 'line-width': 2, 659 'line-opacity': 1 660 } 661 }, beforeLayer); 662 663 664 // LayerManager'a kaydet 665 if (this.layerManager) { 666 this.layerManager.registerLayer('3d', layerId, null, { 667 visible: true, 668 group: 'water', 669 sourceId: sourceId 670 }); 671 this.layerManager.registerLayer('3d', `${layerId}-outline`, null, { 672 visible: true, 673 group: 'water', 674 sourceId: sourceId 675 }); 676 } 677 678 return { sourceId, layerId }; 679 680 } catch (error) { 681 return null; 682 } 683 } 684 }; 685}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.