Skip to content

Commit fa7e2f9

Browse files
yharbyyharby
committed
feat: ArcGIS Vector Tiles PBF Layer Support
1 parent 620d80f commit fa7e2f9

File tree

4 files changed

+169
-91
lines changed

4 files changed

+169
-91
lines changed

‎src/LayersControl.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,12 @@ export function SourceControl() {
119119
'url',
120120
'tileSize',
121121
]
122+
case 'arcgis-vector-tiles':
123+
return [
124+
'url',
125+
'projection',
126+
// Add other relevant source parameters for arcgis-vector-tiles here
127+
];
122128
default:
123129
return [] // Empty configuration for unsupported types
124130
}
@@ -155,15 +161,16 @@ var LayerObjectOption = new MultiCompBuilder(
155161
label: StringControl,
156162
title: StringControl,
157163
type: dropdownControl([
158-
{ label: "MVT", value: "mvt" },
164+
{ label: "XYZ", value: "xyz" },
159165
{ label: "WMS", value: "wms" },
160166
{ label: "WFS", value: "wfs" },
161-
{ label: "XYZ", value: "xyz" },
162167
{ label: "GeoJSON", value: "geojson" },
163-
{ label: "COG", value: "cog" },
168+
{ label: "COG / GeoTIFF", value: "cog" },
169+
{ label: "MVT", value: "mvt" },
164170
{ label: "Mapbox StyleGL", value: "stylegl" },
165171
{ label: "ArcGIS Mapserver", value: "arcgis-mapserver" },
166-
{ label: "PMTiles", value: "pmtiles" }
172+
{ label: "ArcGIS Vector Tiles", value: "arcgis-vector-tiles" },
173+
{ label: "PMTiles", value: "pmtiles" },
167174
]),
168175
source: SourceControl(),
169176
visible: withDefault(BoolPureControl, true),

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

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

33
export const enObj: I18nObjects = {
44
defaultData: [
5+
{
6+
"label": "ArcGIS - Vector Tile PBF",
7+
"title": "ArcGIS - Vector Tile PBF",
8+
"type": "arcgis-vector-tiles",
9+
"order": 10,
10+
"minZoom": 0,
11+
"maxZoom": 22,
12+
"visible": true,
13+
"selectable": true,
14+
"source": {
15+
"url": "https://rijnland.enl-mcs.nl/arcgis/rest/services/Polder/MapServer/0/",
16+
"projection": "EPSG:28992",
17+
}
18+
},
519
{
620
"label": "PMTiles - Raster",
721
"title": "PMTiles - Raster",
@@ -244,119 +258,119 @@ export const enObj: I18nObjects = {
244258
}
245259
},
246260
{
247-
label: "Egypt DSM - COG",
248-
type: "cog",
249-
order: 6,
250-
minZoom: 0,
251-
maxZoom: 22,
252-
visible: true,
253-
opacity: 0.3,
254-
source: {
255-
url: "https://link.storjshare.io/raw/juj37qat4melrpmooioq65fzgo7q/truemaps-public/aw3d30/output_cog.tif",
261+
"label": "Egypt DSM - COG",
262+
"type": "cog",
263+
"order": 6,
264+
"minZoom": 0,
265+
"maxZoom": 22,
266+
"visible": true,
267+
"opacity": 0.3,
268+
"source": {
269+
"url": "https://link.storjshare.io/raw/juj37qat4melrpmooioq65fzgo7q/truemaps-public/aw3d30/output_cog.tif",
256270
},
257271
},
258272
{
259-
label: "Contours - WFS",
260-
type: "wfs",
261-
order: 5,
262-
minZoom: 0,
263-
maxZoom: 22,
264-
visible: true,
265-
source: {
266-
url: "https://services.seismofaults.eu/geoserver/EDSF/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=EDSF%3Asubduction_contours&outputFormat=JSON&srsName=urn%3Ax-ogc%3Adef%3Acrs%3AEPSG%3A4326&maxFeatures=1000",
267-
format: "geojson",
268-
version: "1.1.0",
273+
"label": "Contours - WFS",
274+
"type": "wfs",
275+
"order": 5,
276+
"minZoom": 0,
277+
"maxZoom": 22,
278+
"visible": true,
279+
"source": {
280+
"url": "https://services.seismofaults.eu/geoserver/EDSF/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=EDSF%3Asubduction_contours&outputFormat=JSON&srsName=urn%3Ax-ogc%3Adef%3Acrs%3AEPSG%3A4326&maxFeatures=1000",
281+
"format": "geojson",
282+
"version": "1.1.0",
269283
},
270-
style: {
284+
"style": {
271285
"circle-radius": 6,
272286
"circle-color": "#B42222",
273287
},
274288
},
275289
{
276-
label: "World Basemap - MVT/pbf",
277-
type: "mvt",
278-
order: 4,
279-
minZoom: 0,
280-
maxZoom: 22,
281-
splitscreen: "left",
282-
visible: true,
283-
source: {
284-
url: "https://wms.wheregroup.com/tileserver/tile/world-0-14/{z}/{x}/{y}.pbf",
290+
"label": "World Basemap - MVT/pbf",
291+
"type": "mvt",
292+
"order": 4,
293+
"minZoom": 0,
294+
"maxZoom": 22,
295+
"splitscreen": "left",
296+
"visible": false,
297+
"source": {
298+
"url": "https://wms.wheregroup.com/tileserver/tile/world-0-14/{z}/{x}/{y}.pbf",
285299
},
286-
style: {
287-
styleURL: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
300+
"style": {
301+
"styleURL": "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
288302
},
289303
},
290304
{
291-
label: "USA MapServer ImageLayer - ArcGIS MapServer",
292-
type: "arcgis-mapserver",
293-
order: 3,
294-
minZoom: 0,
295-
maxZoom: 22,
296-
visible: false,
297-
selectable: false,
298-
source: {
299-
mapServerType: "image",
300-
url: "https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer",
301-
ratio: 1,
305+
"label": "USA MapServer ImageLayer - ArcGIS MapServer",
306+
"type": "arcgis-mapserver",
307+
"order": 3,
308+
"minZoom": 0,
309+
"maxZoom": 22,
310+
"visible": false,
311+
"selectable": false,
312+
"source": {
313+
"mapServerType": "image",
314+
"url": "https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer",
315+
"ratio": 1,
302316
},
303317
},
304318
{
305-
label: "USA MapServer TileLayer - ArcGIS MapServer",
306-
type: "arcgis-mapserver",
307-
order: 2,
308-
minZoom: 0,
309-
maxZoom: 22,
310-
visible: false,
311-
selectable: true,
312-
source: {
313-
mapServerType: "tile",
314-
url: "https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer",
319+
"label": "USA MapServer TileLayer - ArcGIS MapServer",
320+
"type": "arcgis-mapserver",
321+
"order": 2,
322+
"minZoom": 0,
323+
"maxZoom": 22,
324+
"visible": false,
325+
"selectable": true,
326+
"source": {
327+
"mapServerType": "tile",
328+
"url": "https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer",
315329
},
316330
},
317331
{
318-
label: "NASA | BlueMarble NextGeneration - WMS",
319-
type: "wms",
320-
order: 1,
321-
minZoom: 0,
322-
maxZoom: 8,
323-
visible: true,
324-
source: {
325-
url: "https://ideas-digitaltwin.jpl.nasa.gov/wms/epsg4326/best/wms.cgi",
326-
params: {
327-
LAYERS: "BlueMarble_NextGeneration",
328-
TILED: true,
329-
VERSION: "1.3.0",
332+
"label": "NASA | BlueMarble NextGeneration - WMS",
333+
"type": "wms",
334+
"order": 1,
335+
"minZoom": 0,
336+
"maxZoom": 8,
337+
"visible": true,
338+
"source": {
339+
"url": "https://ideas-digitaltwin.jpl.nasa.gov/wms/epsg4326/best/wms.cgi",
340+
"params": {
341+
"LAYERS": "BlueMarble_NextGeneration",
342+
"TILED": true,
343+
"VERSION": "1.3.0",
330344
},
331-
serverType: "geoserver",
332-
transition: 0,
345+
"serverType": "geoserver",
346+
"transition": 0,
333347
},
334-
opacity: 1,
348+
"opacity": 1,
335349
},
336350
{
337-
label: "Mapbox Style GL - JSON",
338-
type: "stylegl",
339-
order: 0,
340-
minZoom: 0,
341-
maxZoom: 22,
342-
visible: true,
343-
opacity: 1,
344-
selectable: false,
345-
splitscreen: "right",
346-
source: {
347-
url: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
348-
projection: "EPSG:3857",
351+
"label": "Mapbox Style GL - JSON",
352+
"type": "stylegl",
353+
"order": 0,
354+
"minZoom": 0,
355+
"maxZoom": 22,
356+
"visible": false,
357+
"opacity": 1,
358+
"selectable": false,
359+
"splitscreen": "right",
360+
"source": {
361+
"url": "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
362+
"projection": "EPSG:3857",
349363
},
350364
},
351365
{
352-
label: "Open Street Map - XYZ",
353-
type: "xyz",
354-
order: -1,
355-
minZoom: 0,
356-
maxZoom: 19,
357-
visible: false,
358-
source: {
359-
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
366+
"label": "Open Street Map - XYZ",
367+
"type": "xyz",
368+
"order": -1,
369+
"minZoom": 0,
370+
"maxZoom": 19,
371+
"visible": true,
372+
"source": {
373+
"url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
360374
},
361375
},
362376
],

‎src/vendors/helpers/EsriPBF.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import arcgisPbfDecode from 'arcgis-pbf-parser';
2+
import GeoJSON from 'ol/format/GeoJSON';
3+
4+
/**
5+
* Represents a class for working with Esri PBF data.
6+
* Extends the GeoJSON class.
7+
*/
8+
class EsriPBF extends GeoJSON {
9+
getType() {
10+
return 'arraybuffer';
11+
}
12+
readFeature(source, options) {
13+
return super.readFeature(
14+
arcgisPbfDecode(new Uint8Array(source)).featureCollection,
15+
options
16+
);
17+
}
18+
readFeatures(source, options) {
19+
return super.readFeatures(
20+
arcgisPbfDecode(new Uint8Array(source)).featureCollection,
21+
options
22+
);
23+
}
24+
}
25+
26+
export default EsriPBF;

‎src/vendors/helpers/Layers.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import GeoJSON from 'ol/format/GeoJSON';
1818
import { geoJsonStyleFunction } from './Styles'
1919
import { applyBackground, applyStyle } from 'ol-mapbox-style';
2020
import UndoRedo from 'ol-ext/interaction/UndoRedo'
21+
import EsriPBF from "./EsriPBF.js";
22+
import { createStyleFunctionFromUrl } from 'ol-esri-styles';
2123

2224
/**
2325
* Creates and returns an OpenLayers layer instance for the given layer configuration object.
@@ -285,6 +287,35 @@ export function createLayer(layerConfig, map) {
285287
})
286288
});
287289
}
290+
case 'arcgis-vector-tiles':
291+
const esriVectorTiles = new VectorLayer({
292+
source: new VectorSource({
293+
format: new EsriPBF({ dataProjection: layerConfig.source.projection || 'EPSG:3857' }),
294+
url:
295+
layerConfig.source.url +
296+
'/query/?f=pbf&' +
297+
'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
298+
encodeURIComponent(
299+
'{"xmin":' +
300+
-20037508.342789244 +
301+
',"ymin":' +
302+
-20037508.342789244 +
303+
',"xmax":' +
304+
20037508.342789244 +
305+
',"ymax":' +
306+
20037508.342789244 +
307+
'}'
308+
) +
309+
'&geometryType=esriGeometryEnvelope&inSR=3857&outFields=*&resultType=tile' +
310+
'&outSR=3857',
311+
}),
312+
})
313+
createStyleFunctionFromUrl(layerConfig.source.url, map.getView().getProjection() || 'EPSG:3857').then(styleFunction => {
314+
esriVectorTiles.setStyle(styleFunction)
315+
console.log(styleFunction);
316+
});
317+
return esriVectorTiles;
318+
288319
/* History ?
289320
new ol.layer.Geoportail({
290321
name: '1970',

0 commit comments

Comments
 (0)