帶有點和名稱的Openlayers線串

Question

是否可以在所提到的坐標上創建帶有點的線串，以及該線串的名稱。

for (var i = 0; i < wp.length; i++) {
            wp[i] = ol.proj.transform(wp[i], 'EPSG:4326', 'EPSG:3857');
            //console.log(wp);

        }
        var wpfeatureLine = new ol.Feature({
            geometry: new ol.geom.LineString(wp)
        });

        var wpline = new ol.source.Vector({

        });
        wpline.addFeature(wpfeatureLine); //lined or a waypoint feature on map
        //wpline.addFeature(CircleFeature);


        var vectorLineLayer = new ol.layer.Vector({
            source: wpline,
            style: new ol.style.Style({
                fill: new ol.style.Fill({ color: '#000000', weight: 4 }),
                stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
            })
        });

        map.addLayer(vectorLineLayer);

Answer 1

您可以為每個線坐標添加一個點要素。

    //Test points
    wp=[[-121.876043, 37.357398],[-121.875808, 37.357439],
        [-121.875631,37.357293]];

    //You dont have to convert points to EPSG:3857 as our view is EPSG:4326
    //for (var i = 0; i < wp.length; i++) {
    //wp[i] = ol.proj.transform(wp[i], 'EPSG:4326', 'EPSG:3857');
    //console.log(wp);
    // }

var wpfeatureLine = new ol.Feature({
    geometry: new ol.geom.LineString(wp),
    name:'ABC Line'
});

var wpline = new ol.source.Vector({

});

//Add point feature for every coordinate
for (var i = 0; i < wp.length; i++) {
    //wp[i] = ol.proj.transform(wp[i], 'EPSG:4326', 'EPSG:3857');

    var pointFeature = new ol.Feature({
            geometry: new ol.geom.Point(wp[i]),
            name: 'XYZ'
            });

    wpline.addFeature(pointFeature);
}
//wpfeatureLine.setStyle(); You can add your custom style definition here.

wpline.addFeature(wpfeatureLine); //lined or a way point feature on map



var vectorLineLayer = new ol.layer.Vector({
    source: wpline,
//Remove any style, Default style will be used
});

 var map = new ol.Map({
     layers : [raster,vectorLineLayer],
     target: document.getElementById('map'),
     view: new ol.View({
       center: [-121.876043, 37.357398],
       projection: projection,
       zoom: 20,
    })
});