Question

这个问题让我很尴尬，因为我怀疑我遗漏了一些非常明显的东西。我正在尝试在矢量源中渲染以编程方式生成的要素，但是未显示“要素”数组中的三点几何。（请参见下面的代码）

我将坐标作为字符串输入（这是API中的建议）。我还尝试将它们作为两个float元素的数组传递，但是没有用。
当我可以在控制台中访问它们时，正在正确创建这三个功能和'features'数组。
由于未触发“ addfeature”事件，因此确实未添加功能。

任何提示将不胜感激。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
        type="text/css">
    <style>
        .map {
            height: 400px;
            width: 800px;
        }
    </style>

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

    <title>OpenLayers example</title>

</head>

<body>

    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

        // I wish to render in the vector layer the following three features            
        const features = [

            new ol.Feature({
                geometry: new ol.geom.Point('29.630329200, 36.204621700'), // this string is exactly the output of ol.coordinate.toStringXY
                time: '2019-03-17 09:43:31.428',
                TWS: 5.29
            }),

            new ol.Feature({
                geometry: new ol.geom.Point('29.630280100, 36.204555700'),
                time: '2019-03-17 09:43:31.428',
                TWS: 3.50
            }),

            new ol.Feature({
                geometry: new ol.geom.Point('29.630290700, 36.204584000'),
                time: '2019-03-17 09:45:31.983',
                TWS: 1.50
            }),

        ];


        const topoMap = new ol.layer.Image({
            source: new ol.source.ImageArcGISRest({
                url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer'
            })
        });

        const baseOSM = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        const view = new ol.View({
            center: ol.proj.fromLonLat([29.630329200, 36.204621700]),
            zoom: 14
        });

        const sailingTrack = new ol.layer.Vector({
            source: new ol.source.Vector({
                // as per the API documentation this should be enough to render the features               
                features: features
            })
        });

        var map = new ol.Map({
            target: 'map',
            layers: [baseOSM, topoMap, sailingTrack],
            view: view
        });

        // The line below doesn't load the features either
        sailingTrack.getSource().addFeatures(features);

        // The event below never fires, hence the features are not being added            
        sailingTrack.getSource().on('addfeature', function () {

            console.log('addfeature fired');
            map.getView().fit(sailingTrack.getSource().getExtent());

        });

    </script
    </body>
    </html>

使用openlayers 5在矢量源中添加要素

0 个答案: