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

Extending FeatureLoader type and refactoring loadFeaturesXhr

Browse Source
This commit is contained in:
Simon Seyock
2020-10-06 10:28:07 +02:00
parent 1ec6713f31
commit 393e83cd29
2 changed files with 123 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/ol/featureloader.js
View File

@@ -16,15 +16,19 @@ let withCredentials = false;
* load features. * load features.
* *
* This function takes an {@link module:ol/extent~Extent} representing the area to be loaded, * This function takes an {@link module:ol/extent~Extent} representing the area to be loaded,
* a `{number}` representing the resolution (map units per pixel) and an * a `{number}` representing the resolution (map units per pixel), an
* {@link module:ol/proj/Projection} for the projection as * {@link module:ol/proj/Projection} for the projection and success and failure callbacks as
* arguments. `this` within the function is bound to the * arguments. `this` within the function is bound to the
* {@link module:ol/source/Vector} it's called from. * {@link module:ol/source/Vector} it's called from.
* *
* The function is responsible for loading the features and adding them to the * The function is responsible for loading the features and adding them to the
* source. * source.
* @typedef {function(this:(import("./source/Vector").default|import("./VectorTile.js").default), import("./extent.js").Extent, number, * @typedef {function(this:(import("./source/Vector").default|import("./VectorTile.js").default),
* import("./proj/Projection.js").default): void} FeatureLoader * import("./extent.js").Extent,
* number,
* import("./proj/Projection.js").default,
* function(): void=,
* function(): void=): void} FeatureLoader
* @api * @api
*/ */
@@ -43,81 +47,77 @@ let withCredentials = false;
/** /**
* @param {string|FeatureUrlFunction} url Feature URL service. * @param {string|FeatureUrlFunction} url Feature URL service.
* @param {import("./format/Feature.js").default} format Feature format. * @param {import("./format/Feature.js").default} format Feature format.
* @param {function(this:import("./VectorTile.js").default, Array<import("./Feature.js").default>, import("./proj/Projection.js").default, import("./extent.js").Extent): void|function(this:import("./source/Vector").default, Array<import("./Feature.js").default>): void} success * @param {import("./extent.js").Extent} extent Extent.
* Function called with the loaded features and optionally with the data * @param {number} resolution Resolution.
* projection. Called with the vector tile or source as `this`. * @param {import("./proj/Projection.js").default} projection Projection.
* @param {function(this:import("./VectorTile.js").default): void|function(this:import("./source/Vector").default): void} failure * @param {function(Array<import("./Feature.js").default>, import("./proj/Projection.js").default): void} success Success
* Function called when loading failed. Called with the vector tile or * Function called with the loaded features and optionally with the data projection.
* source as `this`. * @param {function(): void} failure Failure
* @return {FeatureLoader} The feature loader. * Function called when loading failed.
*/ */
export function loadFeaturesXhr(url, format, success, failure) { export function loadFeaturesXhr(
return ( url,
/** format,
* @param {import("./extent.js").Extent} extent Extent. extent,
* @param {number} resolution Resolution. resolution,
* @param {import("./proj/Projection.js").default} projection Projection. projection,
* @this {import("./source/Vector").default|import("./VectorTile.js").default} success,
*/ failure
function (extent, resolution, projection) { ) {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open( xhr.open(
'GET', 'GET',
typeof url === 'function' ? url(extent, resolution, projection) : url, typeof url === 'function' ? url(extent, resolution, projection) : url,
true true
);
if (format.getType() == FormatType.ARRAY_BUFFER) {
xhr.responseType = 'arraybuffer';
}
xhr.withCredentials = withCredentials;
/**
* @param {Event} event Event.
* @private
*/
xhr.onload = function (event) {
// status will be 0 for file:// urls
if (!xhr.status || (xhr.status >= 200 && xhr.status < 300)) {
const type = format.getType();
/** @type {Document|Node|Object|string|undefined} */
let source;
if (type == FormatType.JSON || type == FormatType.TEXT) {
source = xhr.responseText;
} else if (type == FormatType.XML) {
source = xhr.responseXML;
if (!source) {
source = new DOMParser().parseFromString(
xhr.responseText,
'application/xml'
);
}
} else if (type == FormatType.ARRAY_BUFFER) {
source = /** @type {ArrayBuffer} */ (xhr.response);
}
if (source) {
success.call(
this,
format.readFeatures(source, {
extent: extent,
featureProjection: projection,
}),
format.readProjection(source)
);
} else {
failure.call(this);
}
} else {
failure.call(this);
}
}.bind(this);
/**
* @private
*/
xhr.onerror = function () {
failure.call(this);
}.bind(this);
xhr.send();
}
); );
if (format.getType() == FormatType.ARRAY_BUFFER) {
xhr.responseType = 'arraybuffer';
}
xhr.withCredentials = withCredentials;
/**
* @param {Event} event Event.
* @private
*/
xhr.onload = function (event) {
// status will be 0 for file:// urls
if (!xhr.status || (xhr.status >= 200 && xhr.status < 300)) {
const type = format.getType();
/** @type {Document|Node|Object|string|undefined} */
let source;
if (type == FormatType.JSON || type == FormatType.TEXT) {
source = xhr.responseText;
} else if (type == FormatType.XML) {
source = xhr.responseXML;
if (!source) {
source = new DOMParser().parseFromString(
xhr.responseText,
'application/xml'
);
}
} else if (type == FormatType.ARRAY_BUFFER) {
source = /** @type {ArrayBuffer} */ (xhr.response);
}
if (source) {
success(
/** @type {Array<import("./Feature.js").default>} */
(format.readFeatures(source, {
extent: extent,
featureProjection: projection,
})),
format.readProjection(source)
);
} else {
failure();
}
} else {
failure();
}
};
/**
* @private
*/
xhr.onerror = failure;
xhr.send();
} }
/** /**
@@ -130,25 +130,35 @@ export function loadFeaturesXhr(url, format, success, failure) {
* @api * @api
*/ */
export function xhr(url, format) { export function xhr(url, format) {
return loadFeaturesXhr( /**
url, * @param {import("./extent.js").Extent} extent Extent.
format, * @param {number} resolution Resolution.
/** * @param {import("./proj/Projection.js").default} projection Projection.
* @param {Array<import("./Feature.js").default>} features The loaded features. * @param {function(): void} success Success
* @param {import("./proj/Projection.js").default} dataProjection Data * Function called when loading succeeded.
* projection. * @param {function(): void} failure Failure
* @this {import("./source/Vector").default|import("./VectorTile.js").default} * Function called when loading failed.
*/ * @this {import("./source/Vector").default}
function (features, dataProjection) { */
const sourceOrTile = /** @type {?} */ (this); return function (extent, resolution, projection, success, failure) {
if (typeof sourceOrTile.addFeatures === 'function') { const sourceOrTile = /** @type {import("./source/Vector").default} */ (this);
/** @type {import("./source/Vector").default} */ (sourceOrTile).addFeatures( loadFeaturesXhr(
features url,
); format,
} extent,
}, resolution,
/* FIXME handle error */ VOID projection,
); /**
* @param {Array<import("./Feature.js").default>} features The loaded features.
* @param {import("./proj/Projection.js").default} dataProjection Data
* projection.
*/
function (features, dataProjection) {
sourceOrTile.addFeatures(features);
},
/* FIXME handle error */ VOID
);
};
} }
/** /**

23
src/ol/source/VectorTile.js
View File

@@ -528,11 +528,22 @@ export default VectorTile;
* @param {string} url URL. * @param {string} url URL.
*/ */
export function defaultLoadFunction(tile, url) { export function defaultLoadFunction(tile, url) {
const loader = loadFeaturesXhr( tile.setLoader(
url, /**
tile.getFormat(), * @param {import("../extent.js").Extent} extent Extent.
tile.onLoad.bind(tile), * @param {number} resolution Resolution.
tile.onError.bind(tile) * @param {import("../proj/Projection.js").default} projection Projection.
*/
function (extent, resolution, projection) {
loadFeaturesXhr(
url,
tile.getFormat(),
extent,
resolution,
projection,
tile.onLoad.bind(tile),
tile.onError.bind(tile)
);
}
); );
tile.setLoader(loader);
} }