From 7ec4ecbcdb5e12d6184049221522d4e953a08868 Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Wed, 10 May 2023 18:55:14 +0800 Subject: [PATCH] openlayers: simplify down to single index.js [#3] --- openlayers/package-lock.json | 4 +- openlayers/package.json | 4 +- openlayers/src/PMTilesRasterSource.js | 38 ----------- openlayers/src/PMTilesVectorSource.js | 53 --------------- openlayers/src/index.js | 97 ++++++++++++++++++++++++++- 5 files changed, 99 insertions(+), 97 deletions(-) delete mode 100644 openlayers/src/PMTilesRasterSource.js delete mode 100644 openlayers/src/PMTilesVectorSource.js diff --git a/openlayers/package-lock.json b/openlayers/package-lock.json index 565f0ce..a760425 100644 --- a/openlayers/package-lock.json +++ b/openlayers/package-lock.json @@ -1,12 +1,12 @@ { "name": "ol-pmtiles", - "version": "0.0.2", + "version": "0.0.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ol-pmtiles", - "version": "0.0.2", + "version": "0.0.3", "license": "BSD-3-Clause", "dependencies": { "pmtiles": "^2.7.0" diff --git a/openlayers/package.json b/openlayers/package.json index 77452a7..e07ff01 100644 --- a/openlayers/package.json +++ b/openlayers/package.json @@ -1,11 +1,11 @@ { "name": "ol-pmtiles", - "version": "0.0.2", + "version": "0.0.3", "description": "PMTiles sources for OpenLayers", "type": "module", "main": "src/index.js", "files": [ - "src/*" + "src/index.js" ], "repository": { "type": "git", diff --git a/openlayers/src/PMTilesRasterSource.js b/openlayers/src/PMTilesRasterSource.js deleted file mode 100644 index bb53707..0000000 --- a/openlayers/src/PMTilesRasterSource.js +++ /dev/null @@ -1,38 +0,0 @@ -import DataTile from "ol/source/DataTile"; -import * as pmtiles from "pmtiles"; - -class PMTilesRasterSource extends DataTile { - loadImage = (src) => { - return new Promise((resolve, reject) => { - const img = new Image(); - img.addEventListener("load", () => resolve(img)); - img.addEventListener("error", () => reject(new Error("load failed"))); - img.src = src; - }); - }; - - constructor(options) { - super({ - state: "loading", - attributions: options.attributions, - tileSize: options.tileSize, - }); - - const p = new pmtiles.PMTiles(options.url); - p.getHeader().then((h) => { - this.tileGrid.minZoom = h.minZoom; - this.tileGrid.maxZoom = h.maxZoom; - this.setLoader(async (z, x, y) => { - const response = await p.getZxy(z, x, y); - const blob = new Blob([response.data]); - const src = URL.createObjectURL(blob); - const image = await this.loadImage(src); - URL.revokeObjectURL(src); - return image; - }); - this.setState("ready"); - }); - } -} - -export default PMTilesRasterSource; diff --git a/openlayers/src/PMTilesVectorSource.js b/openlayers/src/PMTilesVectorSource.js deleted file mode 100644 index 557f645..0000000 --- a/openlayers/src/PMTilesVectorSource.js +++ /dev/null @@ -1,53 +0,0 @@ -import VectorTile from "ol/source/VectorTile"; -import TileState from "ol/TileState"; -import { MVT } from "ol/format"; -import * as pmtiles from "pmtiles"; - -class PMTilesVectorSource extends VectorTile { - tileLoadFunction = (tile, url) => { - // the URL construction is done internally by OL, so we need to parse it - // back out here using a hacky regex - const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/); - const result = url.match(re); - const z = +result[2]; - const x = +result[3]; - const y = +result[4]; - - tile.setLoader((extent, resolution, projection) => { - tile.setState(TileState.LOADING); - this._p.getZxy(z, x, y).then((tile_result) => { - if (tile_result) { - const format = tile.getFormat(); - const features = format.readFeatures(tile_result.data.buffer, { - extent: extent, - featureProjection: projection, - }); - tile.setFeatures(features); - tile.setState(TileState.LOADED); - } else { - tile.setFeatures([]); - tile.setState(TileState.EMPTY); - } // TODO error state - }); - }); - }; - - constructor(options) { - super({ - state: "loading", - url: "pmtiles://" + options.url + "/{z}/{x}/{y}", - format: new MVT(), - attributions: options.attributions, - }); - - this._p = new pmtiles.PMTiles(options.url); - this._p.getHeader().then((h) => { - this.tileGrid.minZoom = h.minZoom; - this.tileGrid.maxZoom = h.maxZoom; - this.setTileLoadFunction(this.tileLoadFunction); - this.setState("ready"); - }); - } -} - -export default PMTilesVectorSource; diff --git a/openlayers/src/index.js b/openlayers/src/index.js index 08ee71e..4370add 100644 --- a/openlayers/src/index.js +++ b/openlayers/src/index.js @@ -1,2 +1,95 @@ -export { default as PMTilesRasterSource } from './PMTilesRasterSource.js'; -export { default as PMTilesVectorSource } from './PMTilesVectorSource.js'; \ No newline at end of file +import DataTile from "ol/source/DataTile"; +import VectorTile from "ol/source/VectorTile"; +import TileState from "ol/TileState"; +import { MVT } from "ol/format"; +import * as pmtiles from "pmtiles"; + +export class PMTilesRasterSource extends DataTile { + loadImage = (src) => { + return new Promise((resolve, reject) => { + const img = new Image(); + img.addEventListener("load", () => resolve(img)); + img.addEventListener("error", () => reject(new Error("load failed"))); + img.src = src; + }); + }; + + constructor(options) { + super({ + ...options, + ...{ + state: "loading", + }, + }); + + const p = new pmtiles.PMTiles(options.url); + p.getHeader().then((h) => { + this.tileGrid.minZoom = h.minZoom; + this.tileGrid.maxZoom = h.maxZoom; + this.setLoader(async (z, x, y) => { + const response = await p.getZxy(z, x, y); + const src = URL.createObjectURL(new Blob([response.data])); + const image = await this.loadImage(src); + URL.revokeObjectURL(src); + return image; + }); + this.setState("ready"); + }); + } +} + +export class PMTilesVectorSource extends VectorTile { + tileLoadFunction = (tile, url) => { + // the URL construction is done internally by OL, so we need to parse it + // back out here using a hacky regex + const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/); + const result = url.match(re); + const z = +result[2]; + const x = +result[3]; + const y = +result[4]; + + tile.setLoader((extent, resolution, projection) => { + tile.setState(TileState.LOADING); + this.pmtiles_ + .getZxy(z, x, y) + .then((tile_result) => { + if (tile_result) { + const format = tile.getFormat(); + tile.setFeatures( + format.readFeatures(tile_result.data.buffer, { + extent: extent, + featureProjection: projection, + }) + ); + tile.setState(TileState.LOADED); + } else { + tile.setFeatures([]); + tile.setState(TileState.EMPTY); + } + }) + .catch((err) => { + tile.setFeatures([]); + tile.setState(TileState.ERROR); + }); + }); + }; + + constructor(options) { + super({ + ...options, + ...{ + state: "loading", + url: "pmtiles://" + options.url + "/{z}/{x}/{y}", + format: new MVT(), + }, + }); + + this.pmtiles_ = new pmtiles.PMTiles(options.url); + this.pmtiles_.getHeader().then((h) => { + this.tileGrid.minZoom = h.minZoom; + this.tileGrid.maxZoom = h.maxZoom; + this.setTileLoadFunction(this.tileLoadFunction); + this.setState("ready"); + }); + } +}