lines/figures: hitTolerance for hover/click
This commit is contained in:
@ -15,7 +15,7 @@ import { googleMapsSatelliteSource } from '../components/map/MapSources';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import { ImageStatic, OSM } from 'ol/source';
|
||||
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 { VectorImage } from 'ol/layer';
|
||||
import { click, pointerMove } from 'ol/events/condition';
|
||||
@ -93,6 +93,8 @@ export const initializeMapState = (
|
||||
id: string
|
||||
) => {
|
||||
useMapStore.setState((state) => {
|
||||
const hitTolerance = 10
|
||||
|
||||
const baseLayer = new TileLayer({ source: new OSM(), properties: { id: uuidv4(), name: 'OpenStreetMap' } })
|
||||
|
||||
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' })
|
||||
|
||||
// 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) => {
|
||||
if (e.selected[0]) {
|
||||
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
|
||||
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) => {
|
||||
if (e.selected[0]) {
|
||||
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 measureLayer = new VectorLayer({
|
||||
@ -252,7 +257,9 @@ export const initializeMapState = (
|
||||
|
||||
map.addInteraction(regionSelect)
|
||||
map.addInteraction(lineSelect)
|
||||
map.addInteraction(lineHover)
|
||||
map.addInteraction(figureSelect)
|
||||
map.addInteraction(figureHover)
|
||||
|
||||
// map.on('pointermove', function (e: MapBrowserEvent<UIEvent>) {
|
||||
// setCurrentCoordinate(id, e.coordinate)
|
||||
|
Reference in New Issue
Block a user