Question

我正在使用Openlayers 4.6和打字稿。

当我创建一个简单的矢量图来渲染地图上的普通黑点时，我可能会提供一个网址：

export interface Options {
    features: string;
    url: string;
    text: string;
    font: string;
    textBaseline: string;
    fillColor: string;
}
...
constructor(private options: Options) {
    const { features, url, text, font, textBaseline, fillColor } = this.options;
    const format = new ol.format.GeoJSON();
    this._layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            format,
            url
        }),
        style: new ol.style.Style({
            text: new ol.style.Text({
                text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            })
        })
    });    
 ...

它运作得很好：

但是，我希望以纯字符串格式提供（相同）数据，可以将其解析为实际的GeoJSON对象，如下所示：

export interface Options {
    features: string;
    url: string;
    text: string;
    font: string;
    textBaseline: string;
    fillColor: string;
}
...
constructor(private options: Options) {
    const { features, url, text, font, textBaseline, fillColor } = this.options;
    const format = new ol.format.GeoJSON();
    this._layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(features)
        }),
        style: new ol.style.Style({
            text: new ol.style.Text({
                text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            })
        })
    });    
 ...

通过调用

读取features中传递的字符串

private readTextFile(file: string): string {
    let rawFile = new XMLHttpRequest();
    let result: string = '';
    rawFile.open('GET', file, false);
    rawFile.onreadystatechange = () => {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status === 0) {
                result = rawFile.responseText;
            }
        }
    };
    rawFile.send(null);
    return result;
}

提供url作为file参数。

此按预期工作。使用chrome调试器逐步执行构造函数会导致以正确的格式读取正确的数据等。

在可视化方面，地图如下所示：

这显然是错误的...在缩小时，可以找到非洲海岸附近的点。当再次放大（很多！）时，点再次分开：

现在我在SO和其他论坛上阅读了几篇文章，我可能需要提供数据/特征预测。所以我试过了：

export interface Options {
    features: string;
    url: string;
    text: string;
    font: string;
    textBaseline: string;
    fillColor: string;
}
...
constructor(private options: Options) {
    const { features, url, text, font, textBaseline, fillColor } = this.options;
    const format = new ol.format.GeoJSON();
    this._layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(features, {
                dataProjection: 'EPSG:3857',
                featureProjection: 'EPSG:3857'
            })
        }),
        style: new ol.style.Style({
            text: new ol.style.Text({
                text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            })
        })
    });    
 ...

但结果保持不变。视图也具有相同的投影。

我在这里缺少什么？为什么通过url提供的数据是正确的，而字符串提供的相同数据是错误的？

Answer 1

数据是Lat Long，即EPSG 4326.您需要告诉您的应用程序在4326中读取并在3857中显示。就像现在一样，您声明数据已经在3857中，因此所有点都在坐标0的+ -180m（非度数）; 0。

尝试更改代码的这一部分：

features: new ol.format.GeoJSON().readFeatures(features, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
        })

当您使用URL获取数据时，数据投影和视图投影之间的投影更改由OL处理，如Vector.url doc中所述。

提供URL和功能字符串

1 个答案: