@geospatial-sdk/openlayers 0.0.5-dev.16 → 0.0.5-dev.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/map/create-map.d.ts.map +1 -1
- package/dist/map/create-map.js +1 -1
- package/dist/map/index.d.ts +1 -0
- package/dist/map/index.d.ts.map +1 -1
- package/dist/map/index.js +1 -0
- package/dist/map/register-events.d.ts +12 -0
- package/dist/map/register-events.d.ts.map +1 -0
- package/dist/map/register-events.js +114 -0
- package/lib/map/create-map.test.ts +1 -0
- package/lib/map/create-map.ts +4 -1
- package/lib/map/index.ts +1 -0
- package/lib/map/register-events.test.ts +199 -0
- package/lib/map/register-events.ts +158 -0
- package/package.json +6 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA0BnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA0BnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAwL7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAyBpE;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}
|
package/dist/map/create-map.js
CHANGED
|
@@ -45,7 +45,7 @@ export function createLayer(layerModel) {
|
|
|
45
45
|
layer = new TileLayer({
|
|
46
46
|
source: new TileWMS({
|
|
47
47
|
url: removeSearchParams(layerModel.url, ["request", "service"]),
|
|
48
|
-
params: { LAYERS: layerModel.name },
|
|
48
|
+
params: Object.assign({ LAYERS: layerModel.name }, (layerModel.style && { STYLES: layerModel.style })),
|
|
49
49
|
gutter: 20,
|
|
50
50
|
attributions: layerModel.attributions,
|
|
51
51
|
}),
|
package/dist/map/index.d.ts
CHANGED
package/dist/map/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/map/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/map/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/map/index.js
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import Map from "ol/Map";
|
|
2
|
+
import { MapEventsByType } from "@geospatial-sdk/core";
|
|
3
|
+
import { Coordinate } from "ol/coordinate";
|
|
4
|
+
import TileWMS from "ol/source/TileWMS";
|
|
5
|
+
import ImageWMS from "ol/source/ImageWMS";
|
|
6
|
+
import { Pixel } from "ol/pixel";
|
|
7
|
+
import type { Feature } from "geojson";
|
|
8
|
+
export declare function getFeaturesFromVectorSources(olMap: Map, pixel: Pixel): Feature[];
|
|
9
|
+
export declare function getGFIUrl(source: TileWMS | ImageWMS, map: Map, coordinate: Coordinate): string | null;
|
|
10
|
+
export declare function getFeaturesFromWmsSources(olMap: Map, coordinate: Coordinate): Promise<Feature[]>;
|
|
11
|
+
export declare function listen<T extends keyof MapEventsByType>(map: Map, eventType: T, callback: (event: MapEventsByType[T]) => void): void;
|
|
12
|
+
//# sourceMappingURL=register-events.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,QAAQ,CAAC;AAClD,OAAO,EAIL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAK1D,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AAyCD,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QAgC9C"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, } from "@geospatial-sdk/core";
|
|
11
|
+
import { toLonLat } from "ol/proj";
|
|
12
|
+
import GeoJSON from "ol/format/GeoJSON";
|
|
13
|
+
import TileWMS from "ol/source/TileWMS";
|
|
14
|
+
import ImageWMS from "ol/source/ImageWMS";
|
|
15
|
+
import Layer from "ol/layer/Layer";
|
|
16
|
+
import throttle from "lodash.throttle";
|
|
17
|
+
const GEOJSON = new GeoJSON();
|
|
18
|
+
export function getFeaturesFromVectorSources(olMap, pixel) {
|
|
19
|
+
const olFeatures = olMap.getFeaturesAtPixel(pixel);
|
|
20
|
+
const { features } = GEOJSON.writeFeaturesObject(olFeatures);
|
|
21
|
+
if (!features) {
|
|
22
|
+
return [];
|
|
23
|
+
}
|
|
24
|
+
return features;
|
|
25
|
+
}
|
|
26
|
+
export function getGFIUrl(source, map, coordinate) {
|
|
27
|
+
var _a;
|
|
28
|
+
const view = map.getView();
|
|
29
|
+
const projection = view.getProjection();
|
|
30
|
+
const resolution = view.getResolution();
|
|
31
|
+
const params = Object.assign(Object.assign({}, source.getParams()), { INFO_FORMAT: "application/json" });
|
|
32
|
+
return ((_a = source.getFeatureInfoUrl(coordinate, resolution, projection, params)) !== null && _a !== void 0 ? _a : null);
|
|
33
|
+
}
|
|
34
|
+
export function getFeaturesFromWmsSources(olMap, coordinate) {
|
|
35
|
+
const wmsSources = olMap
|
|
36
|
+
.getLayers()
|
|
37
|
+
.getArray()
|
|
38
|
+
.filter((layer) => layer instanceof Layer &&
|
|
39
|
+
(layer.getSource() instanceof TileWMS ||
|
|
40
|
+
layer.getSource() instanceof ImageWMS))
|
|
41
|
+
.map((layer) => layer.getSource());
|
|
42
|
+
if (!wmsSources.length) {
|
|
43
|
+
return Promise.resolve([]);
|
|
44
|
+
}
|
|
45
|
+
const gfiUrls = wmsSources.reduce((urls, source) => {
|
|
46
|
+
const gfiUrl = getGFIUrl(source, olMap, coordinate);
|
|
47
|
+
return gfiUrl ? [...urls, gfiUrl] : urls;
|
|
48
|
+
}, []);
|
|
49
|
+
return Promise.all(gfiUrls.map((url) => fetch(url)
|
|
50
|
+
.then((response) => response.json())
|
|
51
|
+
.then((collection) => collection.features))).then((features) => features.flat());
|
|
52
|
+
}
|
|
53
|
+
const getFeaturesFromWmsSourcesThrottled = throttle(getFeaturesFromWmsSources, 250);
|
|
54
|
+
function readFeaturesAtPixel(map, event) {
|
|
55
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
56
|
+
return [
|
|
57
|
+
...getFeaturesFromVectorSources(map, event.pixel),
|
|
58
|
+
...(yield getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
|
|
59
|
+
];
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function registerFeatureClickEvent(map) {
|
|
63
|
+
if (map.get(FeaturesClickEventType))
|
|
64
|
+
return;
|
|
65
|
+
map.on("click", (event) => __awaiter(this, void 0, void 0, function* () {
|
|
66
|
+
const features = yield readFeaturesAtPixel(map, event);
|
|
67
|
+
map.dispatchEvent({
|
|
68
|
+
type: FeaturesClickEventType,
|
|
69
|
+
features,
|
|
70
|
+
});
|
|
71
|
+
}));
|
|
72
|
+
map.set(FeaturesClickEventType, true);
|
|
73
|
+
}
|
|
74
|
+
function registerFeatureHoverEvent(map) {
|
|
75
|
+
if (map.get(FeaturesHoverEventType))
|
|
76
|
+
return;
|
|
77
|
+
map.on("pointermove", (event) => __awaiter(this, void 0, void 0, function* () {
|
|
78
|
+
const features = yield readFeaturesAtPixel(map, event);
|
|
79
|
+
map.dispatchEvent({
|
|
80
|
+
type: FeaturesHoverEventType,
|
|
81
|
+
features,
|
|
82
|
+
});
|
|
83
|
+
}));
|
|
84
|
+
map.set(FeaturesHoverEventType, true);
|
|
85
|
+
}
|
|
86
|
+
export function listen(map, eventType, callback) {
|
|
87
|
+
switch (eventType) {
|
|
88
|
+
case FeaturesClickEventType:
|
|
89
|
+
registerFeatureClickEvent(map);
|
|
90
|
+
// we're using a custom event type here so we need to cast to unknown first
|
|
91
|
+
map.on(eventType, (event) => {
|
|
92
|
+
callback(event);
|
|
93
|
+
});
|
|
94
|
+
break;
|
|
95
|
+
case FeaturesHoverEventType:
|
|
96
|
+
registerFeatureHoverEvent(map);
|
|
97
|
+
// see comment above
|
|
98
|
+
map.on(eventType, (event) => {
|
|
99
|
+
callback(event);
|
|
100
|
+
});
|
|
101
|
+
break;
|
|
102
|
+
case MapClickEventType:
|
|
103
|
+
map.on("click", (event) => {
|
|
104
|
+
const coordinate = toLonLat(event.pixel, map.getView().getProjection());
|
|
105
|
+
callback({
|
|
106
|
+
type: "map-click",
|
|
107
|
+
coordinate,
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
break;
|
|
111
|
+
default:
|
|
112
|
+
throw new Error(`Unrecognized event type: ${eventType}`);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -119,6 +119,7 @@ describe("MapContextService", () => {
|
|
|
119
119
|
const source = layer.getSource() as TileWMS;
|
|
120
120
|
const params = source.getParams();
|
|
121
121
|
expect(params.LAYERS).toBe((layerModel as MapContextLayerWms).name);
|
|
122
|
+
expect(params.STYLES).toBe((layerModel as MapContextLayerWms).style);
|
|
122
123
|
});
|
|
123
124
|
it("set correct url without existing REQUEST and SERVICE params", () => {
|
|
124
125
|
const source = layer.getSource() as TileWMS;
|
package/lib/map/create-map.ts
CHANGED
|
@@ -49,7 +49,10 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
|
|
|
49
49
|
layer = new TileLayer({
|
|
50
50
|
source: new TileWMS({
|
|
51
51
|
url: removeSearchParams(layerModel.url, ["request", "service"]),
|
|
52
|
-
params: {
|
|
52
|
+
params: {
|
|
53
|
+
LAYERS: layerModel.name,
|
|
54
|
+
...(layerModel.style && { STYLES: layerModel.style }),
|
|
55
|
+
},
|
|
53
56
|
gutter: 20,
|
|
54
57
|
attributions: layerModel.attributions,
|
|
55
58
|
}),
|
package/lib/map/index.ts
CHANGED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import Map from "ol/Map";
|
|
2
|
+
import { Mock } from "vitest";
|
|
3
|
+
import {
|
|
4
|
+
getFeaturesFromVectorSources,
|
|
5
|
+
getFeaturesFromWmsSources,
|
|
6
|
+
getGFIUrl,
|
|
7
|
+
listen,
|
|
8
|
+
} from "./register-events";
|
|
9
|
+
import { Collection, MapBrowserEvent, Object as BaseObject } from "ol";
|
|
10
|
+
import View from "ol/View";
|
|
11
|
+
import { toLonLat } from "ol/proj";
|
|
12
|
+
import TileWMS from "ol/source/TileWMS";
|
|
13
|
+
import VectorSource from "ol/source/Vector";
|
|
14
|
+
import VectorLayer from "ol/layer/Vector";
|
|
15
|
+
import Point from "ol/geom/Point";
|
|
16
|
+
import TileLayer from "ol/layer/Tile";
|
|
17
|
+
import OlFeature from "ol/Feature";
|
|
18
|
+
|
|
19
|
+
const gfiResult = {
|
|
20
|
+
type: "Feature",
|
|
21
|
+
properties: {
|
|
22
|
+
density: 123,
|
|
23
|
+
},
|
|
24
|
+
geometry: null,
|
|
25
|
+
};
|
|
26
|
+
function createWmsSource() {
|
|
27
|
+
return new TileWMS({
|
|
28
|
+
url: "http://my.service.org/wms?SERVICE=WMS",
|
|
29
|
+
params: {
|
|
30
|
+
LAYERS: "layerName",
|
|
31
|
+
FORMAT: "image/png",
|
|
32
|
+
TRANSPARENT: true,
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
function createMap(): Map {
|
|
37
|
+
const wmsLayer = new TileLayer({
|
|
38
|
+
source: createWmsSource(),
|
|
39
|
+
});
|
|
40
|
+
const feature = new OlFeature({
|
|
41
|
+
geometry: new Point([100, 200]),
|
|
42
|
+
});
|
|
43
|
+
const vectorLayer = new VectorLayer({
|
|
44
|
+
source: new VectorSource({
|
|
45
|
+
features: [feature],
|
|
46
|
+
}),
|
|
47
|
+
});
|
|
48
|
+
const view = new View({
|
|
49
|
+
projection: "EPSG:3857",
|
|
50
|
+
resolution: 1,
|
|
51
|
+
center: [0, 0],
|
|
52
|
+
});
|
|
53
|
+
const map = new BaseObject() as Map;
|
|
54
|
+
Object.defineProperties(map, {
|
|
55
|
+
getView: { value: vi.fn(() => view) },
|
|
56
|
+
getLayers: { value: vi.fn(() => new Collection([wmsLayer, vectorLayer])) },
|
|
57
|
+
getEventPixel: { value: vi.fn(() => [10, 10]) },
|
|
58
|
+
getCoordinateFromPixel: { value: vi.fn(() => [123, 123]) },
|
|
59
|
+
getFeaturesAtPixel: { value: vi.fn(() => [feature]) },
|
|
60
|
+
});
|
|
61
|
+
return map;
|
|
62
|
+
}
|
|
63
|
+
function createMapEvent(map: Map, type: string) {
|
|
64
|
+
return new MapBrowserEvent(
|
|
65
|
+
type,
|
|
66
|
+
map,
|
|
67
|
+
new MouseEvent(type, {
|
|
68
|
+
clientX: 10,
|
|
69
|
+
clientY: 10,
|
|
70
|
+
}),
|
|
71
|
+
false,
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
describe("event registration", () => {
|
|
76
|
+
let map: Map;
|
|
77
|
+
beforeEach(() => {
|
|
78
|
+
map = createMap();
|
|
79
|
+
vi.spyOn(global, "fetch").mockImplementation(() =>
|
|
80
|
+
Promise.resolve({
|
|
81
|
+
ok: true,
|
|
82
|
+
json: () => Promise.resolve({ features: [gfiResult] }),
|
|
83
|
+
} as Response),
|
|
84
|
+
);
|
|
85
|
+
vi.useFakeTimers();
|
|
86
|
+
});
|
|
87
|
+
describe("getFeaturesFromVectorSources", () => {
|
|
88
|
+
it("returns an array of features", () => {
|
|
89
|
+
const features = getFeaturesFromVectorSources(map, [0, 0]);
|
|
90
|
+
expect(features).toEqual([
|
|
91
|
+
{
|
|
92
|
+
geometry: {
|
|
93
|
+
coordinates: [100, 200],
|
|
94
|
+
type: "Point",
|
|
95
|
+
},
|
|
96
|
+
properties: null,
|
|
97
|
+
type: "Feature",
|
|
98
|
+
},
|
|
99
|
+
]);
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
describe("getGFIUrl", () => {
|
|
103
|
+
let url: string;
|
|
104
|
+
const coordinate = [-182932.49329334166, 6125319.813853541];
|
|
105
|
+
beforeEach(() => {
|
|
106
|
+
const wmsSource = createWmsSource();
|
|
107
|
+
url = getGFIUrl(wmsSource, map, coordinate) as string;
|
|
108
|
+
});
|
|
109
|
+
it("returns true", () => {
|
|
110
|
+
expect(url).toEqual(
|
|
111
|
+
"http://my.service.org/wms?SERVICE=WMS&REQUEST=GetFeatureInfo&QUERY_LAYERS=layerName&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=layerName&INFO_FORMAT=application%2Fjson&I=176&J=31&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-183143.11977128312%2C6125051.950547744%2C-182837.37165814242%2C6125357.698660884",
|
|
112
|
+
);
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
describe("getFeaturesFromWmsSources", () => {
|
|
116
|
+
it("queries the WMS sources", async () => {
|
|
117
|
+
const features = await getFeaturesFromWmsSources(map, [0, 0]);
|
|
118
|
+
expect(features).toEqual([gfiResult]);
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
describe("features hover event", () => {
|
|
122
|
+
let callback: Mock;
|
|
123
|
+
beforeEach(async () => {
|
|
124
|
+
callback = vi.fn();
|
|
125
|
+
listen(map, "features-hover", callback);
|
|
126
|
+
map.dispatchEvent(createMapEvent(map, "pointermove"));
|
|
127
|
+
await vi.runAllTimersAsync();
|
|
128
|
+
});
|
|
129
|
+
it("registers the event on the map", () => {
|
|
130
|
+
expect(callback).toHaveBeenCalledWith({
|
|
131
|
+
type: "features-hover",
|
|
132
|
+
features: [
|
|
133
|
+
{
|
|
134
|
+
geometry: {
|
|
135
|
+
coordinates: [100, 200],
|
|
136
|
+
type: "Point",
|
|
137
|
+
},
|
|
138
|
+
properties: null,
|
|
139
|
+
type: "Feature",
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
geometry: null,
|
|
143
|
+
properties: {
|
|
144
|
+
density: 123,
|
|
145
|
+
},
|
|
146
|
+
type: "Feature",
|
|
147
|
+
},
|
|
148
|
+
],
|
|
149
|
+
target: expect.anything(),
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
});
|
|
153
|
+
describe("features click event", () => {
|
|
154
|
+
let callback: Mock;
|
|
155
|
+
beforeEach(async () => {
|
|
156
|
+
callback = vi.fn();
|
|
157
|
+
listen(map, "features-click", callback);
|
|
158
|
+
map.dispatchEvent(createMapEvent(map, "click"));
|
|
159
|
+
await vi.runAllTimersAsync();
|
|
160
|
+
});
|
|
161
|
+
it("registers the event on the map", () => {
|
|
162
|
+
expect(callback).toHaveBeenCalledWith({
|
|
163
|
+
type: "features-click",
|
|
164
|
+
features: [
|
|
165
|
+
{
|
|
166
|
+
geometry: {
|
|
167
|
+
coordinates: [100, 200],
|
|
168
|
+
type: "Point",
|
|
169
|
+
},
|
|
170
|
+
properties: null,
|
|
171
|
+
type: "Feature",
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
geometry: null,
|
|
175
|
+
properties: {
|
|
176
|
+
density: 123,
|
|
177
|
+
},
|
|
178
|
+
type: "Feature",
|
|
179
|
+
},
|
|
180
|
+
],
|
|
181
|
+
target: expect.anything(),
|
|
182
|
+
});
|
|
183
|
+
});
|
|
184
|
+
});
|
|
185
|
+
describe("map click event", () => {
|
|
186
|
+
let callback: Mock;
|
|
187
|
+
beforeEach(() => {
|
|
188
|
+
callback = vi.fn();
|
|
189
|
+
listen(map, "map-click", callback);
|
|
190
|
+
map.dispatchEvent(createMapEvent(map, "click"));
|
|
191
|
+
});
|
|
192
|
+
it("registers the event on the map", () => {
|
|
193
|
+
expect(callback).toHaveBeenCalledWith({
|
|
194
|
+
coordinate: toLonLat([10, 10]),
|
|
195
|
+
type: "map-click",
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
});
|
|
199
|
+
});
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import Map, { MapObjectEventTypes } from "ol/Map";
|
|
2
|
+
import {
|
|
3
|
+
FeaturesClickEventType,
|
|
4
|
+
FeaturesHoverEventType,
|
|
5
|
+
MapClickEventType,
|
|
6
|
+
MapEventsByType,
|
|
7
|
+
} from "@geospatial-sdk/core";
|
|
8
|
+
import { toLonLat } from "ol/proj";
|
|
9
|
+
import GeoJSON from "ol/format/GeoJSON";
|
|
10
|
+
import OlFeature from "ol/Feature";
|
|
11
|
+
import BaseEvent from "ol/events/Event";
|
|
12
|
+
import { MapBrowserEvent } from "ol";
|
|
13
|
+
import { Coordinate } from "ol/coordinate";
|
|
14
|
+
import TileWMS from "ol/source/TileWMS";
|
|
15
|
+
import ImageWMS from "ol/source/ImageWMS";
|
|
16
|
+
import Layer from "ol/layer/Layer";
|
|
17
|
+
import { Pixel } from "ol/pixel";
|
|
18
|
+
import type { Feature, FeatureCollection } from "geojson";
|
|
19
|
+
import throttle from "lodash.throttle";
|
|
20
|
+
|
|
21
|
+
const GEOJSON = new GeoJSON();
|
|
22
|
+
|
|
23
|
+
export function getFeaturesFromVectorSources(
|
|
24
|
+
olMap: Map,
|
|
25
|
+
pixel: Pixel,
|
|
26
|
+
): Feature[] {
|
|
27
|
+
const olFeatures = olMap.getFeaturesAtPixel(pixel);
|
|
28
|
+
const { features } = GEOJSON.writeFeaturesObject(olFeatures as OlFeature[]);
|
|
29
|
+
if (!features) {
|
|
30
|
+
return [];
|
|
31
|
+
}
|
|
32
|
+
return features;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export function getGFIUrl(
|
|
36
|
+
source: TileWMS | ImageWMS,
|
|
37
|
+
map: Map,
|
|
38
|
+
coordinate: Coordinate,
|
|
39
|
+
): string | null {
|
|
40
|
+
const view = map.getView();
|
|
41
|
+
const projection = view.getProjection();
|
|
42
|
+
const resolution = view.getResolution() as number;
|
|
43
|
+
const params = {
|
|
44
|
+
...source.getParams(),
|
|
45
|
+
INFO_FORMAT: "application/json",
|
|
46
|
+
};
|
|
47
|
+
return (
|
|
48
|
+
source.getFeatureInfoUrl(coordinate, resolution, projection, params) ?? null
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export function getFeaturesFromWmsSources(
|
|
53
|
+
olMap: Map,
|
|
54
|
+
coordinate: Coordinate,
|
|
55
|
+
): Promise<Feature[]> {
|
|
56
|
+
const wmsSources: (ImageWMS | TileWMS)[] = olMap
|
|
57
|
+
.getLayers()
|
|
58
|
+
.getArray()
|
|
59
|
+
.filter(
|
|
60
|
+
(layer): layer is Layer<ImageWMS | TileWMS> =>
|
|
61
|
+
layer instanceof Layer &&
|
|
62
|
+
(layer.getSource() instanceof TileWMS ||
|
|
63
|
+
layer.getSource() instanceof ImageWMS),
|
|
64
|
+
)
|
|
65
|
+
.map((layer) => layer.getSource()!);
|
|
66
|
+
|
|
67
|
+
if (!wmsSources.length) {
|
|
68
|
+
return Promise.resolve([]);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
const gfiUrls = wmsSources.reduce((urls, source) => {
|
|
72
|
+
const gfiUrl = getGFIUrl(source, olMap, coordinate);
|
|
73
|
+
return gfiUrl ? [...urls, gfiUrl] : urls;
|
|
74
|
+
}, [] as string[]);
|
|
75
|
+
return Promise.all(
|
|
76
|
+
gfiUrls.map((url) =>
|
|
77
|
+
fetch(url)
|
|
78
|
+
.then((response) => response.json())
|
|
79
|
+
.then((collection: FeatureCollection) => collection.features),
|
|
80
|
+
),
|
|
81
|
+
).then((features) => features.flat());
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const getFeaturesFromWmsSourcesThrottled = throttle(
|
|
85
|
+
getFeaturesFromWmsSources,
|
|
86
|
+
250,
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
async function readFeaturesAtPixel(
|
|
90
|
+
map: Map,
|
|
91
|
+
event: MapBrowserEvent<PointerEvent>,
|
|
92
|
+
) {
|
|
93
|
+
return [
|
|
94
|
+
...getFeaturesFromVectorSources(map, event.pixel),
|
|
95
|
+
...(await getFeaturesFromWmsSourcesThrottled(map, event.coordinate)),
|
|
96
|
+
];
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
function registerFeatureClickEvent(map: Map) {
|
|
100
|
+
if (map.get(FeaturesClickEventType)) return;
|
|
101
|
+
map.on("click", async (event) => {
|
|
102
|
+
const features = await readFeaturesAtPixel(map, event);
|
|
103
|
+
map.dispatchEvent({
|
|
104
|
+
type: FeaturesClickEventType,
|
|
105
|
+
features,
|
|
106
|
+
} as unknown as BaseEvent);
|
|
107
|
+
});
|
|
108
|
+
map.set(FeaturesClickEventType, true);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function registerFeatureHoverEvent(map: Map) {
|
|
112
|
+
if (map.get(FeaturesHoverEventType)) return;
|
|
113
|
+
map.on("pointermove", async (event) => {
|
|
114
|
+
const features = await readFeaturesAtPixel(map, event);
|
|
115
|
+
map.dispatchEvent({
|
|
116
|
+
type: FeaturesHoverEventType,
|
|
117
|
+
features,
|
|
118
|
+
} as unknown as BaseEvent);
|
|
119
|
+
});
|
|
120
|
+
map.set(FeaturesHoverEventType, true);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export function listen<T extends keyof MapEventsByType>(
|
|
124
|
+
map: Map,
|
|
125
|
+
eventType: T,
|
|
126
|
+
callback: (event: MapEventsByType[T]) => void,
|
|
127
|
+
) {
|
|
128
|
+
switch (eventType) {
|
|
129
|
+
case FeaturesClickEventType:
|
|
130
|
+
registerFeatureClickEvent(map);
|
|
131
|
+
// we're using a custom event type here so we need to cast to unknown first
|
|
132
|
+
map.on(eventType as unknown as MapObjectEventTypes, (event) => {
|
|
133
|
+
(callback as (event: unknown) => void)(event);
|
|
134
|
+
});
|
|
135
|
+
break;
|
|
136
|
+
case FeaturesHoverEventType:
|
|
137
|
+
registerFeatureHoverEvent(map);
|
|
138
|
+
// see comment above
|
|
139
|
+
map.on(eventType as unknown as MapObjectEventTypes, (event) => {
|
|
140
|
+
(callback as (event: unknown) => void)(event);
|
|
141
|
+
});
|
|
142
|
+
break;
|
|
143
|
+
case MapClickEventType:
|
|
144
|
+
map.on("click", (event) => {
|
|
145
|
+
const coordinate = toLonLat(
|
|
146
|
+
event.pixel,
|
|
147
|
+
map.getView().getProjection(),
|
|
148
|
+
) as [number, number];
|
|
149
|
+
(callback as (event: unknown) => void)({
|
|
150
|
+
type: "map-click",
|
|
151
|
+
coordinate,
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
break;
|
|
155
|
+
default:
|
|
156
|
+
throw new Error(`Unrecognized event type: ${eventType}`);
|
|
157
|
+
}
|
|
158
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geospatial-sdk/openlayers",
|
|
3
|
-
"version": "0.0.5-dev.
|
|
3
|
+
"version": "0.0.5-dev.18+6f12b0b",
|
|
4
4
|
"description": "OpenLayers-related utilities",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ol",
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/chroma-js": "^2.4.3",
|
|
32
|
+
"@types/lodash.throttle": "^4.1.9",
|
|
32
33
|
"ol": "^8.2.0",
|
|
33
34
|
"ol-mapbox-style": "^12.3.5"
|
|
34
35
|
},
|
|
@@ -36,8 +37,9 @@
|
|
|
36
37
|
"ol": ">6.x"
|
|
37
38
|
},
|
|
38
39
|
"dependencies": {
|
|
39
|
-
"@geospatial-sdk/core": "^0.0.5-dev.
|
|
40
|
-
"chroma-js": "^2.4.2"
|
|
40
|
+
"@geospatial-sdk/core": "^0.0.5-dev.18+6f12b0b",
|
|
41
|
+
"chroma-js": "^2.4.2",
|
|
42
|
+
"lodash.throttle": "^4.1.1"
|
|
41
43
|
},
|
|
42
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "6f12b0b59e2794a24b27940c9c62dd279e2120e8"
|
|
43
45
|
}
|