2

我在 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
    })
});
4

3 回答 3

0

解决了！

尽管我正在使用 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"

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

于 2020-05-30T03:00:51.363 回答
0

万岁！调试包裹发现如下错误

    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]

所以在快递服务器上工作..

于 2020-05-30T01:20:50.770 回答
0

在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 服务器配置

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

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

2) 如果只测试文件 2012-02-10.kml 但在服务器 openlayers.org

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

我猜 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>
于 2020-05-25T01:43:22.120 回答