popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

lines/figures: hitTolerance for hover/click

Browse Source
This commit is contained in:
popovspiridon99
2025-02-26 14:58:51 +09:00
parent 4cc3a919ed
commit 300921751a
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/store/map.ts
View File

@ -15,7 +15,7 @@ import { googleMapsSatelliteSource } from '../components/map/MapSources';
import VectorLayer from 'ol/layer/Vector'; import VectorLayer from 'ol/layer/Vector';
import { ImageStatic, OSM } from 'ol/source'; import { ImageStatic, OSM } from 'ol/source';
import ImageLayer from 'ol/layer/Image'; import ImageLayer from 'ol/layer/Image';
import { drawingLayerStyle, figureStyle, highlightStyleRed, lineStyle, overlayStyle, regionsLayerStyle, selectStyle } from '../components/map/MapStyles'; import { drawingLayerStyle, figureStyle, highlightStyleRed, highlightStyleYellow, lineStyle, overlayStyle, regionsLayerStyle, selectStyle } from '../components/map/MapStyles';
import { Fill, Stroke, Style } from 'ol/style'; import { Fill, Stroke, Style } from 'ol/style';
import { VectorImage } from 'ol/layer'; import { VectorImage } from 'ol/layer';
import { click, pointerMove } from 'ol/events/condition'; import { click, pointerMove } from 'ol/events/condition';
@ -93,6 +93,8 @@ export const initializeMapState = (
id: string id: string
) => { ) => {
useMapStore.setState((state) => { useMapStore.setState((state) => {
const hitTolerance = 10
const baseLayer = new TileLayer({ source: new OSM(), properties: { id: uuidv4(), name: 'OpenStreetMap' } }) const baseLayer = new TileLayer({ source: new OSM(), properties: { id: uuidv4(), name: 'OpenStreetMap' } })
const satLayer = new TileLayer({ source: googleMapsSatelliteSource, visible: false, properties: { id: uuidv4(), name: 'Спутник' } }) const satLayer = new TileLayer({ source: googleMapsSatelliteSource, visible: false, properties: { id: uuidv4(), name: 'Спутник' } })
@ -103,20 +105,23 @@ export const initializeMapState = (
const regionSelect = new Select({ condition: pointerMove, style: selectStyle, layers: (layer) => layer.get('type') === 'region' }) const regionSelect = new Select({ condition: pointerMove, style: selectStyle, layers: (layer) => layer.get('type') === 'region' })
// Line select // Line select
const lineSelect = new Select({ condition: click, style: highlightStyleRed, layers: (layer) => layer.get('type') === 'line', }) const lineSelect = new Select({ condition: click, style: highlightStyleRed, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'line', })
lineSelect.on('select', (e) => { lineSelect.on('select', (e) => {
if (e.selected[0]) { if (e.selected[0]) {
setCurrentObjectId(id, e.selected[0].get('object_id')) setCurrentObjectId(id, e.selected[0].get('object_id'))
} }
}) })
const lineHover = new Select({ condition: pointerMove, style: highlightStyleYellow, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'line', })
// Figure select // Figure select
const figureSelect = new Select({ condition: click, style: highlightStyleRed, layers: (layer) => layer.get('type') === 'figure' }) const figureSelect = new Select({ condition: click, style: highlightStyleRed, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'figure' })
figureSelect.on('select', (e) => { figureSelect.on('select', (e) => {
if (e.selected[0]) { if (e.selected[0]) {
setCurrentObjectId(id, e.selected[0].get('object_id')) setCurrentObjectId(id, e.selected[0].get('object_id'))
} }
}) })
const figureHover = new Select({ condition: pointerMove, style: highlightStyleYellow, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'figure', })
const measureSource = new VectorSource() const measureSource = new VectorSource()
const measureLayer = new VectorLayer({ const measureLayer = new VectorLayer({
@ -252,7 +257,9 @@ export const initializeMapState = (
map.addInteraction(regionSelect) map.addInteraction(regionSelect)
map.addInteraction(lineSelect) map.addInteraction(lineSelect)
map.addInteraction(lineHover)
map.addInteraction(figureSelect) map.addInteraction(figureSelect)
map.addInteraction(figureHover)
// map.on('pointermove', function (e: MapBrowserEvent<UIEvent>) { // map.on('pointermove', function (e: MapBrowserEvent<UIEvent>) {
// setCurrentCoordinate(id, e.coordinate) // setCurrentCoordinate(id, e.coordinate)