ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9961 from KlausBenndorf/remove-select-interaction

Browse Source 
SelectInteraction removal
This commit is contained in:
Tim Schaub
2019-09-24 10:27:20 +02:00
committed by GitHub
parent 16cc22371b acac7a9403
commit 3c38a38570
33 changed files with 453 additions and 1275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
changelog/upgrade-notes.md
View File

@@ -258,6 +258,10 @@ The `ol/source/Vector#refresh()` method now removes all features from the source
The `getGetFeatureInfoUrl` of `ol/source/ImageWMS` and `ol/source/TileWMS` is now called `getFeatureInfoUrl`.
##### Removal of `SelectInteraction`
The `SelectInteraction` is removed. There are two examples ([Select Features by Hover](https://openlayers.org/en/master/examples/select-hover-features.html) and [Select multiple Features](https://openlayers.org/en/master/examples/select-multiple-features.html) which show how similar results can be achieved by using more basic methods.
#### Other changes
##### Allow declutter in image render mode

3
examples/box-selection.html
View File

@@ -3,8 +3,7 @@ layout: example.html
title: Box Selection
shortdesc: Using a DragBox interaction to select features.
docs: >
<p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
to the feature overlay of a select interaction (<code>ol/interaction/Select</code>) for highlighting.</p>
<p>This example shows how to use a <code>DragBox</code> interaction to select features.</p>
<p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) to draw boxes.</p>
tags: "DragBox, feature, selection, box"
---

40
examples/box-selection.js
View File

@@ -2,9 +2,13 @@ import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import {DragBox, Select} from '../src/ol/interaction.js';
import {DragBox} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import Collection from '../src/ol/Collection.js';
import Style from '../src/ol/style/Style.js';
import Fill from '../src/ol/style/Fill.js';
import Stroke from '../src/ol/style/Stroke.js';
const vectorSource = new VectorSource({
@@ -30,11 +34,37 @@ const map = new Map({
})
});
// a normal select interaction to handle click
const select = new Select();
map.addInteraction(select);
const selectedFeatures = new Collection();
const selectedFeatures = select.getFeatures();
// style features in collection
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: '#3399CC',
width: 3
})
});
selectedFeatures.on('add', function(e) {
e.element.setStyle(highlightStyle);
});
selectedFeatures.on('remove', function(e) {
e.element.setStyle(undefined);
});
// handle clicks
map.on('singleclick', function(e) {
selectedFeatures.clear();
map.forEachFeatureAtPixel(e.pixel, function(f) {
selectedFeatures.push(f);
});
});
// a DragBox interaction used to select features by drawing boxes
const dragBox = new DragBox({

2
examples/earthquake-clusters.html
View File

@@ -5,7 +5,7 @@ shortdesc: Demonstrates the use of style geometries to render source features of
docs: >
<p>This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations
(rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
the extent of the features that make up the cluster. When hovering over a cluster, the individual features that make up the cluster will be shown.</p>
<p>To achieve this, we make heavy use of style functions.</p>
tags: "KML, vector, style, geometry, cluster"
---

92
examples/earthquake-clusters.js
View File

@@ -2,7 +2,6 @@ import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js';
import KML from '../src/ol/format/KML.js';
import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js';
import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js';
@@ -69,48 +68,50 @@ const calculateClusterInfo = function(resolution) {
};
let currentResolution;
let hovered = null;
function styleFunction(feature, resolution) {
if (resolution != currentResolution) {
calculateClusterInfo(resolution);
currentResolution = resolution;
}
let style;
const size = feature.get('features').length;
if (size > 1) {
style = new Style({
if (feature !== hovered) {
if (resolution != currentResolution) {
calculateClusterInfo(resolution);
currentResolution = resolution;
}
let style;
const size = feature.get('features').length;
if (size > 1) {
style = new Style({
image: new CircleStyle({
radius: feature.get('radius'),
fill: new Fill({
color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
})
}),
text: new Text({
text: size.toString(),
fill: textFill,
stroke: textStroke
})
});
} else {
const originalFeature = feature.get('features')[0];
style = createEarthquakeStyle(originalFeature);
}
return style;
} else {
const styles = [new Style({
image: new CircleStyle({
radius: feature.get('radius'),
fill: new Fill({
color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
})
}),
text: new Text({
text: size.toString(),
fill: textFill,
stroke: textStroke
fill: invisibleFill
})
});
} else {
const originalFeature = feature.get('features')[0];
style = createEarthquakeStyle(originalFeature);
})];
const originalFeatures = feature.get('features');
let originalFeature;
for (let i = originalFeatures.length - 1; i >= 0; --i) {
originalFeature = originalFeatures[i];
styles.push(createEarthquakeStyle(originalFeature));
}
return styles;
}
return style;
}
function selectStyleFunction(feature) {
const styles = [new Style({
image: new CircleStyle({
radius: feature.get('radius'),
fill: invisibleFill
})
})];
const originalFeatures = feature.get('features');
let originalFeature;
for (let i = originalFeatures.length - 1; i >= 0; --i) {
originalFeature = originalFeatures[i];
styles.push(createEarthquakeStyle(originalFeature));
}
return styles;
}
vector = new VectorLayer({
@@ -134,16 +135,17 @@ const raster = new TileLayer({
const map = new Map({
layers: [raster, vector],
interactions: defaultInteractions().extend([new Select({
condition: function(evt) {
return evt.type == 'pointermove' ||
evt.type == 'singleclick';
},
style: selectStyleFunction
})]),
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
map.on('pointermove', function(e) {
hovered = null;
map.forEachFeatureAtPixel(e.pixel, function(f) {
hovered = f;
f.changed();
});
});

47
examples/icon-negative.js
View File

@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import Point from '../src/ol/geom/Point.js';
import Select from '../src/ol/interaction/Select.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import Stamen from '../src/ol/source/Stamen.js';
import VectorSource from '../src/ol/source/Vector.js';
@@ -44,27 +43,35 @@ const map = new Map({
});
const selectStyle = {};
const select = new Select({
style: function(feature) {
const image = feature.get('style').getImage().getImage();
if (!selectStyle[image.src]) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
data[i] = 255 - data[i];
}
context.putImageData(imageData, 0, 0);
selectStyle[image.src] = createStyle(undefined, canvas);
}
return selectStyle[image.src];
let selected = null;
map.on('singleclick', function(e) {
if (selected !== null) {
selected.setStyle(undefined);
}
map.forEachFeatureAtPixel(e.pixel, function(f) {
f.setStyle(function(feature) {
const image = feature.get('style').getImage().getImage();
if (!selectStyle[image.src]) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
data[i] = 255 - data[i];
}
context.putImageData(imageData, 0, 0);
selectStyle[image.src] = createStyle(undefined, canvas);
}
return selectStyle[image.src];
});
selected = f;
return true;
});
});
map.addInteraction(select);
map.on('pointermove', function(evt) {
map.getTargetElement().style.cursor =

2
examples/modify-features.html
View File

@@ -3,7 +3,7 @@ layout: example.html
title: Modify Features
shortdesc: Editing features with the modify interaction.
docs: >
<p>This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing.
<p>This example demonstrates how the modify interaction can be used. Zoom in to an area of interest and select a feature for editing.
Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (<code>Shift+Click</code> to select multiple features).</p>
tags: "modify, edit, vector"
---

42
examples/modify-features.js
View File

@@ -1,9 +1,14 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import {defaults as defaultInteractions, Modify, Select} from '../src/ol/interaction.js';
import {defaults as defaultInteractions, Modify} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import {shiftKeyOnly} from '../src/ol/events/condition.js';
import Collection from '../src/ol/Collection.js';
import Style from '../src/ol/style/Style.js';
import Fill from '../src/ol/style/Fill.js';
import Stroke from '../src/ol/style/Stroke.js';
const raster = new TileLayer({
@@ -18,16 +23,34 @@ const vector = new VectorLayer({
})
});
const select = new Select({
wrapX: false
const features = new Collection();
// style features in collection
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: 'rgb(51,153,204)',
width: 3
})
});
features.on('add', function(e) {
e.element.setStyle(highlightStyle);
});
features.on('remove', function(e) {
e.element.setStyle(undefined);
});
const modify = new Modify({
features: select.getFeatures()
features: features
});
const map = new Map({
interactions: defaultInteractions().extend([select, modify]),
interactions: defaultInteractions().extend([modify]),
layers: [raster, vector],
target: 'map',
view: new View({
@@ -35,3 +58,12 @@ const map = new Map({
zoom: 2
})
});
map.on('singleclick', function(e) {
if (!shiftKeyOnly(e)) {
features.clear();
}
map.forEachFeatureAtPixel(e.pixel, function(f) {
features.push(f);
});
});

28
examples/modify-test.js
View File

@@ -1,10 +1,11 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import {defaults as defaultInteractions, Modify, Select} from '../src/ol/interaction.js';
import {defaults as defaultInteractions, Modify} from '../src/ol/interaction.js';
import VectorLayer from '../src/ol/layer/Vector.js';
import VectorSource from '../src/ol/source/Vector.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
import Collection from '../src/ol/Collection.js';
const styleFunction = (function() {
@@ -211,23 +212,29 @@ const overlayStyle = (function() {
};
})();
const select = new Select({
style: overlayStyle
const collection = new Collection();
collection.on('add', function(e) {
e.element.setStyle(overlayStyle);
});
collection.on('remove', function(e) {
e.element.setStyle(undefined);
});
const modify = new Modify({
features: select.getFeatures(),
features: collection,
style: overlayStyle,
insertVertexCondition: function() {
// prevent new vertices to be added to the polygons
return !select.getFeatures().getArray().every(function(feature) {
return !collection.getArray().every(function(feature) {
return feature.getGeometry().getType().match(/Polygon/);
});
}
});
const map = new Map({
interactions: defaultInteractions().extend([select, modify]),
interactions: defaultInteractions().extend([modify]),
layers: [layer],
target: 'map',
view: new View({
@@ -235,3 +242,12 @@ const map = new Map({
zoom: 2
})
});
map.on('singleclick', function(e) {
collection.clear();
map.forEachFeatureAtPixel(e.pixel, function(f) {
collection.push(f);
});
});

22
examples/select-features.html
View File

@@ -1,22 +0,0 @@
---
layout: example.html
title: Select Features
shortdesc: Example of using the Select interaction.
docs: >
Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
tags: "select, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<label>Action type &nbsp;</label>
<select id="type" class="form-control">
<option value="click" selected>Click</option>
<option value="singleclick">Single-click</option>
<option value="pointermove">Hover</option>
<option value="altclick">Alt+Click</option>
<option value="none">None</option>
</select>
<span id="status">&nbsp;0 selected features</span>
</form>

85
examples/select-features.js
View File

@@ -1,85 +0,0 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {click, pointerMove, altKeyOnly} from '../src/ol/events/condition.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import Select from '../src/ol/interaction/Select.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
const raster = new TileLayer({
source: new OSM()
});
const vector = new VectorLayer({
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
})
});
const map = new Map({
layers: [raster, vector],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
let select = null; // ref to currently selected interaction
// select interaction working on "singleclick"
const selectSingleClick = new Select();
// select interaction working on "click"
const selectClick = new Select({
condition: click
});
// select interaction working on "pointermove"
const selectPointerMove = new Select({
condition: pointerMove
});
const selectAltClick = new Select({
condition: function(mapBrowserEvent) {
return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
}
});
const selectElement = document.getElementById('type');
const changeInteraction = function() {
if (select !== null) {
map.removeInteraction(select);
}
const value = selectElement.value;
if (value == 'singleclick') {
select = selectSingleClick;
} else if (value == 'click') {
select = selectClick;
} else if (value == 'pointermove') {
select = selectPointerMove;
} else if (value == 'altclick') {
select = selectAltClick;
} else {
select = null;
}
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
document.getElementById('status').innerHTML = '&nbsp;' +
e.target.getFeatures().getLength() +
' selected features (last operation selected ' + e.selected.length +
' and deselected ' + e.deselected.length + ' features)';
});
}
};
/**
* onchange callback on the select element.
*/
selectElement.onchange = changeInteraction;
changeInteraction();

10
examples/select-hover-features.html Normal file
View File

@@ -0,0 +1,10 @@
---
layout: example.html
title: Select Features by Hover
shortdesc: Example of selecting features by hovering.
docs: >
In this example, a listener is registered on the map's <code>pointermove</code> to highlight the currently hovered feature.
tags: "select, vector"
---
<div id="map" class="map"></div>
<span id="status"></span>

61
examples/select-hover-features.js Normal file
View File

@@ -0,0 +1,61 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
import Style from '../src/ol/style/Style.js';
import Fill from '../src/ol/style/Fill.js';
import Stroke from '../src/ol/style/Stroke.js';
const raster = new TileLayer({
source: new OSM()
});
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: '#3399CC',
width: 3
})
});
const vector = new VectorLayer({
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
})
});
const map = new Map({
layers: [raster, vector],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
let selected = null;
const status = document.getElementById('status');
map.on('pointermove', function(e) {
if (selected !== null) {
selected.setStyle(undefined);
selected = null;
}
map.forEachFeatureAtPixel(e.pixel, function(f) {
selected = f;
f.setStyle(highlightStyle);
return true;
});
if (selected) {
status.innerHTML = '&nbsp;Hovering: ' + selected.get('name');
} else {
status.innerHTML = '&nbsp;';
}
});

10
examples/select-multiple-features.html Normal file
View File

@@ -0,0 +1,10 @@
---
layout: example.html
title: Select multiple Features
shortdesc: Example of selecting multiple features.
docs: >
In this example, a listener is registered on the map's <code>singleclick</code> event to add and remove features from an array.
tags: "select, vector"
---
<div id="map" class="map"></div>
<span id="status">&nbsp;0 selected features</span>

59
examples/select-multiple-features.js Normal file
View File

@@ -0,0 +1,59 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
import Style from '../src/ol/style/Style.js';
import Fill from '../src/ol/style/Fill.js';
import Stroke from '../src/ol/style/Stroke.js';
const raster = new TileLayer({
source: new OSM()
});
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: '#3399CC',
width: 3
})
});
const vector = new VectorLayer({
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
})
});
const map = new Map({
layers: [raster, vector],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2,
multiWorld: true
})
});
const selected = [];
const status = document.getElementById('status');
map.on('singleclick', function(e) {
map.forEachFeatureAtPixel(e.pixel, function(f) {
const selIndex = selected.indexOf(f);
if (selIndex < 0) {
selected.push(f);
f.setStyle(highlightStyle);
} else {
selected.splice(selIndex, 1);
f.setStyle(undefined);
}
});
status.innerHTML = '&nbsp;' + selected.length + ' selected features';
});

50
examples/snap.js
View File

@@ -1,9 +1,11 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
import {Draw, Modify, Snap} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
import Collection from '../src/ol/Collection.js';
import {shiftKeyOnly} from '../src/ol/events/condition.js';
const raster = new TileLayer({
source: new OSM()
@@ -37,29 +39,53 @@ const map = new Map({
})
});
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: 'rgb(51,153,204)',
width: 3
})
});
const ExampleModify = {
init: function() {
this.select = new Select();
map.addInteraction(this.select);
this.features = new Collection();
this.features.on('add', function(e) {
e.element.setStyle(highlightStyle);
});
this.features.on('remove', function(e) {
e.element.setStyle(undefined);
});
this.select = function(e) {
if (!shiftKeyOnly(e)) {
this.features.clear();
}
map.forEachFeatureAtPixel(e.pixel, function(f) {
this.features.push(f);
}.bind(this));
}.bind(this);
this.modify = new Modify({
features: this.select.getFeatures()
features: this.features
});
map.addInteraction(this.modify);
this.setEvents();
},
setEvents: function() {
const selectedFeatures = this.select.getFeatures();
this.select.on('change:active', function() {
selectedFeatures.forEach(function(each) {
selectedFeatures.remove(each);
});
});
},
setActive: function(active) {
this.select.setActive(active);
if (active) {
this.features.clear();
map.on('singleclick', this.select);
} else {
map.un('singleclick', this.select);
}
this.modify.setActive(active);
}
};

