OpenLayers map.addLayer 类型错误

Question

我正在尝试使用 OpenLayers（版本 6.5.0）在 OpenStreetMap 数据上做一些简单的绘图。地图加载正常。单击右上角的按钮时，我尝试进行绘图。

我将这个 GPS 坐标数组转换为多边形、要素、ol.source.Vector、ol.layer.Vector。我在控制台上记录沿途构建的每个对象。这看起来很顺利。

我最终想使用 .addLayer() 函数将（矢量）图层添加到现有地图。此时，OpenLayer 6.5.0 JavaScript 代码内部出现问题。在 ol.js 代码的深处，它抛出一个 TypeError: t.addEventListener is not a function。 Browser screenshot

我看过多个示例：

到目前为止，我不知道这是否是 OpenLayer 6.5.0 中的错误，或者我在将 GPS 坐标数组转换为 ol.layer.vector 对象的过程中遗漏了什么。有什么提示吗？

完整 html/javascript 代码如下：

<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="ol.css">
    <script src="ol.js"></script>
    <script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
    var vView = new ol.View({
        center: ol.proj.fromLonLat([szLon, szLat]),
        zoom: zoom
    });
    var lTile = new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    var map = new ol.Map({
        target: domDivId,
        layers: [lTile],
        view: vView
    });
    return map;
}

function drawBermuda(map) {
    // Bermuda triangle (approximate) GPS coordinates in [lat,lon] format
    var arPath = [
        [18.472282,-66.123934], // Bermuda
        [32.297504,-64.778447], // Puerto Rico
        [25.732447,-80.133221], // Miami
        [18.472282,-66.123934]  // Bermuda
    ];
    console.log(arPath);

    var pPath = {
        'type': 'Polygon',
        'coordinates': arPath
    };
    console.log(pPath);
    
    var fPath = {
        'type': 'Feature',
        'geometry': pPath
    };
    console.log(fPath);
    
    var svPath = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(fPath)
    });
    console.log(svPath);
    
    var lvPath = new ol.layer.Vector({
        source: svPath,
    });
    console.log(lvPath);
    
    map.addLayer([lvPath]);
}

    </script>
</head>
<body>
    <div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
    <script>
    map = loadMap('div_map', 25.0, -71.0, 5);
    </script>
    <div style="float:right">
        <button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
    </div>
</body>
</html>

P.S。我知道我仍然可能需要交换纬度和经度并以其他方式转换坐标，以便 OpenLayer 正确解释它们。但这不是这里的重点。我猜...

Answer 1

以及遗漏和错位[ ] geojson 坐标必须以经度、纬度顺序和要素读入视图投影

<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
    var vView = new ol.View({
        center: ol.proj.fromLonLat([szLon, szLat]),
        zoom: zoom
    });
    var lTile = new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    var map = new ol.Map({
        target: domDivId,
        layers: [lTile],
        view: vView
    });
    return map;
}

function drawBermuda(map) {
    // Bermuda triangle (approximate) GPS coordinates in [lon,lat] format
    var arPath = [[
        [-66.123934, 18.472282], // Bermuda
        [-64.778447, 32.297504], // Puerto Rico
        [-80.133221, 25.732447], // Miami
        [-66.123934, 18.472282]  // Bermuda
    ]];

    var pPath = {
        'type': 'Polygon',
        'coordinates': arPath
    };
    
    var fPath = {
        'type': 'Feature',
        'geometry': pPath
    };
    
    var svPath = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(fPath, {featureProjection: map.getView().getProjection()})
    });
    
    var lvPath = new ol.layer.Vector({
        source: svPath,
    });
    
    map.addLayer(lvPath);
}

    </script>
</head>
<body>
    <div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
    <script>
    map = loadMap('div_map', 25.0, -71.0, 5);
    </script>
    <div style="float:right">
        <button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
    </div>
</body>
</html>

OpenLayers map.addLayer 类型错误

OpenLayers map.addLayer TypeError

javascript

openlayers-6