113 lines
2.8 KiB
TypeScript
113 lines
2.8 KiB
TypeScript
import { Feature } from 'ol';
|
|
import { equals, Extent } from 'ol/extent';
|
|
import MVT from 'ol/format/MVT';
|
|
import { fromLonLat, Projection } from 'ol/proj';
|
|
import VectorTileSource from 'ol/source/VectorTile.js';
|
|
|
|
class ClusterableVectorTileSource extends VectorTileSource {
|
|
extent: Extent | null = null;
|
|
extentProjected: Extent | null = null;
|
|
featuresSent: boolean = false;
|
|
|
|
changeHandler = () => {
|
|
this.featuresSent = false;
|
|
console.log({
|
|
caller: 'ClusterableVectorTileSource',
|
|
method: 'changeHandler',
|
|
this: this,
|
|
});
|
|
};
|
|
|
|
constructor(properties: any) {
|
|
properties.format = new MVT({ featureClass: Feature });
|
|
super(properties);
|
|
this.addEventListener('change', this.changeHandler);
|
|
console.log({
|
|
caller: 'ClusterableVectorTileSource',
|
|
method: 'constructor',
|
|
this: this,
|
|
});
|
|
}
|
|
|
|
loadFeatures = (
|
|
extent: Extent,
|
|
resolution: number,
|
|
projection: Projection
|
|
) => {
|
|
console.log({
|
|
caller: 'ClusterableVectorTileSource',
|
|
method: 'loadFeatures',
|
|
extent,
|
|
resolution,
|
|
projection,
|
|
this: this,
|
|
});
|
|
if (this.extent === null || !equals(this.extent, extent)) {
|
|
this.extent = extent;
|
|
if (this.projection != null) {
|
|
this.extentProjected = fromLonLat(
|
|
extent.slice(0, 2),
|
|
this.projection
|
|
).concat(fromLonLat(extent.slice(2), this.projection));
|
|
}
|
|
}
|
|
if (!this.featuresSent) {
|
|
super.dispatchEvent('change');
|
|
}
|
|
this.featuresSent = false;
|
|
};
|
|
|
|
getFeatures = () => {
|
|
const result =
|
|
this.extentProjected !== null
|
|
? super.getFeaturesInExtent(this.extentProjected)
|
|
: [];
|
|
console.log({
|
|
caller: 'ClusterableVectorTileSource',
|
|
method: 'getFeatures',
|
|
result,
|
|
this: this,
|
|
});
|
|
//console.trace();
|
|
this.featuresSent = true;
|
|
return result;
|
|
};
|
|
|
|
getFeaturesInExtent = (extent: Extent) => {
|
|
const features = super.getFeaturesInExtent(extent);
|
|
console.log({
|
|
caller: 'ClusterableVectorTileSource',
|
|
method: 'getFeaturesInExtent',
|
|
extent,
|
|
features,
|
|
this: this,
|
|
});
|
|
return features;
|
|
// if (this.projection === null) {
|
|
// return super.getFeaturesInExtent(extent);
|
|
// }
|
|
// return super.getFeaturesInExtent(
|
|
// (this.extentProjected = fromLonLat(
|
|
// extent.slice(0, 2),
|
|
// this.projection
|
|
// ).concat(fromLonLat(extent.slice(2), this.projection)))
|
|
// );
|
|
};
|
|
|
|
addEventListener = (type: string, listener: any) => {
|
|
console.log({
|
|
caller: 'ClusterableVectorTileSource',
|
|
method: 'addEventListener',
|
|
type,
|
|
listener,
|
|
this: this,
|
|
});
|
|
super.addEventListener(type, listener);
|
|
if (type === 'change') {
|
|
super.addEventListener('tileloadend', listener);
|
|
}
|
|
};
|
|
}
|
|
|
|
export default ClusterableVectorTileSource;
|