40
examples/translate-features.js
View File

@@ -1,10 +1,15 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import {defaults as defaultInteractions, Select, Translate} from '../src/ol/interaction.js';
import {defaults as defaultInteractions, Translate} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
import Collection from '../src/ol/Collection.js';
import Style from '../src/ol/style/Style.js';
import Fill from '../src/ol/style/Fill.js';
import Stroke from '../src/ol/style/Stroke.js';
import {shiftKeyOnly} from '../src/ol/events/condition.js';
const raster = new TileLayer({
@@ -18,14 +23,32 @@ const vector = new VectorLayer({
})
});
const select = new Select();
const features = new Collection();
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: 'rgb(51,153,204)',
width: 3
})
});
features.on('add', function(e) {
e.element.setStyle(highlightStyle);
});
features.on('remove', function(e) {
e.element.setStyle(undefined);
});
const translate = new Translate({
features: select.getFeatures()
features: features
});
const map = new Map({
interactions: defaultInteractions().extend([select, translate]),
interactions: defaultInteractions().extend([translate]),
layers: [raster, vector],
target: 'map',
view: new View({
@@ -33,3 +56,12 @@ const map = new Map({
zoom: 2
})
});
map.on('singleclick', function(e) {
if (!shiftKeyOnly(e)) {
features.clear();
}
map.forEachFeatureAtPixel(e.pixel, function(f) {
features.push(f);
});
});

46
examples/vector-esri-edit.js
View File

@@ -1,13 +1,18 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import EsriJSON from '../src/ol/format/EsriJSON.js';
import {defaults as defaultInteractions, Draw, Modify, Select} from '../src/ol/interaction.js';
import {defaults as defaultInteractions, Draw, Modify} from '../src/ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {tile as tileStrategy} from '../src/ol/loadingstrategy.js';
import {fromLonLat} from '../src/ol/proj.js';
import VectorSource from '../src/ol/source/Vector.js';
import XYZ from '../src/ol/source/XYZ.js';
import {createXYZ} from '../src/ol/tilegrid.js';
import Collection from '../src/ol/Collection.js';
import Style from '../src/ol/style/Style.js';
import Fill from '../src/ol/style/Fill.js';
import Stroke from '../src/ol/style/Stroke.js';
import {shiftKeyOnly} from '../src/ol/events/condition.js';
const serviceUrl = 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' +
@@ -63,17 +68,32 @@ const draw = new Draw({
type: 'Polygon'
});
const select = new Select();
select.setActive(false);
const selected = select.getFeatures();
const selected = new Collection();
const highlightStyle = new Style({
fill: new Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new Stroke({
color: 'rgb(51,153,204)',
width: 3
})
});
selected.on('add', function(e) {
e.element.setStyle(highlightStyle);
});
selected.on('remove', function(e) {
e.element.setStyle(undefined);
});
const modify = new Modify({
features: selected
});
modify.setActive(false);
const map = new Map({
interactions: defaultInteractions().extend([draw, select, modify]),
interactions: defaultInteractions().extend([draw, modify]),
layers: [raster, vector],
target: document.getElementById('map'),
view: new View({
@@ -82,6 +102,15 @@ const map = new Map({
})
});
function select(e) {
if (!shiftKeyOnly(e)) {
selected.clear();
}
map.forEachFeatureAtPixel(e.pixel, function(f) {
selected.push(f);
});
}
const typeSelect = document.getElementById('type');
@@ -92,6 +121,11 @@ typeSelect.onchange = function() {
draw.setActive(typeSelect.value === 'DRAW');
select.setActive(typeSelect.value === 'MODIFY');
modify.setActive(typeSelect.value === 'MODIFY');
if (typeSelect.value === 'MODIFY') {
map.on('singleclick', select);
} else {
map.un('singleclick', select);
}
};
const dirty = {};

25
src/ol/PluggableMap.js
View File

@@ -47,7 +47,6 @@ import {create as createTransform, apply as applyTransform} from './transform.js
* @property {import("./transform.js").Transform} pixelToCoordinateTransform
* @property {Array<PostRenderFunction>} postRenderFunctions
* @property {import("./size.js").Size} size
* @property {!Object<string, boolean>} skippedFeatureUids
* @property {TileQueue} tileQueue
* @property {!Object<string, Object<string, boolean>>} usedTiles
* @property {Array<number>} viewHints
@@ -366,13 +365,6 @@ class PluggableMap extends BaseObject {
this.getTilePriority.bind(this),
this.handleTileChange_.bind(this));
/**
* Uids of features to skip at rendering time.
* @type {Object<string, boolean>}
* @private
*/
this.skippedFeatureUids_ = {};
this.addEventListener(getChangeEventType(MapProperty.LAYERGROUP), this.handleLayerGroupChanged_);
this.addEventListener(getChangeEventType(MapProperty.VIEW), this.handleViewChanged_);
this.addEventListener(getChangeEventType(MapProperty.SIZE), this.handleSizeChanged_);
@@ -1241,7 +1233,6 @@ class PluggableMap extends BaseObject {
pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
postRenderFunctions: [],
size: size,
skippedFeatureUids: this.skippedFeatureUids_,
tileQueue: this.tileQueue_,
time: time,
usedTiles: {},
@@ -1329,14 +1320,6 @@ class PluggableMap extends BaseObject {
this.set(MapProperty.VIEW, view);
}
/**
* @param {import("./Feature.js").default} feature Feature.
*/
skipFeature(feature) {
this.skippedFeatureUids_[getUid(feature)] = true;
this.render();
}
/**
* Force a recalculation of the map viewport size. This should be called when
* third-party code changes the size of the map viewport.
@@ -1363,14 +1346,6 @@ class PluggableMap extends BaseObject {
]);
}
}
/**
* @param {import("./Feature.js").default} feature Feature.
*/
unskipFeature(feature) {
delete this.skippedFeatureUids_[getUid(feature)];
this.render();
}
}

1
src/ol/interaction.js
View File

@@ -31,7 +31,6 @@ export {default as MouseWheelZoom} from './interaction/MouseWheelZoom.js';
export {default as PinchRotate} from './interaction/PinchRotate.js';
export {default as PinchZoom} from './interaction/PinchZoom.js';
export {default as Pointer} from './interaction/Pointer.js';
export {default as Select} from './interaction/Select.js';
export {default as Snap} from './interaction/Snap.js';
export {default as Translate} from './interaction/Translate.js';

483
src/ol/interaction/Select.js
View File

@@ -1,483 +0,0 @@
/**
* @module ol/interaction/Select
*/
import {getUid} from '../util.js';
import CollectionEventType from '../CollectionEventType.js';
import {extend, includes} from '../array.js';
import Event from '../events/Event.js';
import {singleClick, never, shiftKeyOnly, pointerMove} from '../events/condition.js';
import {TRUE} from '../functions.js';
import GeometryType from '../geom/GeometryType.js';
import Interaction from './Interaction.js';
import VectorLayer from '../layer/Vector.js';
import {clear} from '../obj.js';
import VectorSource from '../source/Vector.js';
import {createEditingStyle} from '../style/Style.js';
/**
* @enum {string}
*/
const SelectEventType = {
/**
* Triggered when feature(s) has been (de)selected.
* @event SelectEvent#select
* @api
*/
SELECT: 'select'
};
/**
* A function that takes an {@link module:ol/Feature} or
* {@link module:ol/render/Feature} and an
* {@link module:ol/layer/Layer} and returns `true` if the feature may be
* selected or `false` otherwise.
* @typedef {function(import("../Feature.js").FeatureLike, import("../layer/Layer.js").default):boolean} FilterFunction
*/
/**
* @typedef {Object} Options
* @property {import("../events/condition.js").Condition} [addCondition] A function
* that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
* boolean to indicate whether that event should be handled.
* By default, this is {@link module:ol/events/condition~never}. Use this if you
* want to use different events for add and remove instead of `toggle`.
* @property {import("../events/condition.js").Condition} [condition] A function that
* takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
* boolean to indicate whether that event should be handled. This is the event
* for the selected features as a whole. By default, this is
* {@link module:ol/events/condition~singleClick}. Clicking on a feature selects that
* feature and removes any that were in the selection. Clicking outside any
* feature removes all from the selection.
* See `toggle`, `add`, `remove` options for adding/removing extra features to/
* from the selection.
* @property {Array<import("../layer/Layer.js").default>|function(import("../layer/Layer.js").default): boolean} [layers]
* A list of layers from which features should be selected. Alternatively, a
* filter function can be provided. The function will be called for each layer
* in the map and should return `true` for layers that you want to be
* selectable. If the option is absent, all visible layers will be considered
* selectable.
* @property {import("../style/Style.js").StyleLike} [style]
* Style for the selected features. By default the default edit style is used
* (see {@link module:ol/style}).
* @property {import("../events/condition.js").Condition} [removeCondition] A function
* that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
* boolean to indicate whether that event should be handled.
* By default, this is {@link module:ol/events/condition~never}. Use this if you
* want to use different events for add and remove instead of `toggle`.
* @property {import("../events/condition.js").Condition} [toggleCondition] A function
* that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
* boolean to indicate whether that event should be handled. This is in addition
* to the `condition` event. By default,
* {@link module:ol/events/condition~shiftKeyOnly}, i.e. pressing `shift` as
* well as the `condition` event, adds that feature to the current selection if
* it is not currently selected, and removes it if it is. See `add` and `remove`
* if you want to use different events instead of a toggle.
* @property {boolean} [multi=false] A boolean that determines if the default
* behaviour should select only single features or all (overlapping) features at
* the clicked map position. The default of `false` means single select.
* @property {import("../Collection.js").default<import("../Feature.js").default>} [features]
* Collection where the interaction will place selected features. Optional. If
* not set the interaction will create a collection. In any case the collection
* used by the interaction is returned by
* {@link module:ol/interaction/Select~Select#getFeatures}.
* @property {FilterFunction} [filter] A function
* that takes an {@link module:ol/Feature} and an
* {@link module:ol/layer/Layer} and returns `true` if the feature may be
* selected or `false` otherwise.
* @property {boolean} [wrapX=true] Wrap the world horizontally on the selection
* overlay.
* @property {number} [hitTolerance=0] Hit-detection tolerance. Pixels inside
* the radius around the given position will be checked for features.
*/
/**
* @classdesc
* Events emitted by {@link module:ol/interaction/Select~Select} instances are instances of
* this type.
*/
class SelectEvent extends Event {
/**
* @param {SelectEventType} type The event type.
* @param {Array<import("../Feature.js").default>} selected Selected features.
* @param {Array<import("../Feature.js").default>} deselected Deselected features.
* @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Associated
* {@link module:ol/MapBrowserEvent}.
*/
constructor(type, selected, deselected, mapBrowserEvent) {
super(type);
/**
* Selected features array.
* @type {Array<import("../Feature.js").default>}
* @api
*/
this.selected = selected;
/**
* Deselected features array.
* @type {Array<import("../Feature.js").default>}
* @api
*/
this.deselected = deselected;
/**
* Associated {@link module:ol/MapBrowserEvent}.
* @type {import("../MapBrowserEvent.js").default}
* @api
*/
this.mapBrowserEvent = mapBrowserEvent;
}
}
/**
* @classdesc
* Interaction for selecting vector features. By default, selected features are
* styled differently, so this interaction can be used for visual highlighting,
* as well as selecting features for other actions, such as modification or
* output. There are three ways of controlling which features are selected:
* using the browser event as defined by the `condition` and optionally the
* `toggle`, `add`/`remove`, and `multi` options; a `layers` filter; and a
* further feature filter using the `filter` option.
*
* Selected features are added to an internal unmanaged layer.
*
* @fires SelectEvent
* @api
*/
class Select extends Interaction {
/**
* @param {Options=} opt_options Options.
*/
constructor(opt_options) {
super({
handleEvent: handleEvent
});
const options = opt_options ? opt_options : {};
/**
* @private
* @type {import("../events/condition.js").Condition}
*/
this.condition_ = options.condition ? options.condition : singleClick;
/**
* @private
* @type {import("../events/condition.js").Condition}
*/
this.addCondition_ = options.addCondition ? options.addCondition : never;
/**
* @private
* @type {import("../events/condition.js").Condition}
*/
this.removeCondition_ = options.removeCondition ? options.removeCondition : never;
/**
* @private
* @type {import("../events/condition.js").Condition}
*/
this.toggleCondition_ = options.toggleCondition ? options.toggleCondition : shiftKeyOnly;
/**
* @private
* @type {boolean}
*/
this.multi_ = options.multi ? options.multi : false;
/**
* @private
* @type {FilterFunction}
*/
this.filter_ = options.filter ? options.filter : TRUE;
/**
* @private
* @type {number}
*/
this.hitTolerance_ = options.hitTolerance ? options.hitTolerance : 0;
const featureOverlay = new VectorLayer({
source: new VectorSource({
useSpatialIndex: false,
features: options.features,
wrapX: options.wrapX
}),
style: options.style ? options.style :
getDefaultStyleFunction(),
updateWhileAnimating: true,
updateWhileInteracting: true
});
/**
* @private
* @type {VectorLayer}
*/
this.featureOverlay_ = featureOverlay;
/** @type {function(import("../layer/Layer.js").default): boolean} */
let layerFilter;
if (options.layers) {
if (typeof options.layers === 'function') {
layerFilter = options.layers;
} else {
const layers = options.layers;
layerFilter = function(layer) {
return includes(layers, layer);
};
}
} else {
layerFilter = TRUE;
}
/**
* @private
* @type {function(import("../layer/Layer.js").default): boolean}
*/
this.layerFilter_ = layerFilter;
/**
* An association between selected feature (key)
* and layer (value)
* @private
* @type {Object<string, import("../layer/Layer.js").default>}
*/
this.featureLayerAssociation_ = {};
const features = this.getFeatures();
features.addEventListener(CollectionEventType.ADD, this.addFeature_.bind(this));
features.addEventListener(CollectionEventType.REMOVE, this.removeFeature_.bind(this));
}
/**
* @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {import("../layer/Layer.js").default} layer Layer.
* @private
*/
addFeatureLayerAssociation_(feature, layer) {
this.featureLayerAssociation_[getUid(feature)] = layer;
}
/**
* Get the selected features.
* @return {import("../Collection.js").default<import("../Feature.js").default>} Features collection.
* @api
*/
getFeatures() {
return this.featureOverlay_.getSource().getFeaturesCollection();
}
/**
* Returns the Hit-detection tolerance.
* @returns {number} Hit tolerance in pixels.
* @api
*/
getHitTolerance() {
return this.hitTolerance_;
}
/**
* Returns the associated {@link module:ol/layer/Vector~Vector vectorlayer} of
* the (last) selected feature. Note that this will not work with any
* programmatic method like pushing features to
* {@link module:ol/interaction/Select~Select#getFeatures collection}.
* @param {import("../Feature.js").FeatureLike} feature Feature
* @return {VectorLayer} Layer.
* @api
*/
getLayer(feature) {
return (
/** @type {VectorLayer} */ (this.featureLayerAssociation_[getUid(feature)])
);
}
/**
* Get the overlay layer that this interaction renders selected features to.
* @return {VectorLayer} Overlay layer.
* @api
*/
getOverlay() {
return this.featureOverlay_;
}
/**
* Hit-detection tolerance. Pixels inside the radius around the given position
* will be checked for features.
* @param {number} hitTolerance Hit tolerance in pixels.
* @api
*/
setHitTolerance(hitTolerance) {
this.hitTolerance_ = hitTolerance;
}
/**
* Remove the interaction from its current map, if any, and attach it to a new
* map, if any. Pass `null` to just remove the interaction from the current map.
* @param {import("../PluggableMap.js").default} map Map.
* @override
* @api
*/
setMap(map) {
const currentMap = this.getMap();
const selectedFeatures = this.getFeatures();
if (currentMap) {
selectedFeatures.forEach(currentMap.unskipFeature.bind(currentMap));
}
super.setMap(map);
this.featureOverlay_.setMap(map);
if (map) {
selectedFeatures.forEach(map.skipFeature.bind(map));
}
}
/**
* @param {import("../Collection.js").CollectionEvent} evt Event.
* @private
*/
addFeature_(evt) {
const map = this.getMap();
if (map) {
map.skipFeature(/** @type {import("../Feature.js").default} */ (evt.element));
}
}
/**
* @param {import("../Collection.js").CollectionEvent} evt Event.
* @private
*/
removeFeature_(evt) {
const map = this.getMap();
if (map) {
map.unskipFeature(/** @type {import("../Feature.js").default} */ (evt.element));
}
}
/**
* @param {import("../Feature.js").FeatureLike} feature Feature.
* @private
*/
removeFeatureLayerAssociation_(feature) {
delete this.featureLayerAssociation_[getUid(feature)];
}
}
/**
* Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the
* selected state of features.
* @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
* @return {boolean} `false` to stop event propagation.
* @this {Select}
*/
function handleEvent(mapBrowserEvent) {
if (!this.condition_(mapBrowserEvent)) {
return true;
}
const add = this.addCondition_(mapBrowserEvent);
const remove = this.removeCondition_(mapBrowserEvent);
const toggle = this.toggleCondition_(mapBrowserEvent);
const set = !add && !remove && !toggle;
const map = mapBrowserEvent.map;
const features = this.getFeatures();
const deselected = [];
const selected = [];
if (set) {
// Replace the currently selected feature(s) with the feature(s) at the
// pixel, or clear the selected feature(s) if there is no feature at
// the pixel.
clear(this.featureLayerAssociation_);
map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
(
/**
* @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {import("../layer/Layer.js").default} layer Layer.
* @return {boolean|undefined} Continue to iterate over the features.
*/
function(feature, layer) {
if (this.filter_(feature, layer)) {
selected.push(feature);
this.addFeatureLayerAssociation_(feature, layer);
return !this.multi_;
}
}).bind(this), {
layerFilter: this.layerFilter_,
hitTolerance: this.hitTolerance_
});
for (let i = features.getLength() - 1; i >= 0; --i) {
const feature = features.item(i);
const index = selected.indexOf(feature);
if (index > -1) {
// feature is already selected
selected.splice(index, 1);
} else {
features.remove(feature);
deselected.push(feature);
}
}
if (selected.length !== 0) {
features.extend(selected);
}
} else {
// Modify the currently selected feature(s).
map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
(
/**
* @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {import("../layer/Layer.js").default} layer Layer.
* @return {boolean|undefined} Continue to iterate over the features.
*/
function(feature, layer) {
if (this.filter_(feature, layer)) {
if ((add || toggle) && !includes(features.getArray(), feature)) {
selected.push(feature);
this.addFeatureLayerAssociation_(feature, layer);
} else if ((remove || toggle) && includes(features.getArray(), feature)) {
deselected.push(feature);
this.removeFeatureLayerAssociation_(feature);
}
return !this.multi_;
}
}).bind(this), {
layerFilter: this.layerFilter_,
hitTolerance: this.hitTolerance_
});
for (let j = deselected.length - 1; j >= 0; --j) {
features.remove(deselected[j]);
}
features.extend(selected);
}
if (selected.length > 0 || deselected.length > 0) {
this.dispatchEvent(
new SelectEvent(SelectEventType.SELECT,
selected, deselected, mapBrowserEvent));
}
return pointerMove(mapBrowserEvent);
}
/**
* @return {import("../style/Style.js").StyleFunction} Styles.
*/
function getDefaultStyleFunction() {
const styles = createEditingStyle();
extend(styles[GeometryType.POLYGON], styles[GeometryType.LINE_STRING]);
extend(styles[GeometryType.GEOMETRY_COLLECTION], styles[GeometryType.LINE_STRING]);
return function(feature, resolution) {
if (!feature.getGeometry()) {
return null;
}
return styles[feature.getGeometry().getType()];
};
}
export default Select;

22
src/ol/render/canvas/Executor.js
View File

@@ -1,14 +1,12 @@
/**
* @module ol/render/canvas/Executor
*/
import {getUid} from '../../util.js';
import {equals} from '../../array.js';
import {createEmpty, createOrUpdate,
createOrUpdateEmpty, extend, intersects} from '../../extent.js';
import {lineStringLength} from '../../geom/flat/length.js';
import {drawTextOnPath} from '../../geom/flat/textpath.js';
import {transform2D} from '../../geom/flat/transform.js';
import {isEmpty} from '../../obj.js';
import {drawImage, defaultPadding, defaultTextBaseline} from '../canvas.js';
import CanvasInstruction from './Instruction.js';
import {TEXT_ALIGN} from './TextBuilder.js';
@@ -497,8 +495,6 @@ class Executor extends Disposable {
* @private
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../transform.js").Transform} transform Transform.
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @param {Array<*>} instructions Instructions array.
* @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
* @param {function(import("../../Feature.js").FeatureLike): T|undefined} featureCallback Feature callback.
@@ -510,7 +506,6 @@ class Executor extends Disposable {
execute_(
context,
transform,
skippedFeaturesHash,
instructions,
snapToPixel,
featureCallback,
@@ -530,7 +525,6 @@ class Executor extends Disposable {
transform, this.pixelCoordinates_);
transformSetFromArray(this.renderedTransform_, transform);
}
const skipFeatures = !isEmpty(skippedFeaturesHash);
let i = 0; // instruction index
const ii = instructions.length; // end of instructions
let d = 0; // data index
@@ -562,9 +556,7 @@ class Executor extends Disposable {
switch (type) {
case CanvasInstruction.BEGIN_GEOMETRY:
feature = /** @type {import("../../Feature.js").FeatureLike} */ (instruction[1]);
if ((skipFeatures && skippedFeaturesHash[getUid(feature)]) || !feature.getGeometry()) {
i = /** @type {number} */ (instruction[2]);
} else if (opt_hitExtent !== undefined && !intersects(
if (opt_hitExtent !== undefined && !intersects(
opt_hitExtent, feature.getGeometry().getExtent())) {
i = /** @type {number} */ (instruction[2]) + 1;
} else {
@@ -871,22 +863,17 @@ class Executor extends Disposable {
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../transform.js").Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
*/
execute(context, transform, viewRotation, skippedFeaturesHash, snapToPixel) {
execute(context, transform, viewRotation, snapToPixel) {
this.viewRotation_ = viewRotation;
this.execute_(context, transform,
skippedFeaturesHash, this.instructions, snapToPixel, undefined, undefined);
this.execute_(context, transform, this.instructions, snapToPixel, undefined, undefined);
}
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../transform.js").Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @param {function(import("../../Feature.js").FeatureLike): T=} opt_featureCallback
* Feature callback.
* @param {import("../../extent.js").Extent=} opt_hitExtent Only check features that intersect this
@@ -898,12 +885,11 @@ class Executor extends Disposable {
context,
transform,
viewRotation,
skippedFeaturesHash,
opt_featureCallback,
opt_hitExtent
) {
this.viewRotation_ = viewRotation;
return this.execute_(context, transform, skippedFeaturesHash,
return this.execute_(context, transform,
this.hitDetectionInstructions, true, opt_featureCallback, opt_hitExtent);
}
}

14
src/ol/render/canvas/ExecutorGroup.js
View File

@@ -167,7 +167,6 @@ class ExecutorGroup extends Disposable {
* @param {number} resolution Resolution.
* @param {number} rotation Rotation.
* @param {number} hitTolerance Hit tolerance in pixels.
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {function(import("../../Feature.js").FeatureLike): T} callback Feature callback.
* @param {Array<import("../../Feature.js").FeatureLike>} declutteredFeatures Decluttered features.
* @return {T|undefined} Callback result.
@@ -178,7 +177,6 @@ class ExecutorGroup extends Disposable {
resolution,
rotation,
hitTolerance,
skippedFeaturesHash,
callback,
declutteredFeatures
) {
@@ -256,8 +254,7 @@ class ExecutorGroup extends Disposable {
builderType = ORDER[j];
executor = executors[builderType];
if (executor !== undefined) {
result = executor.executeHitDetection(context, transform, rotation,
skippedFeaturesHash, featureCallback, hitExtent);
result = executor.executeHitDetection(context, transform, rotation, featureCallback, hitExtent);
if (result) {
return result;
}
@@ -297,14 +294,12 @@ class ExecutorGroup extends Disposable {
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../transform.js").Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
* @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
* @param {Array<BuilderType>=} opt_builderTypes Ordered replay types to replay.
* Default is {@link module:ol/render/replay~ORDER}
* @param {Object<string, import("../canvas.js").DeclutterGroup>=} opt_declutterReplays Declutter replays.
*/
execute(context, transform, viewRotation, skippedFeaturesHash, snapToPixel, opt_builderTypes,
opt_declutterReplays) {
execute(context, transform, viewRotation, snapToPixel, opt_builderTypes, opt_declutterReplays) {
/** @type {Array<number>} */
const zs = Object.keys(this.executorsByZIndex_).map(Number);
@@ -335,7 +330,7 @@ class ExecutorGroup extends Disposable {
declutter.push(replay, transform.slice(0));
}
} else {
replay.execute(context, transform, viewRotation, skippedFeaturesHash, snapToPixel);
replay.execute(context, transform, viewRotation, snapToPixel);
}
}
}
@@ -436,7 +431,6 @@ export function getCircleArray(radius) {
*/
export function replayDeclutter(declutterReplays, context, rotation, opacity, snapToPixel, declutterItems) {
const zs = Object.keys(declutterReplays).map(Number).sort(numberSafeCompareFunction);
const skippedFeatureUids = {};
for (let z = 0, zz = zs.length; z < zz; ++z) {
const executorData = declutterReplays[zs[z].toString()];
let currentExecutor;
@@ -450,7 +444,7 @@ export function replayDeclutter(declutterReplays, context, rotation, opacity, sn
});
}
const transform = executorData[i++];
executor.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);
executor.execute(context, transform, rotation, snapToPixel);
}
}
}

6
src/ol/renderer/Map.js
View File

@@ -1,7 +1,7 @@
/**
* @module ol/renderer/Map
*/
import {abstract, getUid} from '../util.js';
import {abstract} from '../util.js';
import Disposable from '../Disposable.js';
import {getWidth} from '../extent.js';
import {TRUE} from '../functions.js';
@@ -95,8 +95,8 @@ class MapRenderer extends Disposable {
* @return {?} Callback result.
*/
function forEachFeatureAtCoordinate(managed, feature, layer) {
if (!(getUid(feature) in frameState.skippedFeatureUids && !managed)) {
return callback.call(thisArg, feature, managed ? layer : null);
if (managed) {
return callback.call(thisArg, feature, layer);
}
}

14
src/ol/renderer/canvas/VectorImageLayer.js
View File

@@ -3,7 +3,6 @@
*/
import ImageCanvas from '../../ImageCanvas.js';
import ViewHint from '../../ViewHint.js';
import {equals} from '../../array.js';
import {getHeight, getWidth, isEmpty, scaleFromCenter} from '../../extent.js';
import {assign} from '../../obj.js';
import CanvasImageLayerRenderer from './ImageLayer.js';
@@ -25,11 +24,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
constructor(layer) {
super(layer);
/**
* @type {!Array<string>}
*/
this.skippedFeatures_ = [];
/**
* @private
* @type {import("./VectorLayer.js").default}
@@ -76,7 +70,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
}
if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
let skippedFeatures = this.skippedFeatures_;
vectorRenderer.useContainer(null, null, 1);
const context = vectorRenderer.context;
const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
@@ -89,14 +82,10 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
rotation: 0
}))
}));
const newSkippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
const image = new ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas, function(callback) {
if (vectorRenderer.prepareFrame(imageFrameState) &&
(vectorRenderer.replayGroupChanged ||
!equals(skippedFeatures, newSkippedFeatures))) {
if (vectorRenderer.prepareFrame(imageFrameState) && vectorRenderer.replayGroupChanged) {
vectorRenderer.renderFrame(imageFrameState, null);
renderDeclutterItems(imageFrameState, null);
skippedFeatures = newSkippedFeatures;
callback();
}
});
@@ -104,7 +93,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
image.addEventListener(EventType.CHANGE, function() {
if (image.getState() === ImageState.LOADED) {
this.image_ = image;
this.skippedFeatures_ = skippedFeatures;
}
}.bind(this));
image.load();

9
src/ol/renderer/canvas/VectorLayer.js
View File

@@ -144,9 +144,8 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
const transform = this.getRenderTransform(frameState, width, height, 0);
const skippedFeatureUids = layerState.managed ? frameState.skippedFeatureUids : {};
const declutterReplays = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer()).getDeclutter() ? {} : null;
replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
if (vectorSource.getWrapX() && projection.canWrapX() && !containsExtent(projectionExtent, extent)) {
let startX = extent[0];
@@ -157,7 +156,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
--world;
offsetX = worldWidth * world;
const transform = this.getRenderTransform(frameState, width, height, offsetX);
replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
startX += worldWidth;
}
world = 0;
@@ -166,7 +165,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
++world;
offsetX = worldWidth * world;
const transform = this.getRenderTransform(frameState, width, height, offsetX);
replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
startX -= worldWidth;
}
}
@@ -203,7 +202,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
const layer = /** @type {import("../../layer/Vector").default} */ (this.getLayer());
/** @type {!Object<string, boolean>} */
const features = {};
const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance,
/**
* @param {import("../../Feature.js").FeatureLike} feature Feature.
* @return {?} Callback result.

6
src/ol/renderer/canvas/VectorTileLayer.js
View File

@@ -357,7 +357,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
const executorGroups = tile.executorGroups[getUid(layer)];
for (let t = 0, tt = executorGroups.length; t < tt; ++t) {
const executorGroup = executorGroups[t];
found = found || executorGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
found = found || executorGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance,
/**
* @param {import("../../Feature.js").FeatureLike} feature Feature.
* @return {?} Callback result.
@@ -497,7 +497,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
}
}
}
executorGroup.execute(context, transform, rotation, {}, hifi, replayTypes, declutterReplays);
executorGroup.execute(context, transform, rotation, hifi, replayTypes, declutterReplays);
if (!declutterReplays && !clipped) {
context.restore();
clips.push(currentClip);
@@ -617,7 +617,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
translateTransform(transform, -tileExtent[0], -tileExtent[3]);
for (let i = 0, ii = executorGroups.length; i < ii; ++i) {
const executorGroup = executorGroups[i];
executorGroup.execute(context, transform, 0, {}, true, IMAGE_REPLAYS[layer.getRenderMode()]);
executorGroup.execute(context, transform, 0, true, IMAGE_REPLAYS[layer.getRenderMode()]);
}
replayState.renderedTileResolution = tile.wantedResolution;
}

1
src/ol/source/Raster.js
View File

@@ -220,7 +220,6 @@ class RasterSource extends ImageSource {
pixelToCoordinateTransform: createTransform(),
postRenderFunctions: [],
size: [0, 0],
skippedFeatureUids: {},
tileQueue: this.tileQueue_,
time: Date.now(),
usedTiles: {},

451
test/spec/ol/interaction/select.test.js
View File

@@ -1,451 +0,0 @@
import Collection from '../../../../src/ol/Collection.js';
import Feature from '../../../../src/ol/Feature.js';
import Map from '../../../../src/ol/Map.js';
import MapBrowserEventType from '../../../../src/ol/MapBrowserEventType.js';
import MapBrowserPointerEvent from '../../../../src/ol/MapBrowserPointerEvent.js';
import View from '../../../../src/ol/View.js';
import Polygon from '../../../../src/ol/geom/Polygon.js';
import Interaction from '../../../../src/ol/interaction/Interaction.js';
import Select from '../../../../src/ol/interaction/Select.js';
import VectorLayer from '../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../src/ol/source/Vector.js';
describe('ol.interaction.Select', function() {
let target, map, layer, source;
const width = 360;
const height = 180;
beforeEach(function(done) {
target = document.createElement('div');
const style = target.style;
style.position = 'absolute';
style.left = '-1000px';
style.top = '-1000px';
style.width = width + 'px';
style.height = height + 'px';
document.body.appendChild(target);
const geometry = new Polygon([[[0, 0], [0, 40], [40, 40], [40, 0]]]);
// Four overlapping features, two features of type "foo" and two features
// of type "bar". The rendering order is, from top to bottom, foo -> bar
// -> foo -> bar.
const features = [];
features.push(
new Feature({
geometry: geometry,
type: 'bar'
}),
new Feature({
geometry: geometry,
type: 'foo'
}),
new Feature({
geometry: geometry,
type: 'bar'
}),
new Feature({
geometry: geometry,
type: 'foo'
}));
source = new VectorSource({
features: features
});
layer = new VectorLayer({source: source});
map = new Map({
target: target,
layers: [layer],
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
resolution: 1
})
});
map.once('postrender', function() {
done();
});
});
afterEach(function() {
map.dispose();
document.body.removeChild(target);
});
/**
* Simulates a browser event on the map viewport. The client x/y location
* will be adjusted as if the map were centered at 0,0.
* @param {string} type Event type.
* @param {number} x Horizontal offset from map center.
* @param {number} y Vertical offset from map center.
* @param {boolean=} opt_shiftKey Shift key is pressed.
*/
function simulateEvent(type, x, y, opt_shiftKey) {
const viewport = map.getViewport();
// calculated in case body has top < 0 (test runner with small window)
const position = viewport.getBoundingClientRect();
const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false;
const event = new PointerEvent(type, {
clientX: position.left + x + width / 2,
clientY: position.top + y + height / 2,
shiftKey: shiftKey
});
map.handleMapBrowserEvent(new MapBrowserPointerEvent(type, map, event));
}
describe('constructor', function() {
it('creates a new interaction', function() {
const select = new Select();
expect(select).to.be.a(Select);
expect(select).to.be.a(Interaction);
});
describe('user-provided collection', function() {
it('uses the user-provided collection', function() {
const features = new Collection();
const select = new Select({features: features});
expect(select.getFeatures()).to.be(features);
});
});
});
describe('selecting a polygon', function() {
let select;
beforeEach(function() {
select = new Select();
map.addInteraction(select);
});
it('select with single-click', function() {
const listenerSpy = sinon.spy(function(e) {
expect(e.selected).to.have.length(1);
});
select.on('select', listenerSpy);
simulateEvent('singleclick', 10, -20);
expect(listenerSpy.callCount).to.be(1);
const features = select.getFeatures();
expect(features.getLength()).to.equal(1);
});
it('single-click outside the geometry', function() {
const listenerSpy = sinon.spy(function(e) {
expect(e.selected).to.have.length(1);
});
select.on('select', listenerSpy);
simulateEvent(MapBrowserEventType.SINGLECLICK, -10, -10);
expect(listenerSpy.callCount).to.be(0);
const features = select.getFeatures();
expect(features.getLength()).to.equal(0);
});
it('select twice with single-click', function() {
const listenerSpy = sinon.spy(function(e) {
expect(e.selected).to.have.length(1);
});
select.on('select', listenerSpy);
simulateEvent(MapBrowserEventType.SINGLECLICK, 10, -20);
simulateEvent(MapBrowserEventType.SINGLECLICK, 9, -21);
expect(listenerSpy.callCount).to.be(1);
const features = select.getFeatures();
expect(features.getLength()).to.equal(1);
});
it('select with shift single-click', function() {
const listenerSpy = sinon.spy(function(e) {
expect(e.selected).to.have.length(1);
});
select.on('select', listenerSpy);
simulateEvent('singleclick', 10, -20, true);
expect(listenerSpy.callCount).to.be(1);
const features = select.getFeatures();
expect(features.getLength()).to.equal(1);
});
});
describe('multiselecting polygons', function() {
let select;
beforeEach(function() {
select = new Select({
multi: true
});
map.addInteraction(select);
});
it('select with single-click', function() {
const listenerSpy = sinon.spy(function(e) {
expect(e.selected).to.have.length(4);
});
select.on('select', listenerSpy);
simulateEvent('singleclick', 10, -20);
expect(listenerSpy.callCount).to.be(1);
const features = select.getFeatures();
expect(features.getLength()).to.equal(4);
});
it('select with shift single-click', function() {
const listenerSpy = sinon.spy(function(e) {
expect(e.selected).to.have.length(4);
});
select.on('select', listenerSpy);
simulateEvent('singleclick', 10, -20, true);
expect(listenerSpy.callCount).to.be(1);
let features = select.getFeatures();
expect(features.getLength()).to.equal(4);
expect(select.getLayer(features.item(0))).to.equal(layer);
// Select again to make sure the internal layer isn't reported
simulateEvent('singleclick', 10, -20);
expect(listenerSpy.callCount).to.be(1);
features = select.getFeatures();
expect(features.getLength()).to.equal(4);
expect(select.getLayer(features.item(0))).to.equal(layer);
});
});
describe('toggle selecting polygons', function() {
let select;
beforeEach(function() {
select = new Select({
multi: true
});
map.addInteraction(select);
});
it('with SHIFT + single-click', function() {
const listenerSpy = sinon.spy();
select.on('select', listenerSpy);
simulateEvent('singleclick', 10, -20, true);
expect(listenerSpy.callCount).to.be(1);
let features = select.getFeatures();
expect(features.getLength()).to.equal(4);
map.renderSync();
simulateEvent('singleclick', 10, -20, true);
expect(listenerSpy.callCount).to.be(2);
features = select.getFeatures();
expect(features.getLength()).to.equal(0);
});
});
describe('filter features using the filter option', function() {
describe('with multi set to true', function() {
it('only selects features that pass the filter', function() {
const select = new Select({
multi: true,
filter: function(feature, layer) {
return feature.get('type') === 'bar';
}
});
map.addInteraction(select);
simulateEvent('singleclick', 10, -20);
const features = select.getFeatures();
expect(features.getLength()).to.equal(2);
expect(features.item(0).get('type')).to.be('bar');
expect(features.item(1).get('type')).to.be('bar');
});
it('only selects features that pass the filter ' +
'using shift single-click', function() {
const select = new Select({
multi: true,
filter: function(feature, layer) {
return feature.get('type') === 'bar';
}
});
map.addInteraction(select);
simulateEvent('singleclick', 10, -20,
true);
const features = select.getFeatures();
expect(features.getLength()).to.equal(2);
expect(features.item(0).get('type')).to.be('bar');
expect(features.item(1).get('type')).to.be('bar');
});
});
describe('with multi set to false', function() {
it('only selects the first feature that passes the filter', function() {
const select = new Select({
multi: false,
filter: function(feature, layer) {
return feature.get('type') === 'bar';
}
});
map.addInteraction(select);
simulateEvent('singleclick', 10, -20);
const features = select.getFeatures();
expect(features.getLength()).to.equal(1);
expect(features.item(0).get('type')).to.be('bar');
});
it('only selects the first feature that passes the filter ' +
'using shift single-click', function() {
const select = new Select({
multi: false,
filter: function(feature, layer) {
return feature.get('type') === 'bar';
}
});
map.addInteraction(select);
simulateEvent('singleclick', 10, -20,
true);
const features = select.getFeatures();
expect(features.getLength()).to.equal(1);
expect(features.item(0).get('type')).to.be('bar');
});
});
});
describe('#getLayer(feature)', function() {
let interaction;
beforeEach(function() {
interaction = new Select();
map.addInteraction(interaction);
});
afterEach(function() {
map.removeInteraction(interaction);
});
it('returns a layer from a selected feature', function() {
const listenerSpy = sinon.spy(function(e) {
const feature = e.selected[0];
const layer_ = interaction.getLayer(feature);
expect(e.selected).to.have.length(1);
expect(feature).to.be.a(Feature);
expect(layer_).to.be.a(VectorLayer);
expect(layer_).to.equal(layer);
});
interaction.on('select', listenerSpy);
simulateEvent('singleclick', 10, -20);
// Select again to make sure that the internal layer doesn't get reported.
simulateEvent('singleclick', 10, -20);
});
});
describe('#setActive()', function() {
let interaction;
beforeEach(function() {
interaction = new Select();
expect(interaction.getActive()).to.be(true);
map.addInteraction(interaction);
expect(interaction.featureOverlay_).not.to.be(null);
simulateEvent('singleclick', 10, -20);
});
afterEach(function() {
map.removeInteraction(interaction);
});
describe('#setActive(false)', function() {
it('keeps the the selection', function() {
interaction.setActive(false);
expect(interaction.getFeatures().getLength()).to.equal(1);
});
});
describe('#setActive(true)', function() {
beforeEach(function() {
interaction.setActive(false);
});
it('fires change:active', function() {
const listenerSpy = sinon.spy();
interaction.on('change:active', listenerSpy);
interaction.setActive(true);
expect(listenerSpy.callCount).to.be(1);
});
});
});
describe('#setMap()', function() {
let interaction;
beforeEach(function() {
interaction = new Select();
expect(interaction.getActive()).to.be(true);
});
describe('#setMap(null)', function() {
beforeEach(function() {
map.addInteraction(interaction);
});
afterEach(function() {
map.removeInteraction(interaction);
});
describe('#setMap(null) when interaction is active', function() {
it('unsets the map from the feature overlay', function() {
const spy = sinon.spy(interaction.featureOverlay_, 'setMap');
interaction.setMap(null);
expect(spy.getCall(0).args[0]).to.be(null);
});
});
});
describe('#setMap(map)', function() {
describe('#setMap(map) when interaction is active', function() {
it('sets the map into the feature overlay', function() {
const spy = sinon.spy(interaction.featureOverlay_, 'setMap');
interaction.setMap(map);
expect(spy.getCall(0).args[0]).to.be(map);
});
});
});
});
describe('#getOverlay', function() {
it('returns the feature overlay layer', function() {
const select = new Select();
expect (select.getOverlay()).to.eql(select.featureOverlay_);
});
});
});

45
test/spec/ol/renderer/canvas/builder.test.js
View File

@@ -1,4 +1,3 @@
import {getUid} from '../../../../../src/ol/util.js';
import Feature from '../../../../../src/ol/Feature.js';
import GeometryCollection from '../../../../../src/ol/geom/GeometryCollection.js';
import LineString from '../../../../../src/ol/geom/LineString.js';
@@ -29,14 +28,13 @@ describe('ol.render.canvas.BuilderGroup', function() {
/**
* @param {BuilderGroup} builder The builder to get instructions from.
* @param {Object=} skippedUids The ids to skip.
* @param {number=} pixelRatio The pixel ratio.
* @param {boolean=} overlaps Whether there is overlaps.
*/
function execute(builder, skippedUids, pixelRatio, overlaps) {
function execute(builder, pixelRatio, overlaps) {
const executor = new ExecutorGroup([-180, -90, 180, 90], 1,
pixelRatio || 1, !!overlaps, builder.finish());
executor.execute(context, transform, 0, skippedUids || {});
executor.execute(context, transform, 0, false);
}
beforeEach(function() {
@@ -147,43 +145,6 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(beginPathCount).to.be(3);
});
it('batches fill and stroke instructions for skipped feature at the beginning', function() {
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style2, 1);
renderFeature(builder, feature3, style2, 1);
const skippedUids = {};
skippedUids[getUid(feature1)] = true;
execute(builder, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('batches fill and stroke instructions for skipped feature at the end', function() {
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style2, 1);
const skippedUids = {};
skippedUids[getUid(feature3)] = true;
execute(builder, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('batches fill and stroke instructions for skipped features', function() {
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style2, 1);
const skippedUids = {};
skippedUids[getUid(feature1)] = true;
skippedUids[getUid(feature2)] = true;
execute(builder, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('does not batch when overlaps is set to true', function() {
builder = new BuilderGroup(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(builder, feature1, style1, 1);
@@ -263,7 +224,7 @@ describe('ol.render.canvas.BuilderGroup', function() {
renderFeature(builder, multipolygon, style, 1);
renderFeature(builder, geometrycollection, style, 1);
scaleTransform(transform, 0.1, 0.1);
execute(builder, {}, 1, true);
execute(builder, 1, true);
expect(calls.length).to.be(9);
expect(calls[0].geometry).to.be(point.getGeometry());
expect(calls[0].feature).to.be(point);

1
test/spec/ol/renderer/canvas/vectorimage.test.js
View File

@@ -38,7 +38,6 @@ describe('ol/renderer/canvas/VectorImageLayer', function() {
layerStatesArray: [layer.getLayerState()],
layerIndex: 0,
extent: extent,
skippedFeatureUids: {},
viewHints: [],
viewState: {
projection: projection,

4
test/spec/ol/renderer/canvas/vectorlayer.test.js
View File

@@ -190,7 +190,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
const replayGroup = {};
renderer.replayGroup_ = replayGroup;
replayGroup.forEachFeatureAtCoordinate = function(coordinate,
resolution, rotation, hitTolerance, skippedFeaturesUids, callback) {
resolution, rotation, hitTolerance, callback) {
const feature = new Feature();
callback(feature);
callback(feature);
@@ -202,7 +202,6 @@ describe('ol.renderer.canvas.VectorLayer', function() {
const coordinate = [0, 0];
const frameState = {
layerStatesArray: [{}],
skippedFeatureUids: {},
viewState: {
resolution: 1,
rotation: 0
@@ -228,7 +227,6 @@ describe('ol.renderer.canvas.VectorLayer', function() {
worldWidth = getWidth(projExtent);
buffer = layer.getRenderBuffer();
frameState = {
skippedFeatureUids: {},
viewHints: [],
viewState: {
projection: projection,

3
test/spec/ol/renderer/canvas/vectortilelayer.test.js
View File

@@ -314,7 +314,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
});
renderer = new CanvasVectorTileLayerRenderer(layer);
executorGroup.forEachFeatureAtCoordinate = function(coordinate,
resolution, rotation, hitTolerance, skippedFeaturesUids, callback) {
resolution, rotation, hitTolerance, callback) {
const feature = new Feature();
callback(feature);
callback(feature);
@@ -326,7 +326,6 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
const coordinate = [0, 0];
const frameState = {
layerStatesArray: [{}],
skippedFeatureUids: {},
viewState: {
projection: getProjection('EPSG:3857'),
resolution: 1,