提供 URL 和功能字符串时的不同结果 [英] Different result when providing a URL and features string

问题描述

我使用的是 Openlayers 4.6 和 typescript.

I am using Openlayers 4.6 and typescript.

当我创建一个简单的 vectorlayer 来渲染地图上的普通黑点时，我可以为它提供一个 url，如:

When I create a simple vectorlayer to render plain, black dots on the map, I may provide it a url like:

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 对象，如下所示:

However, I want to provide the (same) data in a plain string format, that can be parsed to an actual GeoJSON object, like this:

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中传入的字符串通过调用

The string passed in features is read by calling

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 参数.

providing url as file parameter.

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

This works as expected. Stepping through the constructor with the chrome debugger results in the correct data being read, in the correct format, etc.

谈到可视化时，地图如下所示:

When it comes to the visualization, the map looks like this:

这显然是错误的......缩小后，人们可以在非洲海岸附近找到这些点.再次放大时(很多！)，点再次分开:

which is obviously wrong... Upon zooming out, one can find the dots right off the coast of africa. When zooming in again (a lot!), the dots separate again:

现在我在 SO 和其他论坛上阅读了几篇文章，我可能需要提供数据/特征投影.所以我尝试了:

Now I read in several posts here on SO and other forums, that I may need to give the data/feature projection. So I tried:

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

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

But the result stays the same. The view has the same projection, as well.

我在这里错过了什么?为什么url提供的数据是正确的，而字符串提供的数据却是错误的?

What am I missing here? Why is the data, that you provide via url correct, while the same data, provided by string wrong?

推荐答案

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

The data is in Lat Long, i.e. EPSG 4326. You need to tell your app to read in 4326 and to display in 3857. As it is now, you declare that the data is already in 3857, so all points are within +-180m (not degrees) of coordinate 0;0.

尝试更改这部分代码:

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

当您使用 URL 获取数据时，数据投影和视图投影之间的这种投影变化由 OL 处理，如 Vector.url 文档.

When you use the URL to fetch the data, this change of projection between the Data projection and the View projection is handled by OL, as described in the Vector.url doc.

这篇关于提供 URL 和功能字符串时的不同结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！