Front/src/components/MapView.vue - main - BELEGO/GIS_APPLICATION

Front/src/components/MapView.vue
657 строк21 KB
HACKER_LAPTOP
fix(Map3D/MapView/MapWithTable): починил Cesium при переключении 2D↔3D и rapid-кликах — Viewer теперь через shallowRef+markRaw (ушёл DataCloneError от Vue-Proxy), включил requestRenderMode с guard'ом против canvas 0×0 и ResizeObserver для отрисовки глобуса после layout, добавил токены и теги сущностей чтобы изображения и маски не оставались на карте после быстрых вкл/выкл, вынес панели управления (загрузка, надписи, картоснова, зум) в отдельную папку src/components/controls/ — теперь они не пропадают при смене режима и работают и в 2D и в 3D.
20 май 2026, 02:46
20 май 2026, 02:466fbb753
<template>
  <div style="position: relative; height: 100%;">
    <div id="map" class="map"></div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import {moveToFeature} from '../utils/mapUtils.js'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import Icon from 'ol/style/Icon'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import {Fill, Stroke, Style, Text} from 'ol/style'
import {fromLonLat, toLonLat} from 'ol/proj'
import XYZ from 'ol/source/XYZ'
import {applyMaskFromBlob, applyImageAsLayer, imageExists} from "../helper/square.js";
import {extractDateFromProductId} from "../helper/square.js";
import {redSquareStyle} from "../helper/square.js";
import {defaults as defaultControls} from 'ol/control'

const props = defineProps({
  features: Array,
  selectedFeatures: Array,
  maskSelected: Array,
  imageOpacity: Object,
  maskOpacity: Object,
  zIndexOrder: Object,
  showLabels: { type: Boolean, default: true }
})
const mapViewRef = ref(null)
const emit = defineEmits(['hoverFeature', 'update:cameraState', 'call-map', 'data-uploaded'])

// Базовый стиль для всех фич (серый, прозрачный фон)
const baseStyle = new Style({
  stroke: new Stroke({color: 'rgba(0, 0, 0, 0)', width: 0}),
  fill: new Fill({color: 'rgba(0, 0, 0, 0)'}),
  text: null,
})

// Стиль с красным выделением и текстом даты
const styleWithText = (feature) => {
  const productid = feature.get('productid') || ''
  const rawDate = productid.substring(17, 25) || ''

  let dateText = 'нет даты'
  if (rawDate.length === 8) {
    const year = rawDate.substring(0, 4)
    const month = rawDate.substring(4, 6)
    const day = rawDate.substring(6, 8)
    dateText = `Дата: ${day}-${month}-${year}`
  }

  return new Style({
    stroke: new Stroke({color: 'red', width: 2}),
    fill: new Fill({color: 'rgba(255, 0, 0, 0.2)'}),
    text: props.showLabels ? new Text({
      text: dateText,
      fill: new Fill({color: 'black'}),
      stroke: new Stroke({color: 'white', width: 2}),
      font: '16px Calibri,sans-serif',
      overflow: true,
    }) : null,
  })
}

const vectorSource = new VectorSource()
let map
let updateStylesToken = 0

defineExpose({
  moveToCoordinates,
  getMap,
  refreshImageForEntityId,
  refreshMaskForProductId
})


async function refreshImageForEntityId(entityId) {
  console.log(`[MapView] refreshImageForEntityId: ${entityId}`);
  const feature = vectorSource.getFeatureById(entityId);
  if (!feature) {
    console.warn(`Feature with entityId ${entityId} not found`);
    return;
  }

  const productId = feature.get('productid');
  const imageUrl = `/${productId}_merged.png?t=${Date.now()}`;
  console.log(`[MapView] Загружаем изображение: ${imageUrl}`);

  // 1. Удаляем старый слой изображения
  const oldLayer = feature.get('imageLayer');
  if (oldLayer) {
    map.removeLayer(oldLayer);
    feature.set('imageLayer', null);
  }

  // 2. Убираем красный квадрат
  feature.setStyle(baseStyle);

  // 3. Проверяем существование изображения
  const exists = await imageExists(imageUrl);

  if (exists) {
    console.log(`[MapView] Изображение найдено для ${entityId}`);

    // Автоматически создаем слой, даже если чекбокс не активен
    setTimeout(() => {
      applyImageAsLayer(map, feature, imageUrl);
      updateLayerZIndex();

      // Применяем прозрачность
      const opacity = props.imageOpacity?.[entityId];
      if (opacity !== undefined) {
        const layer = feature.get('imageLayer');
        if (layer) {
          layer.setOpacity(Number(opacity) / 100);
        }
      }

      console.log(`[MapView] Слой изображения создан для ${entityId}`);

      // Автоматически эмитим событие, чтобы активировать чекбокс в родительском компоненте
      if (!props.selectedFeatures.includes(String(entityId))) {
        console.log(`[MapView] Активируем чекбокс для ${entityId}`);
        // Эмитим событие для родителя
        emit('call-map', { type: 'activate-image', entityId });
      }

    }, 100);
  } else {
    console.warn(`[MapView] Изображение не найдено: ${imageUrl}`);
  }
}

