Angular / Openlayers：在 WKT 中绘制多边形可以，但 GML 格式不行

Question

使用 WKT 绘制简单的多边形在 Angular 18、Openlayers 10 中效果很好。无论我尝试什么，我都无法使用 GML 绘制任何内容。

这就是有效的：

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);

我尝试使用 GML 进行的任何操作都不起作用。当然，我使用了不同的格式，如下所示。在下一个例子中我使用了 poslist 等

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

// 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,
});

同样休息。

我的 package.json 包含：虽然我尝试了其他组合：

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

退一步，我什至尝试过......但是可惜，我无法让 GML 工作。

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 = `
    <gml:Polygon srsName="EPSG:28992" xmlns:gml="http://www.opengis.net/gml">
        <gml:exterior>
            <gml:LinearRing>
                <gml:posList>
                    155636 466910 165636 466910 165636 476910 155636 476910 155636 466910
                </gml:posList>
            </gml:LinearRing>
        </gml:exterior>
    </gml:Polygon>
`;

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);

在大多数情况下，没有什么是在范围内的。

Answer 1

readGeometry()

未记录在 GML 格式的 API 中。 然而，它确实作为一种内部方法存在，适用于节点对象，而不是文本。 此外，您的多边形定义似乎是 GML2 格式：

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

const gmlDoc = new DOMParser().parseFromString(gmlData, 'application/xml');
const gmlNode = document.createElement('div');
gmlNode.appendChild(gmlDoc.documentElement);

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