我无法显示 KML

Question

我在 openlayers 中迈出第一步，我觉得它很有趣，但是基于一个简单的例子来展示 OSM，我不可能添加一个带有 KML 文件的图层并将其一起显示。

我知道我快要实现了，这就是我去找你的原因，在此先感谢你的帮助。

我的代码如下：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM';
import KML from 'ol/format/KML';
import VectorSource from 'ol/source/Vector';



var openstreet = new TileLayer({
    source: new OSM()
})

var geomapa = new VectorLayer({
    source: new VectorSource({
        url: 'maps/kml/doc.kml',
        format: new KML()
    })
});


const map = new Map({
    target: 'map',
    layers: [openstreet, geomapa],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

Answer 1

在 https://jsfiddle.net/geocodezip/yvekp0ud/1/ 中测试我发现了奇怪的问题。

我正在使用两个 URL 测试相同的 nodejs 代码：

https://openlayers.org/en/latest/examples/data/kml/2012-02-10.kml  **works with nodejs**

https://geo.anantara.cl/maps/kml/doc.kml **dosen't works with nodejs**

所以，我发现有必要配置一个apache web服务器，包括下面的AddType

Apache Web Server Configuration

所以，同样的 nodejs 代码，结果是：

1) 如果两个 kml 文件都在我的网络服务器 apache 上，则不起作用（2012-02-10.kml 和 doc.kml）

2) 如果仅使用文件 2012-02-10.kml 进行测试但在服务器 openlayers.org

另一方面，如果我使用以下 url **http://kmlviewer.nsspot.net/** 来测试我的网络服务器上的两个文件，使用 google 地图，一切正常。

我猜 openlayers 或我的代码中有一些错误，或者可能是用 google earth 生成的 kml 文件不喜欢 openlayers。

我的代码是：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM';
import KML from 'ol/format/KML';
import VectorSource from 'ol/source/Vector';

var openstreet = new TileLayer({
    source: new OSM()
});

var geomapa = new VectorLayer({
    source: new VectorSource({
        //url: 'https://geo.anantara.cl/maps/kml/doc.kml',
        //url: 'https://geo.anantara.cl/maps/kml/2012-02-10.kml',
        url: 'https://openlayers.org/en/latest/examples/data/kml/2012-02-10.kml',
        format: new KML()
    })
});

const map = new Map({
    target: 'map',
    layers: [openstreet, geomapa],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

我的HTML密码是

  <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Using Parcel with OpenLayers</title>
      <style>
         #map {
         width: 400px;
         height: 250px;
         }
      </style>
   </head>
   <body>
      <div id="map"></div>
      <script src="./index.js"></script>
   </body>
</html>

Answer 2

万岁！调试包裹我发现了以下错误

    Access to XMLHttpRequest at 'https://geo.anantara.cl/maps/kml/2012-02-10.kml' 
from origin 'http://localhost:1234' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 

[http://localhost:1234/]
Failed to load resource: net::ERR_FAILED [https://geo.anantara.cl/maps/kml/2012-02-10.kml]

所以在 express 服务器工作..

Answer 3

已解决！

尽管正如官方文档所指出的那样，我是使用 parcel 在 openlayers 中迈出第一步，但我必须声明：

1) 如果将kml文件发布到外部服务器，web服务器必须配置为告诉客户端该资源是一个KML文件，因此，这些指令必须添加到服务器：

2) 以为是openlayers + parcel有bug，所以运行进入报错

    Access to XMLHttpRequest at 'https://geo.anantara.cl/maps/kml/2012-02-10.kml' 
    from origin 'http://localhost:1234' has been blocked by CORS policy: 
    No 'Access-Control-Allow-Origin' header is present on the requested resource. 

[http://localhost:1234/]
Failed to load resource: net::ERR_FAILED [https://geo.anantara.cl/maps/kml/2012-02-10.kml]

什么意思？有必要在我的 Apache 服务器上添加以下代码

 Header set Access-Control-Allow-Origin "http://127.0.0.1:1234"

现在有效了..，我建议 parcel 记录将 kml 文件发布到外部服务器以及如何启用 CORS 设置。

我无法显示 KML

I can't display the KML

javascript

kml

openlayers

openlayers-6