async function refreshMaskForProductId(productId) {
  console.log(`[MapView] refreshMaskForProductId: ${productId}`);
  // Находим feature по productId
  const features = vectorSource.getFeatures();
  const feature = features.find(f => f.get('productid') === productId);
  if (!feature) {
    console.warn(`Feature with productId ${productId} not found`);
    return;
  }

  // Удаляем старый слой маски
  const oldMaskLayer = feature.get('maskLayer');
  if (oldMaskLayer) {
    map.removeLayer(oldMaskLayer);
    feature.set('maskLayer', null);
  }

  // Если чекбокс маски активен, создаем новый слой
  if (props.maskSelected.includes(productId)) {
    try {
      // Добавляем timestamp для предотвращения кэширования
      const maskUrl = `http://127.0.0.1:8000/get-mask/${productId}?t=${Date.now()}`;
      console.log(`[MapView] Загружаем маску: ${maskUrl}`);

      const response = await fetch(maskUrl);
      if (!response.ok) {
        console.warn(`Маска не найдена для ${productId}: ${response.status}`);
        return;
      }

      const blob = await response.blob();
      const maskLayer = await applyMaskFromBlob(map, feature, blob);
      feature.set('maskLayer', maskLayer);
      updateLayerZIndex();

      const opacity = props.maskOpacity?.[productId];
      if (opacity !== undefined) {
        maskLayer.setOpacity(Number(opacity) / 100);
      }

      console.log(`[MapView] Маска обновлена: ${productId}`);
    } catch (err) {
      console.error("Ошибка при загрузке маски для", productId, err);
    }
  }
}

// Новая функция перемещения на координаты
function moveToCoordinates(center) {
  if (!map || !center) return

  map.getView().animate({
    center: fromLonLat(center),
    zoom: 7,
    duration: 1500
  })
  console.log("Запуск функции moveToCoordinates для координат:", center)
}

function updateLayerZIndex() {
  const orders = props.zIndexOrder || {};
  console.log('[MapView] updateLayerZIndex с orders:', orders);

  // Сортируем записи по времени (чем новее, тем выше zIndex)
  const sortedEntries = Object.entries(orders)
      .sort((a, b) => b[1] - a[1]);

  console.log('[MapView] Сортированные записи:');
  sortedEntries.forEach(([id, timestamp], index) => {
    console.log(`  ${index}: "${id}" -> ${timestamp}`);
  });

  // Используем обратный порядок: первый элемент (самый новый) получает самый высокий zIndex
  // Чем меньше index, тем выше должен быть слой
  sortedEntries.forEach(([id, timestamp], index) => {
    // Вычисляем zIndex: чем меньше index (новее timestamp), тем больше zIndex
    const zIndexValue = 1000 - index; // или sortedEntries.length - index

    console.log(`[MapView] Устанавливаем zIndex для ${id} -> index: ${index}, zIndex: ${zIndexValue}`);

    // Ищем feature по всем возможным ID
    const features = vectorSource.getFeatures();

    for (const feature of features) {
      const entityId = String(feature.getId());
      const productId = feature.get('productid');

      // Проверяем по entityId (изображение)
      if (entityId === String(id) || entityId === String(Number(id))) {
        const layer = feature.get('imageLayer');
        if (layer) {
          layer.setZIndex(zIndexValue);
          console.log(`  [ZIndex] Изображение "${id}" -> zIndex: ${zIndexValue}`);
        }
      }
      // Проверяем по productId (маска)
      else if (productId && String(productId) === String(id)) {
        const layer = feature.get('maskLayer');
        if (layer) {
          layer.setZIndex(zIndexValue);
          console.log(`  [ZIndex] Маска "${id}" -> zIndex: ${zIndexValue}`);
        }
      }
    }
  });
}

