Skip to content

Commit 05b8be5

Browse files
yharbyyharby
committed
feat: PMTiles layer type
1 parent 8d4ddc1 commit 05b8be5

File tree

6 files changed

+146
-41
lines changed

6 files changed

+146
-41
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
"antd": "^5.15.4",
1717
"lowcoder-cli": "^0.0.30",
1818
"lowcoder-sdk": "^2.3.1",
19-
"ol": "^9.0.0",
19+
"ol": "^9.1.0",
2020
"ol-ext": "^4.0.15",
2121
"ol-mapbox-style": "^12.2.1",
22+
"ol-pmtiles": "^0.4.0",
2223
"prop-types": "^15.8.1",
2324
"react": "18",
2425
"react-dom": "18",

‎src/LayersControl.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
dropdownControl,
1010
StringOrJSONObjectControl,
1111
manualOptionsControl,
12+
ArrayControl,
1213
} from 'lowcoder-sdk'
1314
import { trans } from "./i18n/comps";
1415
import { Divider } from "antd"
@@ -27,19 +28,30 @@ export function SourceControl() {
2728
attributions: withDefault(StringControl, ''),
2829

2930
params: StringOrJSONObjectControl,
30-
serverType: stringSimpleControl(),
31+
serverType: withDefault(dropdownControl([
32+
{ label: "Geoserver", value: "geoserver" },
33+
{ label: "Mapserer", value: "mapserver" },
34+
{ label: "Carmentaserver", value: "carmentaserver" },
35+
{ label: "QGIS Server", value: "qgis" },
36+
]), 'geoserver'),
3137
crossOrigin: stringSimpleControl(),
3238

3339
data: StringOrJSONObjectControl, // This could be a URL or a GeoJSON object ?
3440
projection: stringSimpleControl(),
3541

36-
tileSize: withDefault(NumberControl, 512),
42+
tileSize: withDefault(ArrayControl, [256, 256]),
3743
nodata: withDefault(NumberControl, 0),
3844

3945
ratio: withDefault(NumberControl, 1),
4046
style: StringOrJSONObjectControl,
47+
48+
pmtilesType: withDefault(dropdownControl([
49+
{ label: "Raster", value: "raster" },
50+
{ label: "Vector", value: "vector" },
51+
]), 'vector'),
4152
};
4253

54+
4355
//Class is rebuild not retuning same class
4456
class SourceTemp extends new MultiCompBuilder(childrenMap, (props: any) => props)
4557
.setPropertyViewFn((children: any) => (<></>))
@@ -102,6 +114,12 @@ export function SourceControl() {
102114
'ratio',
103115
'crossOrigin',
104116
]
117+
case 'pmtiles':
118+
return [
119+
'pmtilesType',
120+
'url',
121+
'tileSize',
122+
]
105123
default:
106124
return [] // Empty configuration for unsupported types
107125
}
@@ -146,7 +164,8 @@ var LayerObjectOption = new MultiCompBuilder(
146164
{ label: "COG", value: "cog" },
147165
{ label: "Mapbox StyleGL", value: "stylegl" },
148166
{ label: "ArcGIS Mapserver Tile", value: "arcgis mapserver tile" },
149-
{ label: "ArcGIS Mapserver Image", value: "arcgis mapserver image" }
167+
{ label: "ArcGIS Mapserver Image", value: "arcgis mapserver image" },
168+
{ label: "PMTiles", value: "pmtiles" }
150169
]),
151170
source: SourceControl(),
152171
visible: withDefault(BoolPureControl, true),
@@ -187,6 +206,9 @@ LayerObjectOption = class extends LayerObjectOption {
187206
if (obj.value.source && obj.value.source.params && typeof obj.value.source.params != "string") {
188207
obj.value.source.params = JSON.stringify(obj.value.source.params, null)
189208
}
209+
if (obj.value.source && obj.value.source.tileSize && typeof obj.value.source.tileSize != "string") {
210+
obj.value.source.tileSize = JSON.stringify(obj.value.source.tileSize, null);
211+
}
190212
}
191213
super(obj)
192214
}

‎src/i18n/comps/locales/en.ts‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -89,21 +89,23 @@ export const en = {
8989
order: "Order",
9090
splitscreen: "Splitscreen",
9191
timeline: "Timeline",
92-
userVisible: "Visible in layermenu",
92+
userVisible: "Visible in Layer Menu",
9393
source: "Source",
94-
url: 'url',
95-
attributions: 'attributions',
96-
params: 'params',
97-
serverType: 'serverType',
98-
crossOrigin: 'crossOrigin',
99-
data: 'data',
100-
projection: 'projection',
101-
tileSize: 'tileSize',
102-
nodata: 'nodata',
103-
ratio: 'ratio',
104-
style: 'style',
94+
url: 'URL',
95+
attributions: 'Attributions',
96+
params: 'Params',
97+
serverType: 'Server Type',
98+
crossOrigin: 'Cross Origin',
99+
data: 'Data',
100+
projection: 'Projection',
101+
tileSize: 'Tile Size',
102+
nodata: 'No Data',
103+
ratio: 'Ratio',
104+
style: 'Style',
105105
map: 'Map',
106106
layer: 'Layer ',
107-
settings: 'Stettings'
107+
settings: 'Settings',
108+
pmtilesType: 'PMTiles Type',
109+
108110
}
109111
};

