vue-geojson-view-ts 1.3.20 → 1.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue-geojson-view-ts.js +8982 -8977
- package/dist/vue-geojson-view-ts.umd.cjs +20 -20
- package/package.json +1 -1
- package/src/components/MapView.vue +93 -83
package/package.json
CHANGED
|
@@ -497,48 +497,51 @@ export default defineComponent({
|
|
|
497
497
|
Array.isArray(feature.properties.coordProperties)
|
|
498
498
|
? feature.properties.coordProperties
|
|
499
499
|
: [];
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
let
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
Math.
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
500
|
+
// Only render per-vertex markers/arrows when coordProperties exist and are non-empty
|
|
501
|
+
if (Array.isArray(coordProps) && coordProps.length) {
|
|
502
|
+
for (let i = 0; i < coords.length; i++) {
|
|
503
|
+
// Unificar círculo y flecha en un solo divIcon
|
|
504
|
+
let iconHtml =
|
|
505
|
+
'<div style="display:flex;align-items:center;justify-content:center;width:14px;height:14px;">';
|
|
506
|
+
// Círculo azul con padding, envuelve el SVG
|
|
507
|
+
let arrowSvg = "";
|
|
508
|
+
if (
|
|
509
|
+
i < coords.length - 1 &&
|
|
510
|
+
coordProps[i] &&
|
|
511
|
+
coordProps[i + 1] &&
|
|
512
|
+
coordProps[i].fecha &&
|
|
513
|
+
coordProps[i + 1].fecha &&
|
|
514
|
+
new Date(coordProps[i + 1].fecha) >
|
|
515
|
+
new Date(coordProps[i].fecha)
|
|
516
|
+
) {
|
|
517
|
+
// Calcular ángulo (bearing)
|
|
518
|
+
const toRad = (deg: number) => (deg * Math.PI) / 180;
|
|
519
|
+
const toDeg = (rad: number) => (rad * 180) / Math.PI;
|
|
520
|
+
const lat1 = toRad(coords[i][1]);
|
|
521
|
+
const lat2 = toRad(coords[i + 1][1]);
|
|
522
|
+
const dLon = toRad(coords[i + 1][0] - coords[i][0]);
|
|
523
|
+
const y = Math.sin(dLon) * Math.cos(lat2);
|
|
524
|
+
const x =
|
|
525
|
+
Math.cos(lat1) * Math.sin(lat2) -
|
|
526
|
+
Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
|
|
527
|
+
let brng = Math.atan2(y, x);
|
|
528
|
+
brng = toDeg(brng);
|
|
529
|
+
const angle = (brng + 360) % 360;
|
|
530
|
+
arrowSvg = `<svg width="10" height="10" viewBox="0 0 22 22" style="display:block;transform:rotate(${angle}deg);"><polygon points="11,3 15,17 11,14 7,17" fill="#fff" stroke="#fff" stroke-width="1.5"/></svg>`;
|
|
531
|
+
}
|
|
532
|
+
iconHtml += `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
|
|
533
|
+
iconHtml += "</div>";
|
|
534
|
+
const marker = L.marker([coords[i][1], coords[i][0]], {
|
|
535
|
+
icon: L.divIcon({
|
|
536
|
+
className: "",
|
|
537
|
+
html: iconHtml,
|
|
538
|
+
iconSize: [14, 14],
|
|
539
|
+
iconAnchor: [7, 7],
|
|
540
|
+
}),
|
|
541
|
+
zIndexOffset: -100,
|
|
542
|
+
});
|
|
543
|
+
marker.addTo(featureGroup);
|
|
529
544
|
}
|
|
530
|
-
iconHtml += `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
|
|
531
|
-
iconHtml += "</div>";
|
|
532
|
-
const marker = L.marker([coords[i][1], coords[i][0]], {
|
|
533
|
-
icon: L.divIcon({
|
|
534
|
-
className: "",
|
|
535
|
-
html: iconHtml,
|
|
536
|
-
iconSize: [14, 14],
|
|
537
|
-
iconAnchor: [7, 7],
|
|
538
|
-
}),
|
|
539
|
-
zIndexOffset: -100,
|
|
540
|
-
});
|
|
541
|
-
marker.addTo(featureGroup);
|
|
542
545
|
}
|
|
543
546
|
}
|
|
544
547
|
}
|
|
@@ -593,47 +596,50 @@ export default defineComponent({
|
|
|
593
596
|
Array.isArray(item.properties.coordProperties)
|
|
594
597
|
? item.properties.coordProperties
|
|
595
598
|
: [];
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
let
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
Math.
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
599
|
+
// Only render per-vertex markers/arrows when coordProperties exist and are non-empty
|
|
600
|
+
if (Array.isArray(coordProps) && coordProps.length) {
|
|
601
|
+
for (let i = 0; i < coords.length; i++) {
|
|
602
|
+
// Unificar círculo y flecha en un solo divIcon
|
|
603
|
+
let iconHtml =
|
|
604
|
+
'<div style="display:flex;align-items:center;justify-content:center;width:14px;height:14px;">';
|
|
605
|
+
// Círculo azul con padding, envuelve el SVG
|
|
606
|
+
let arrowSvg = "";
|
|
607
|
+
if (
|
|
608
|
+
i < coords.length - 1 &&
|
|
609
|
+
coordProps[i] &&
|
|
610
|
+
coordProps[i + 1] &&
|
|
611
|
+
coordProps[i].fecha &&
|
|
612
|
+
coordProps[i + 1].fecha &&
|
|
613
|
+
new Date(coordProps[i + 1].fecha) >
|
|
614
|
+
new Date(coordProps[i].fecha)
|
|
615
|
+
) {
|
|
616
|
+
// Calcular ángulo (bearing)
|
|
617
|
+
const toRad = (deg: number) => (deg * Math.PI) / 180;
|
|
618
|
+
const toDeg = (rad: number) => (rad * 180) / Math.PI;
|
|
619
|
+
const lat1 = toRad(coords[i][1]);
|
|
620
|
+
const lat2 = toRad(coords[i + 1][1]);
|
|
621
|
+
const dLon = toRad(coords[i + 1][0] - coords[i][0]);
|
|
622
|
+
const y = Math.sin(dLon) * Math.cos(lat2);
|
|
623
|
+
const x =
|
|
624
|
+
Math.cos(lat1) * Math.sin(lat2) -
|
|
625
|
+
Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
|
|
626
|
+
let brng = Math.atan2(y, x);
|
|
627
|
+
brng = toDeg(brng);
|
|
628
|
+
const angle = (brng + 360) % 360;
|
|
629
|
+
arrowSvg = `<svg width="10" height="10" viewBox="0 0 22 22" style="display:block;transform:rotate(${angle}deg);"><polygon points="11,3 15,17 11,14 7,17" fill="#fff" stroke="#fff" stroke-width="1.5"/></svg>`;
|
|
630
|
+
}
|
|
631
|
+
iconHtml += `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1.5px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
|
|
632
|
+
iconHtml += "</div>";
|
|
633
|
+
const marker = L.marker([coords[i][1], coords[i][0]], {
|
|
634
|
+
icon: L.divIcon({
|
|
635
|
+
className: "",
|
|
636
|
+
html: iconHtml,
|
|
637
|
+
iconSize: [14, 14],
|
|
638
|
+
iconAnchor: [7, 7],
|
|
639
|
+
}),
|
|
640
|
+
});
|
|
641
|
+
marker.addTo(featureGroup);
|
|
625
642
|
}
|
|
626
|
-
iconHtml += `<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1.5px;width:8px;height:8px;display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
|
|
627
|
-
iconHtml += "</div>";
|
|
628
|
-
const marker = L.marker([coords[i][1], coords[i][0]], {
|
|
629
|
-
icon: L.divIcon({
|
|
630
|
-
className: "",
|
|
631
|
-
html: iconHtml,
|
|
632
|
-
iconSize: [14, 14],
|
|
633
|
-
iconAnchor: [7, 7],
|
|
634
|
-
}),
|
|
635
|
-
});
|
|
636
|
-
marker.addTo(featureGroup);
|
|
637
643
|
}
|
|
638
644
|
}
|
|
639
645
|
}
|
|
@@ -952,7 +958,11 @@ export default defineComponent({
|
|
|
952
958
|
// Seleccionar el icono de referencia según el tipo (1 -> Destino, else -> LLegadaSalida)
|
|
953
959
|
const tipo = props.tipo;
|
|
954
960
|
const referenciaIcon =
|
|
955
|
-
tipo ===
|
|
961
|
+
tipo === 0
|
|
962
|
+
? origenIconUrl
|
|
963
|
+
: tipo === 1
|
|
964
|
+
? destinoIconUrl
|
|
965
|
+
: llegadaIconUrl;
|
|
956
966
|
|
|
957
967
|
// Construir HTML del popup con mejor UI para la imagen
|
|
958
968
|
// Contenedor externo controla el ancho; el popup tiene su propia clase para limitar altura
|
|
@@ -965,7 +975,7 @@ export default defineComponent({
|
|
|
965
975
|
// Icono de referencia a la izquierda de la descripción
|
|
966
976
|
html += `<div style="display:flex;align-items:center;gap:8px;padding-top:6px;">`;
|
|
967
977
|
if (referenciaIcon) {
|
|
968
|
-
html += `<img src="${referenciaIcon}" style="width:
|
|
978
|
+
html += `<img src="${referenciaIcon}" style="width:30px;height:30px;flex:0 0 15px;"/>`;
|
|
969
979
|
}
|
|
970
980
|
if (fechaFormateada) {
|
|
971
981
|
html += `<div style="font-size:14px;"><b>${descripcion}:</b> ${fechaFormateada}</div>`;
|