//квадрат square
function updateFeatures() {
  console.log('🔄 Обновляем features:', props.features?.length)

  // Сохраняем существующие слои перед очисткой
  const savedLayers = {}
  for (const f of vectorSource.getFeatures()) {
    const id = f.getId()
    savedLayers[id] = {
      imageLayer: f.get('imageLayer'),
      maskLayer: f.get('maskLayer')
    }
  }

  vectorSource.clear()

  if (props.features?.length > 0) {
    const olFeatures = new GeoJSON().readFeatures({
      type: 'FeatureCollection',
      features: props.features
    }, {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    })

    olFeatures.forEach(f => {
      const entityid = f.getProperties()?.entityid || f.get('entityid')
      f.setId(entityid)
      f.setStyle(baseStyle)

      // Восстанавливаем слои если они были
      if (savedLayers[entityid]) {
        if (savedLayers[entityid].imageLayer) {
          f.set('imageLayer', savedLayers[entityid].imageLayer)
        }
        if (savedLayers[entityid].maskLayer) {
          f.set('maskLayer', savedLayers[entityid].maskLayer)
        }
      }

      vectorSource.addFeature(f)
    })

    if (!vectorSource.isEmpty()) {
      map.getView().fit(vectorSource.getExtent(), {
        padding: [20, 20, 20, 20],
        maxZoom: 10
      })
    }
  }
}

function updateFeatureOpacity(id, value, type) {
  console.log(`[Opacity] type=${type}, id=${id}, value=${value}`);

  if (type === 'mask') {
    // Для масок ищем feature по productid
    const features = vectorSource.getFeatures();
    let foundFeature = null;

    // Ищем feature с нужным productid
    for (const feature of features) {
      const productId = feature.get('productid');
      if (productId && String(productId) === String(id)) {
        foundFeature = feature;
        break;
      }
    }

    if (!foundFeature) {
      console.warn(`[Opacity] Не найден feature с productid=${id}`);
      return;
    }

    // Получаем слой маски
    const layer = foundFeature.get('maskLayer');

    if (!layer) {
      console.warn(`[Opacity] Для маски ${id} нет слоя maskLayer. Проверьте активирован ли чекбокс маски.`);
      console.log(`[Opacity] Текущий feature:`, {
        entityid: foundFeature.getId(),
        productid: foundFeature.get('productid'),
        hasMaskLayer: !!foundFeature.get('maskLayer'),
        selectedMaskIds: props.maskSelected
      });
      return;
    }

    // Преобразуем значение (0-100) в 0.0-1.0
    let numericValue = Number(value);
    if (isNaN(numericValue)) numericValue = 100; // по умолчанию непрозрачно
    numericValue = Math.max(0, Math.min(100, numericValue)) / 100;

    //console.log(`[Opacity] Устанавливаем прозрачность маски ${id}: ${numericValue}`);

    // Устанавливаем прозрачность
    layer.setOpacity(numericValue);

    // Принудительно обновляем слой
    layer.changed();

  } else if (type === 'image') {
    // Для изображений ищем по entityid
    const feature = vectorSource.getFeatureById(id);
    if (!feature) {
      console.warn(`[Opacity] Не найден feature с entityid=${id}`);
      return;
    }

    const layer = feature.get('imageLayer');
    if (!layer) {
      console.warn(`[Opacity] Для изображения ${id} нет слоя imageLayer`);
      return;
    }

    let numericValue = Number(value);
    if (isNaN(numericValue)) numericValue = 100;
    numericValue = Math.max(0, Math.min(100, numericValue)) / 100;

    //console.log(`[Opacity] Устанавливаем прозрачность изображения ${id}: ${numericValue}`);

    layer.setOpacity(numericValue);
    layer.changed();
  }
}


