diff --git a/src/components/Map/VMap.global.vue b/src/components/Map/VMap.global.vue index b9586a2..039b579 100644 --- a/src/components/Map/VMap.global.vue +++ b/src/components/Map/VMap.global.vue @@ -87,7 +87,9 @@ const emit = defineEmits([ 'geojson:ready', 'geojson', 'add:layer', - 'draw:start' + 'draw:start', + 'edit:layer', + 'drag:layer' ]) let mapObject @@ -167,21 +169,25 @@ onMounted(() => { }) mapObject.on('pm:create', (e) => { - const fg = L.featureGroup() - - drawnItems.eachLayer((layer) => { - if ( - (layer instanceof L.Path || layer instanceof L.Marker) && - layer.pm - ) { - fg.addLayer(layer) - } - }) - - emit('geojson', fg.toGeoJSON()) + emit('geojson', getDrawItemsInGeoJson()) emit('add:layer', convertGeoJSONWithPointRadius(e.layer)) }) + /* drawnItems.on('pm:change', (e) => { + emit('geojson', getDrawItemsInGeoJson()) + emit('edit:layer', convertGeoJSONWithPointRadius(e.layer)) + }) */ + + drawnItems.on('pm:edit', (e) => { + emit('geojson', getDrawItemsInGeoJson()) + emit('edit:layer', convertGeoJSONWithPointRadius(e.layer)) + }) + + drawnItems.on('pm:drag', (e) => { + emit('geojson', getDrawItemsInGeoJson()) + emit('drag:layer', convertGeoJSONWithPointRadius(e.layer)) + }) + mapObject.on('pm:drawstart', (e) => { clearDrawLayers() emit('draw:start', e) @@ -192,6 +198,18 @@ onMounted(() => { initEvents() }) +function getDrawItemsInGeoJson() { + const fg = L.featureGroup() + + drawnItems.eachLayer((layer) => { + if ((layer instanceof L.Path || layer instanceof L.Marker) && layer.pm) { + fg.addLayer(layer) + } + }) + + return fg.toGeoJSON() +} + function clearDrawLayers() { drawnItems.clearLayers() } @@ -235,8 +253,7 @@ function setGeoJSON(geojson) { if (geojson) { L.geoJSON(geojson, { ...geojsonDefaultOptions, - ...props.geojsonOptions, - pmIgnore: true + ...props.geojsonOptions }).addTo(geoJSONGroup) const bounds = geoJSONGroup.getBounds() diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js index 1eaece8..07ac671 100644 --- a/src/components/Map/utils/geojsonOptions.js +++ b/src/components/Map/utils/geojsonOptions.js @@ -9,6 +9,14 @@ const TYPES = [ 'Georeference' ] +const DEFAULT_OPTIONS = { + allowEditing: false, + allowRemoval: false, + allowCutting: false, + allowRotation: false, + draggable: false +} + function getRelevantType(base) { const types = base.map((b) => b.type) @@ -37,13 +45,19 @@ export default { .join('')} ` + layer.pm.setOptions(DEFAULT_OPTIONS) + layer.pm.disable() + layer.bindPopup(label) }, pointToLayer: (feature, latLng) => { const type = getRelevantType(feature.properties.base) + const marker = L.marker(latLng, { icon: Icons[type] || Icon.Georeference }) + + marker.pm.setOptions(DEFAULT_OPTIONS) - return L.marker(latLng, { icon: Icons[type] || Icon.Georeference }) + return marker }, style: (feature) => { diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Search/OtuSearch.vue index 8528410..d0ff4f6 100644 --- a/src/modules/otus/components/Search/OtuSearch.vue +++ b/src/modules/otus/components/Search/OtuSearch.vue @@ -18,12 +18,10 @@ :disable-zoom="!!shapes" :zoom-bounds="6" :geojson="shapes" + @add:layer="setLayer" + @edit:layer="setLayer" + @drag:layer="setLayer" @draw:start="() => (geojson = {})" - @add:layer=" - ($event) => { - geoJson = JSON.stringify($event.geometry) - } - " :zoom="4" />