‎src/i18n/comps/locales/enObj.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,35 @@ import { I18nObjects } from "./types";
22

33
export const enObj: I18nObjects = {
44
defaultData: [
5+
{
6+
"label": "PMTiles - Raster",
7+
"title": "PMTiles - Raster",
8+
"type": "pmtiles",
9+
"order": 9,
10+
"minZoom": 0,
11+
"maxZoom": 30,
12+
"visible": false,
13+
"selectable": false,
14+
"source": {
15+
"pmtilesType": "raster",
16+
"url": "https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
17+
"tileSize": [512, 512],
18+
}
19+
},
20+
{
21+
"label": "PMTiles - Vector",
22+
"title": "PMTiles - Vector",
23+
"type": "pmtiles",
24+
"order": 8,
25+
"minZoom": 0,
26+
"maxZoom": 30,
27+
"visible": false,
28+
"selectable": false,
29+
"source": {
30+
"pmtilesType": "vector",
31+
"url": "https://link.storjshare.io/raw/jxqj5ixgrdniigc7f23mogdzeirq/truemaps-public%2Fpublic-datasets%2Foverturemaps%2F2024-01-17-alpha.0%2Ftheme%3Dbuildings%2Fegypt_buildings_vt.pmtiles",
32+
}
33+
},
534
{
635
"label": "GeoJson",
736
"title": "GeoJson with Style and Image src",

‎src/vendors/helpers/Layers.js‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
*/
1010
import { Vector as VectorLayer, VectorTile as VectorTileLayer, Image as ImageLayer } from 'ol/layer';
1111
import { XYZ, TileWMS, Vector as VectorSource, VectorTile as VectorTileSource, TileArcGISRest, ImageArcGISRest } from 'ol/source';
12+
import { PMTilesVectorSource, PMTilesRasterSource } from "ol-pmtiles";
1213
import GeoTIFF from 'ol/source/GeoTIFF.js';
1314
import TileLayer from 'ol/layer/WebGLTile.js';
15+
import WebGLTile from "ol/layer/WebGLTile";
1416
import MVT from 'ol/format/MVT';
1517
import GeoJSON from 'ol/format/GeoJSON';
1618
import { geoJsonStyleFunction } from './Styles'
@@ -161,7 +163,7 @@ export function createLayer(layerConfig, map) {
161163
sources: [
162164
{
163165
url: layerConfig.source.url,
164-
tileSize: 512,
166+
tileSize: layerConfig.source.url || [512, 512],
165167
nodata: 0,
166168
},
167169
],
@@ -240,7 +242,47 @@ export function createLayer(layerConfig, map) {
240242
crossOrigin: layerConfig.source.crossOrigin,
241243
}),
242244
});
243-
245+
case 'pmtiles':
246+
if (layerConfig.source.pmtilesType === 'raster') {
247+
return new WebGLTile({
248+
name: layerConfig.label,
249+
title: layerConfig.title || layerConfig.name,
250+
minZoom: layerConfig.minZoom,
251+
maxZoom: layerConfig.maxZoom,
252+
visible: layerConfig.visible,
253+
opacity: layerConfig.opacity,
254+
selectable: layerConfig.selectable,
255+
groups: layerConfig.groups,
256+
extra: layerConfig.extra,
257+
order: layerConfig.order,
258+
splitscreen: layerConfig.splitscreen,
259+
displayInLayerSwitcher: layerConfig.userVisible,
260+
source: new PMTilesRasterSource({
261+
url: layerConfig.source?.url,
262+
tileSize: layerConfig.source?.tileSize,
263+
})
264+
});
265+
}
266+
else if (layerConfig.source.pmtilesType === 'vector') {
267+
return new VectorTileLayer({
268+
declutter: true,
269+
name: layerConfig.label,
270+
title: layerConfig.title || layerConfig.name,
271+
minZoom: layerConfig.minZoom,
272+
maxZoom: layerConfig.maxZoom,
273+
visible: layerConfig.visible,
274+
opacity: layerConfig.opacity,
275+
selectable: layerConfig.selectable,
276+
groups: layerConfig.groups,
277+
extra: layerConfig.extra,
278+
order: layerConfig.order,
279+
splitscreen: layerConfig.splitscreen,
280+
displayInLayerSwitcher: layerConfig.userVisible,
281+
source: new PMTilesVectorSource({
282+
url: layerConfig.source?.url,
283+
})
284+
});
285+
}
244286
/* History ?
245287
new ol.layer.Geoportail({
246288
name: '1970',

‎yarn.lock‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1421,28 +1421,17 @@
14211421
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
14221422
integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
14231423

1424-
"@types/istanbul-lib-coverage@^2.0.1":
1425-
version "2.0.6"
1426-
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
1427-
integrity sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
1428-
1429-
"@types/linkify-it@*":
1430-
version "3.0.5"
1431-
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.5.tgz#1e78a3ac2428e6d7e6c05c1665c242023a4601d8"
1432-
integrity sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==
1424+
"@types/geojson@*":
1425+
version "7946.0.14"
1426+
resolved "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
1427+
integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
14331428

1434-
"@types/markdown-it@^12.2.3":
1435-
version "12.2.3"
1436-
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
1437-
integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
1429+
"@types/leaflet@^1.9.8":
1430+
version "1.9.8"
1431+
resolved "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz#32162a8eaf305c63267e99470b9603b5883e63e8"
1432+
integrity sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==
14381433
dependencies:
1439-
"@types/linkify-it" "*"
1440-
"@types/mdurl" "*"
1441-
1442-
"@types/mdurl@*":
1443-
version "1.0.5"
1444-
resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.5.tgz#3e0d2db570e9fb6ccb2dc8fde0be1d79ac810d39"
1445-
integrity sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==
1434+
"@types/geojson" "*"
14461435

14471436
"@types/normalize-package-data@^2.4.3":
14481437
version "2.4.4"
@@ -2983,6 +2972,11 @@ fbjs@^3.0.0, fbjs@^3.0.1:
29832972
setimmediate "^1.0.5"
29842973
ua-parser-js "^1.0.35"
29852974

2975+
fflate@^0.8.0:
2976+
version "0.8.2"
2977+
resolved "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
2978+
integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
2979+
29862980
figlet@^1.1.1:
29872981
version "1.7.0"
29882982
resolved "https://registry.yarnpkg.com/figlet/-/figlet-1.7.0.tgz#46903a04603fd19c3e380358418bb2703587a72e"
@@ -4912,9 +4906,16 @@ ol-mapbox-style@^12.2.1:
49124906
"@mapbox/mapbox-gl-style-spec" "^13.23.1"
49134907
mapbox-to-css-font "^2.4.1"
49144908

4915-
ol@^9.0.0:
4909+
ol-pmtiles@^0.4.0:
4910+
version "0.4.0"
4911+
resolved "https://registry.npmjs.org/ol-pmtiles/-/ol-pmtiles-0.4.0.tgz#1d259ce74e49c00b740007dd1d5fbc40a70a51d6"
4912+
integrity sha512-N+E4fJXXl9RNxeTDlJ31IHFPUVWkBGJkbA8ZzNnYY7/G6dI7uScBH5ux5MBRG8rZZZO9aHE6O/mJ3OGzXkygAw==
4913+
dependencies:
4914+
pmtiles "^3.0.4"
4915+
4916+
ol@^9.1.0:
49164917
version "9.1.0"
4917-
resolved "https://registry.yarnpkg.com/ol/-/ol-9.1.0.tgz#738e9f17093f65dafe114b8a78c69f110f5d0220"
4918+
resolved "https://registry.npmjs.org/ol/-/ol-9.1.0.tgz#738e9f17093f65dafe114b8a78c69f110f5d0220"
49184919
integrity sha512-nDrkJ2tzZNpo/wzN/PpHV5zdxbnXZaFktoMaD2cFLEc6gCwlgLY21Yd8wnt/4FjaVYwLBnbN9USXSwIBGcyksQ==
49194920
dependencies:
49204921
color-rgba "^3.0.0"
@@ -5284,6 +5285,14 @@ pkg-conf@^2.1.0:
52845285
find-up "^2.0.0"
52855286
load-json-file "^4.0.0"
52865287

5288+
pmtiles@^3.0.4:
5289+
version "3.0.5"
5290+
resolved "https://registry.npmjs.org/pmtiles/-/pmtiles-3.0.5.tgz#4fe0a1877c4932794d1b471b99c18f9d63c6478c"
5291+
integrity sha512-K6NxVvW/vXE3052VZKF2ppyjdyhLx41FidR5yV8L/+El+lcMJpXS0vHBSPFmjdag5zkYv2XGDdq+3VjB2K7l6w==
5292+
dependencies:
5293+
"@types/leaflet" "^1.9.8"
5294+
fflate "^0.8.0"
5295+
52875296
postcss-selector-parser@^6.0.10:
52885297
version "6.0.16"
52895298
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"

0 commit comments

Comments
 (0)