我正在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
})
});
在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文件都在我的Web服务器apache上（2012-02-10.kml和doc.kml），则不起作用
2）如果仅在服务器openlayers.org中使用文件2012-02-10.kml进行测试
另一方面，如果我使用以下URL **http://kmlviewer.nsspot.net/**来测试我的Web服务器上的两个文件以及google map，则全部正常。
我想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>
Hurra！调试包裹，我发现以下错误
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]
所以在快递服务器上工作。。
已解决！