使用 Openlayers 3 加载 GML 层答案

【问题标题】：Load GML layer with Openlayers 3使用 Openlayers 3 加载 GML 层
【发布时间】：2016-08-10 14:36:05
【问题描述】：

我正在尝试将GML 文件加载到矢量图层中并将其绘制在地图上。出于某种原因，虽然这些特征被解析并添加到矢量图层，但它们并没有显示在地图上。

我尝试使用来自Geoserver 的GML 文件（对源代码稍作修改），openlayers 3 似乎没有问题消化它。

是我遗漏了什么，还是GML 解析器不支持自定义文件？

代码：

(function() {} (
        'use strict';

        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.transform([0, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 2
            })
        });

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET", "/echo/xml/", true);
        xmlhttp.onload = function () {
            var format = new ol.format.GML2();

            var xmlDoc = xmlhttp.responseXML;

            // Read and parse all features in XML document
            var features = format.readFeatures(xmlDoc, {
                featureProjection: 'EPSG:4326',
                dataProjection: 'EPSG:3857'
            });

            var vector = new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: format
                })
            });

            // Add features to the layer's source
            vector.getSource().addFeatures(features);

            map.addLayer(vector);
        };
        xmlhttp.send();
));

原始GML 文件可在IOC stations GML 获得。我在本地复制了一份以避免CORS。

【问题讨论】：

是的，你有特征，但没有几何（例如阅读后检查features[0].getGeometry()）。所以readFeatures 不能正常工作。
顺便说一下，当你的 GML 为 4326 时，你应该写 featureProjection: 'EPSG:3857' 和 dataProjection: 'EPSG:4326' ;)
@SergeyKolosov，你是对的。半小时前我找到了解决方案。我会发布它。
@SergeyKolosov、featureProjection 和 dataProjection 在这种情况下似乎没有必要。
是的，因为您从属性中获取坐标，然后手动转换它们

标签： openlayers-3 geoserver gml ogc

【解决方案1】：

一切似乎都已准备就绪，但尽管该代码加载了要素，但这些要素仍需要具有与其关联的几何图形。这可以通过创建ol.geom 来实现，在本例中为ol.geom.Point。

代码：

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: format
    })
});

/** This is new **/
for (var i = 0; i < features.length; i++) {

    var coordinates = [parseFloat(features[i].get('long')), parseFloat(features[i].get('lat'))];
    // Create the new geometry object
    var geom = new ol.geom.Point(ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'));

    features[i].setGeometry(geom);
}
/****/

vector.getSource().addFeatures(features);

【讨论】：