Angular / Openlayers: drawing polygon in WKT works, but GML format not

Drawing a simple polygon using WKT works fine in Angular 18, Openlayers 10. Whatever I try, I cannot draw anything using GML.

This is what works:

proj4.defs(
'EPSG:28992',
'+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.2369,50.0087,465.658,1.9848,1.7439,-9.2687,4.0772 +units=m +no_defs'
);
register(proj4);
const rdProjection = getProjection('EPSG:28992');
// @ts-ignore
rdProjection.setExtent([64636, 308910, 276984, 636326]);

const wkt = new WKT();
const wktData = "POLYGON((155636 466910, 165636 466910, 165636 476910, 155636 476910, 155636 466910))";
const wktGeometry = wkt.readGeometry(wktData, {
dataProjection: 'EPSG:28992', // Define the WKT projection
featureProjection: 'EPSG:28992', // Match it to the map's projection
});
const feature = new Feature({
geometry: wktGeometry,
});
let features: Feature<Geometry>[] = [feature];
const vectorSource = new VectorSource({
features: features,
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});

this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:3857/{z}/{x}/{y}.png',
}),
}),
],
view: new View({
projection: rdProjection,
center: transform([5.38763888888889, 52.15616055555555], 'EPSG:4326', 'EPSG:28992'),
// center: [ 64636, 308910, 276984, 636326],
zoom: 7,
}),
});
this.map.addLayer(vectorLayer);


Anything I try with GML does not work.

const gmlData = `
<gmlolygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:28992">
<gmluterBoundaryIs>
<gml:LinearRing>
<gml:coordinates>
155636,466910 165636,466910 165636,476910 155636,476910 155636,466910
</gml:coordinates>
</gml:LinearRing>
</gmluterBoundaryIs>
</gmlolygon>
`;

// Create an instance of the GML3 format
const gml = new GML3();

// Parse the GML data to get a geometry
const gmlGeometry = gml.readGeometry(gmlData, {
dataProjection: 'EPSG:28992', // Define the GML projection
featureProjection: 'EPSG:28992', // Match it to the map's projection
});

// Create a feature using the geometry
const feature = new Feature({
geometry: gmlGeometry,
});

// Add the feature to a vector source
let features: Feature<Geometry>[] = [feature];
const vectorSource = new VectorSource({
features: features,
});


Rest the same.

My package.json contains: although I tried other combinations:

"ol": "10.0",
"ol-mapbox-style": "^11.0.3",
"proj4": "^2.5.0",


Stepping back, I even tried ... but alas, I cannot get GML working.

proj4.defs('EPSG:28992',
'+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 ' +
'+k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs ' +
'+towgs84=593.0248,26.0032,478.7536,0.0,0.0,0.0,0.0'
);
register(proj4);

const dutchProjection = getProjection('EPSG:28992');
dutchProjection.setExtent([102000, 306000, 282000, 612000]);

const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
projection: 'EPSG:3857',
center: [0, 0],
zoom: 2
})
});

const gmlData = `
<gmlolygon srsName="EPSG:28992" xmlns:gml="http://www.opengis.net/gml">
<gml:exterior>
<gml:LinearRing>
<gmlosList>
155636 466910 165636 466910 165636 476910 155636 476910 155636 466910
</gmlosList>
</gml:LinearRing>
</gml:exterior>
</gmlolygon>
`;

const gmlParser = new GML3();
const polygonGeometry = gmlParser.readGeometry(gmlData, {
dataProjection: 'EPSG:28992',
featureProjection: 'EPSG:3857'
});

const feature = new Feature({
geometry: polygonGeometry
});

const vectorSource = new VectorSource({
features: [feature]
});

const vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
fill: new Fill({
color: 'rgba(0, 0, 255, 0.3)'
}),
stroke: new Stroke({
color: '#0000FF',
width: 2
})
})
});

map.addLayer(vectorLayer);

setTimeout(() => {
map.getView().fit(vectorSource.getExtent(), {
padding: [50, 50, 50, 50],
maxZoom: 15
});
}, 100);


In most cases, nothing is in the extent.

Continue reading...