Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[pml-881]- feat: add bringToFront and hatchPattern #7

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[pml-881]- feat: add bringToFront and hatchPattern #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions components/map/HatchPattern.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<template>
<svg width="0" height="0">
<defs>
<pattern id="hatchPattern" width="4" height="4" patternUnits="userSpaceOnUse">
<rect width="4" height="4" :fill="color" opacity="0.1" /> <!-- Fond bleu -->
<path d="M0,4 l4,-4 M-1,1 l2,-2 M3,5 l2,-2" style="stroke:white; stroke-width:1; fill:none;" />
</pattern>
<pattern id="dotPattern" width="4" height="4" patternUnits="userSpaceOnUse">
<rect width="8" height="8" :fill="color" /> <!-- Fond dynamique -->
<circle cx="4" cy="4" r="2" style="stroke:none; fill:white;" /> <!-- Cercle plus grand -->
</pattern>
</defs>
</svg>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import {Prop, Watch} from "vue-property-decorator";

@Component
export default class HatchPattern extends Vue {
@Prop({ type: String, default: "blue" }) protected color!: string;
}
</script>
25 changes: 24 additions & 1 deletion components/map/Map.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<template>
<div :id="id" class="csm-map">
<div v-for="dataLayer in data" :key="dataLayer.id">
<div v-for="(object, index) in dataLayer.objects" :key="index">
<div v-if="object.options.style.fillColor !== ''">
<hatch-pattern :color="object.options.style.color"></hatch-pattern>
</div>
</div>
</div>
<l-map
ref="myMap"
:zoom="zoom"
Expand Down Expand Up @@ -77,7 +84,7 @@
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import L, { GeoJSONOptions } from "leaflet";
import L, { GeoJSONOptions, Path } from "leaflet";
import { LMap, LTileLayer, LControlLayers, LMarker, LControlZoom, LLayerGroup, LGeoJson, LPopup } from "vue2-leaflet";
import { GeoSearchControl, OpenStreetMapProvider } from "leaflet-geosearch";
import "leaflet-fullscreen";
Expand All @@ -99,6 +106,7 @@ import Sidebar from "./Sidebar.vue";
import Constants from "../../utils/Constants";
import "../../assets/css/map.scss";
import Marker from "../../utils/Marker";
import hatchPattern from "./HatchPattern.vue";

interface Size {
height: number;
Expand Down Expand Up @@ -233,6 +241,7 @@ const components = {
LGeoJson,
LPopup,
Sidebar,
hatchPattern,
};

@Component({ components })
Expand Down Expand Up @@ -405,6 +414,7 @@ export default class Map extends Vue {
L.DomUtil.addClass(this.map.getContainer(), `${this.cursor}-cursor`);
}
});
console.log(this.data);
}

protected updated(): void {
Expand Down Expand Up @@ -548,6 +558,7 @@ export default class Map extends Vue {
defaultLatLng: L.LatLng,
dataLayerId: string
) {
console.log(dataLayerId, representation, defaultLatLng);
this.openPopUp(representation, defaultLatLng);
const mapObjectEvent: CsmMapObjectEvent = {
representation,
Expand All @@ -570,6 +581,18 @@ export default class Map extends Vue {
this.$emit("object-right-click", mapObjectEvent);
}

protected bringToFront(dataLayerId: string) {
// Récupérer la couche LayerGroup
const layerGroup = this.overlayLayers[dataLayerId] as L.LayerGroup;
if (layerGroup) {
layerGroup.eachLayer((layer: L.Layer) => {
if ((layer as Path).bringToFront) {
(layer as Path).bringToFront();
}
});
}
}

protected openPopUp(representation: CsmMarker | CsmGeoJson, defaultLatLng: L.LatLng ) {
if (null === _.get(representation, "popupData", null)) {
return;
Expand Down
6 changes: 4 additions & 2 deletions utils/GeoJson.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,12 @@ export default class GeoJson {
opacity: number = 1,
type: GeometryType = "Polygon",
weight: number = 1,
dashArray: string = "",
fillColor: string = '',
fillOpacity: number = 1,
): CsmGeoJson {

const options: GeoJSONOptions = {
style: { color, opacity, weight },
style: { color, opacity, weight, dashArray, fillColor, fillOpacity},
};

const geoJson: Feature<Polygon | MultiPolygon | null> = {
Expand Down