vue-geojson-view-ts 1.3.21 → 1.3.22
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/components/MapView.vue.d.ts +22 -0
- package/dist/vue-geojson-view-ts.js +751 -741
- package/dist/vue-geojson-view-ts.umd.cjs +12 -12
- package/package.json +1 -1
- package/src/components/MapView.vue +24 -15
package/package.json
CHANGED
|
@@ -70,6 +70,8 @@ export default defineComponent({
|
|
|
70
70
|
getCoodMarker: { type: Function, required: false },
|
|
71
71
|
getGeoJSON: { type: Function, required: false },
|
|
72
72
|
loadPolygon: { type: Boolean, required: false },
|
|
73
|
+
markerCircleSize: { type: Number, required: false, default: 14 }, // px
|
|
74
|
+
markerSvgSize: { type: Number, required: false, default: 10 }, // px
|
|
73
75
|
},
|
|
74
76
|
data() {
|
|
75
77
|
return {
|
|
@@ -501,8 +503,9 @@ export default defineComponent({
|
|
|
501
503
|
if (Array.isArray(coordProps) && coordProps.length) {
|
|
502
504
|
for (let i = 0; i < coords.length; i++) {
|
|
503
505
|
// Unificar círculo y flecha en un solo divIcon
|
|
504
|
-
|
|
505
|
-
|
|
506
|
+
const circleSize = this.markerCircleSize || 14;
|
|
507
|
+
const svgSize = this.markerSvgSize || 10;
|
|
508
|
+
let iconHtml = `<div style="display:flex;align-items:center;justify-content:center;width:${circleSize}px;height:${circleSize}px;">`;
|
|
506
509
|
// Círculo azul con padding, envuelve el SVG
|
|
507
510
|
let arrowSvg = "";
|
|
508
511
|
if (
|
|
@@ -527,16 +530,20 @@ export default defineComponent({
|
|
|
527
530
|
let brng = Math.atan2(y, x);
|
|
528
531
|
brng = toDeg(brng);
|
|
529
532
|
const angle = (brng + 360) % 360;
|
|
530
|
-
arrowSvg = `<svg width="
|
|
533
|
+
arrowSvg = `<svg width="${svgSize}" height="${svgSize}" 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"/></svg>`;
|
|
531
534
|
}
|
|
532
|
-
iconHtml +=
|
|
535
|
+
iconHtml +=
|
|
536
|
+
`<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1px;` +
|
|
537
|
+
`width:${circleSize - 6}px;` +
|
|
538
|
+
`height:${circleSize - 6}px;` +
|
|
539
|
+
`display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
|
|
533
540
|
iconHtml += "</div>";
|
|
534
541
|
const marker = L.marker([coords[i][1], coords[i][0]], {
|
|
535
542
|
icon: L.divIcon({
|
|
536
543
|
className: "",
|
|
537
544
|
html: iconHtml,
|
|
538
|
-
iconSize: [
|
|
539
|
-
iconAnchor: [
|
|
545
|
+
iconSize: [circleSize, circleSize],
|
|
546
|
+
iconAnchor: [circleSize / 2, circleSize / 2],
|
|
540
547
|
}),
|
|
541
548
|
zIndexOffset: -100,
|
|
542
549
|
});
|
|
@@ -599,10 +606,9 @@ export default defineComponent({
|
|
|
599
606
|
// Only render per-vertex markers/arrows when coordProperties exist and are non-empty
|
|
600
607
|
if (Array.isArray(coordProps) && coordProps.length) {
|
|
601
608
|
for (let i = 0; i < coords.length; i++) {
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
// Círculo azul con padding, envuelve el SVG
|
|
609
|
+
const circleSize = this.markerCircleSize || 14;
|
|
610
|
+
const svgSize = this.markerSvgSize || 10;
|
|
611
|
+
let iconHtml = `<div style="display:flex;align-items:center;justify-content:center;width:${circleSize}px;height:${circleSize}px;">`;
|
|
606
612
|
let arrowSvg = "";
|
|
607
613
|
if (
|
|
608
614
|
i < coords.length - 1 &&
|
|
@@ -613,7 +619,6 @@ export default defineComponent({
|
|
|
613
619
|
new Date(coordProps[i + 1].fecha) >
|
|
614
620
|
new Date(coordProps[i].fecha)
|
|
615
621
|
) {
|
|
616
|
-
// Calcular ángulo (bearing)
|
|
617
622
|
const toRad = (deg: number) => (deg * Math.PI) / 180;
|
|
618
623
|
const toDeg = (rad: number) => (rad * 180) / Math.PI;
|
|
619
624
|
const lat1 = toRad(coords[i][1]);
|
|
@@ -626,16 +631,20 @@ export default defineComponent({
|
|
|
626
631
|
let brng = Math.atan2(y, x);
|
|
627
632
|
brng = toDeg(brng);
|
|
628
633
|
const angle = (brng + 360) % 360;
|
|
629
|
-
arrowSvg = `<svg width="
|
|
634
|
+
arrowSvg = `<svg width="${svgSize}" height="${svgSize}" 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"/></svg>`;
|
|
630
635
|
}
|
|
631
|
-
iconHtml +=
|
|
636
|
+
iconHtml +=
|
|
637
|
+
`<div style="background:#2196F3;border-radius:50%;border:1px solid #fff;box-shadow:0 0 2px #000;padding:1.5px;` +
|
|
638
|
+
`width:${circleSize - 6}px;` +
|
|
639
|
+
`height:${circleSize - 6}px;` +
|
|
640
|
+
`display:flex;align-items:center;justify-content:center;">${arrowSvg}</div>`;
|
|
632
641
|
iconHtml += "</div>";
|
|
633
642
|
const marker = L.marker([coords[i][1], coords[i][0]], {
|
|
634
643
|
icon: L.divIcon({
|
|
635
644
|
className: "",
|
|
636
645
|
html: iconHtml,
|
|
637
|
-
iconSize: [
|
|
638
|
-
iconAnchor: [
|
|
646
|
+
iconSize: [circleSize, circleSize],
|
|
647
|
+
iconAnchor: [circleSize / 2, circleSize / 2],
|
|
639
648
|
}),
|
|
640
649
|
});
|
|
641
650
|
marker.addTo(featureGroup);
|