async function updateStyles() {
  const token = ++updateStylesToken;
  const selectedIds = props.selectedFeatures.map(String);
  const selectedMaskIds = props.maskSelected.map(String);

  for (const feature of vectorSource.getFeatures()) {
    if (token !== updateStylesToken) return;
    const id = String(feature.getId());
    const productId = feature.get('productid');

    // --- ПЕРВЫЙ ЧЕКБОКС: фото ---
    const imageUrl = `/${productId}_merged.png`;

    const oldLayer = feature.get('imageLayer');
    if (selectedIds.includes(id)) {
      const exists = await imageExists(imageUrl);
      if (token !== updateStylesToken) return;
      if (exists) {
        if (oldLayer) {
          map.removeLayer(oldLayer);
          feature.set('imageLayer', null);
        }
        // applyImageAsLayer теперь не устанавливает zIndex
        applyImageAsLayer(map, feature, imageUrl);

        // После создания слоя сразу обновляем zIndex
        updateLayerZIndex();

        // Применяем прозрачность если есть
        const opacity = props.imageOpacity?.[id];
        if (opacity !== undefined) {
          setTimeout(() => {
            const newLayer = feature.get('imageLayer');
            if (newLayer) {
              newLayer.setOpacity(Number(opacity) / 100);
            }
          }, 100);
        }
      } else {
        console.warn("Фото не найдено для", productId);
        feature.setStyle(redSquareStyle(extractDateFromProductId(productId)));
      }
    } else {
      if (oldLayer) {
        map.removeLayer(oldLayer);
        feature.set('imageLayer', null);
      }
      feature.setStyle(baseStyle);
    }

    // --- ВТОРОЙ ЧЕКБОКС: маска ---
    const oldMaskLayer = feature.get('maskLayer');
    if (selectedMaskIds.includes(productId)) {
      console.log(`[updateStyles] Активируем маску для ${productId}`);
      try {
        const maskUrl = `http://127.0.0.1:8000/get-mask/${productId}`;
        const blob = await fetch(maskUrl).then(res => {
          if (!res.ok) throw new Error(`Mask not found: ${res.status}`);
          return res.blob();
        });
        if (token !== updateStylesToken) return;

        const maskLayer = await applyMaskFromBlob(map, feature, blob);
        if (token !== updateStylesToken) {
          // только что добавили — убираем, т.к. пользователь уже выключил
          map.removeLayer(maskLayer);
          feature.set('maskLayer', null);
          return;
        }
        feature.set('maskLayer', maskLayer);

        // После создания маски сразу обновляем zIndex
        updateLayerZIndex();

        // Сразу применяем прозрачность, если она есть
        const opacity = props.maskOpacity?.[productId];
        if (opacity !== undefined) {
          const numericValue = Math.max(0, Math.min(100, Number(opacity))) / 100;
          maskLayer.setOpacity(numericValue);
        }

        console.log("Маска активирована для", productId);

      } catch (err) {
        console.error("Ошибка при загрузке маски для", productId, err);
        if (oldMaskLayer) {
          map.removeLayer(oldMaskLayer);
          feature.set('maskLayer', null);
        }
      }
    } else {
      if (oldMaskLayer) {
        console.log(`[updateStyles] Удаляем маску для ${productId}`);
        map.removeLayer(oldMaskLayer);
        feature.set('maskLayer', null);
      }
    }
  }
}


function getMap() {
  return map;
}

