0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

one layer per rectangle to redouce events

Browse source
This commit is contained in:
j 2025-08-06 23:31:07 +02:00
commit 80d3919b46
3 changed files with 18 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

23
source/UI/js/Map/MapRectangle.js
View file

@ -22,23 +22,25 @@ class MapLibreRectangle {
id: this.id
}
};
this.source = this.map.getSource('rectangles')
var sourceId = `${this.id}-rectangles`
this.source = this.map.getSource(sourceId)
if (!this.source) {
this.map.addSource('rectangles', {
this.map.addSource(sourceId, {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
});
this.source = this.map.getSource('rectangles')
this.source = this.map.getSource(sourceId)
// Add fill layer
if (!this.map.getLayer('rectangles-fill')) {
var layerId = `${this.id}-fill`
if (!this.map.getLayer(layerId)) {
this.map.addLayer({
id: 'rectangles-fill',
id: layerId,
type: 'fill',
source: 'rectangles',
source: sourceId,
paint: {
'fill-color': '#088',
'fill-opacity': 0.3
@ -47,11 +49,12 @@ class MapLibreRectangle {
}
// Add outline layer
if (!this.map.getLayer('rectangles-outline')) {
var layerId = `${this.id}-outline`
if (!this.map.getLayer(layerId)) {
this.map.addLayer({
id: 'rectangles-outline',
id: layerId,
type: 'line',
source: 'rectangles',
source: sourceId,
paint: {
'line-color': '#000',
'line-width': 2
@ -140,7 +143,7 @@ class MapLibreRectangle {
});
}
_enableClicking() {
this.map.on('click', `rectangles-fill`, e => {
this.map.on('click', `${this.id}-fill`, e => {
console.log('click', e)
if (this.onclick) {
e.preventDefault()