onMounted(() => {
//онлайн
//   const tileLayer = new TileLayer({
//     source: new OSM({
//       attributions: []
//     })
//   });
  // Ограничение карты
  const minLonLat = [-180, -85.06];
  const maxLonLat = [180, 85.06];

  const extent = [
    ...fromLonLat(minLonLat),
    ...fromLonLat(maxLonLat)
  ];
  //оффлайн
  const tileLayer = new TileLayer({
    source: new XYZ({
      url: 'http://localhost:5269/api/TilesOl/{z}/{x}/{y}.png',
      crossOrigin: 'anonymous',
      maxZoom: 8,
      wrapX: false,
      tileSize: 256
    })
  });

  const vectorLayer = new VectorLayer({
    source: vectorSource
  })

  map = new Map({
    target: 'map',
    layers: [tileLayer, vectorLayer],
    view: new View({
      center: fromLonLat([37, 55]),
      zoom: 3,
      extent: extent
    }),
    controls: defaultControls({
      rotate: false,        // отключаем кнопку поворота
      attribution: false,    // убираем "© OpenStreetMap" внизу
      zoom: false
    })
  })

  map.on('pointermove', function (evt) {
    const pixel = map.getEventPixel(evt.originalEvent)
    const feature = map.forEachFeatureAtPixel(pixel, f => {
      // Проверим, есть ли стиль, который визуально отображает объект
      const style = f.getStyle()
      return style && (style.getStroke()?.getColor() !== 'rgba(0, 0, 0, 0)' || style.getFill()?.getColor() !== 'rgba(0, 0, 0, 0)')
          ? f
          : null
    })

    if (feature && props.selectedFeatures.includes(feature.getId())) {
      emit('hoverFeature', feature.getId())
    } else {
      emit('hoverFeature', null)
    }
  })
  // слушаем перемещения камеры
  map.on('moveend', () => {
    const center = map.getView().getCenter();
    const [lon, lat] = toLonLat(center);
    const zoom = map.getView().getZoom();
    emit('update:cameraState', {
      lon,
      lat,
      zoom,
      source: 'ol' // Явно задаём источник
    });
  });
  updateFeatures()
  updateStyles()
})

// реагируем на обновление cameraState из родителя
watch(() => props.cameraState, (newState) => {
  if (map && newState?.lon !== undefined && newState?.lat !== undefined && newState?.zoom !== undefined) {
    map.getView().setCenter(fromLonLat([newState.lon, newState.lat]))
    map.getView().setZoom(newState.zoom)
  }
}, {deep: true})

// Следим за изменениями входных данных и флага showLabels
watch(() => props.features, (newFeatures, oldFeatures) => {
  // Если добавились новые фичи — только добавляем их, не пересоздаём всё
  const oldIds = new Set((oldFeatures || []).map(f => f.properties.entityid))
  const newIds = new Set((newFeatures || []).map(f => f.properties.entityid))

  const addedFeatures = (newFeatures || []).filter(f => !oldIds.has(f.properties.entityid))
  const removedIds = [...oldIds].filter(id => !newIds.has(id))

  if (removedIds.length > 0) {
    // Если удалили фичи — полное обновление
    updateFeatures()
    updateStyles()
    return
  }

  if (addedFeatures.length > 0) {
    // Только добавляем новые фичи без очистки vectorSource
    const olFeatures = new GeoJSON().readFeatures({
      type: 'FeatureCollection',
      features: addedFeatures
    }, {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    })

    olFeatures.forEach(f => {
      const entityid = f.getProperties()?.entityid || f.get('entityid')
      f.setId(entityid)
      f.setStyle(baseStyle)
      vectorSource.addFeature(f)
    })

    // Обновляем стили только для новых фич
    updateStyles()
    return
  }

  // Если ничего не добавилось/удалилось — просто обновляем стили
  updateStyles()
}, {deep: true})

watch(() => props.selectedFeatures, () => {
  updateStyles()
}, {deep: true})

watch(() => props.showLabels, () => {
  updateStyles()
})

watch(() => props.maskSelected, (val) => {
  //console.log("✅ maskSelected обновился:", val)
  updateStyles()
}, {deep: true})

// Watchers для прозрачности
watch(() => props.imageOpacity, (newVal) => {
  //console.log('🔹 imageOpacity обновился:', newVal);
  Object.entries(newVal).forEach(([id, val]) => {
    updateFeatureOpacity(id, val, 'image');
  });
}, {deep: true});

watch(() => props.maskOpacity, (newVal) => {
  //console.log('🔸 maskOpacity обновился:', newVal);
  Object.entries(newVal).forEach(([id, val]) => {
    updateFeatureOpacity(id, val, 'mask');
  });
}, {deep: true});

// Добавляем watcher для zIndexOrder
watch(() => props.zIndexOrder, () => {
  console.log('[MapView] zIndexOrder обновился:', props.zIndexOrder);
  updateLayerZIndex();
}, { deep: true });

// Обработчик событий от родителя
watch(() => props.callMap, (newCall) => {
  if (newCall?.type === 'activate-image') {
    const entityId = newCall.entityId;
    if (entityId && vectorSource.getFeatureById(entityId)) {
      // Активируем изображение
      refreshImageForEntityId(entityId);
    }
  }
}, { deep: true });
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>