javascript - Openlayer-3 : Draw a polyline with GPS coordinates

Question

对于我的公司，我必须开发一个用 GPS 坐标绘制路径的功能。事实上，我的公司在多场比赛中使用 GPS 来跟踪运行者。

所以，我尝试了很多不同的方法来绘制折线，我的最后一个版本是:

                _public.drawPolyline = function(pool, id, points, color, opacity, weight) {
            try {
                var l = points.length;
                var latlngs = [];
                var j=1;
                for (var i = 0; i < l; i++) {
                    latlngs[i] = new ol.geom.Point(ol.proj.transform([points[i].longitude, points[i].latitude], 'EPSG:4326', 'EPSG:3857'));
                };

                var style = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: color,
                        width: weight,
                        opacity: opacity,
                        radius: 6
                    })
                });
                //Check if pool exists, else create it
                if (!_private._polyline.containsKey(pool)) {
                    _private._polyline.put(pool, new jQuery.Hashtable())
                }
                var currentPool = _private._polyline.get(pool);
                //Check if line exists, if yes, update path
                if (currentPool.containsKey(id)) {
                    var vectorLayer = currentPool.get(id).layer;
                    vectorLayer.setVisible(true);
                } else {              
                    var linefeature = new ol.source.Vector('Path', {styleMap: style});
                    var comp = new ol.geom.LineString(latlngs);
                    var featurecomp = new ol.Feature({
                        name: "Comp",
                        geometry: comp
                    });
                    var vector = new ol.layer.Vector({
                        title: pool,
                        visible: true,
                        source: linefeature
                    });
                    linefeature.addFeatures(featurecomp);
                    currentPool.put(id, linefeature);
                    currentPool.put(id, { "type": "Path", "url": id, "layer": vector });
                    var vectorLayer = currentPool.get(id).layer;
                    vectorLayer.setVisible(true);
                }
            } catch (e) {
                console.log(e.message);
            }
        }

所以，我想用具有不同参数的函数绘制多段线: - 池:存储我的折线的哈希表 - id:不重要 - 点:包含对象数组( {"位置":[{"id":1854703,"纬度":42.831,"经度":0.30087,"高度":0,"hpl":0,"vpl":0,"速度": 4,"方向":258,"日期":"2012-08-25 03:43:23","device_id":786,"datereceived":"2012-08-25 03:43:23"}).

根据我的测试服务器，我的日志中没有错误，但是，我仍然没有绘制折线。

如果有人能帮助我解决这个问题，那就太好了。

问候，Brz。

Answer 1

您只需创建如下所示的 LineString 点

points.push(ol.proj.transform([xx,yy],'EPSG:4326', 'EPSG:3857'));

演示链接 https://plnkr.co/edit/WqWoFzjQdPDRkAjeXOGn?p=preview

编辑

            var vectorSource = new ol.source.Vector({});
            var vectorSourcePoint = new ol.source.Vector({});
            var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 4,
                fill: new ol.style.Fill({
                    color: color
                }),
                stroke: new ol.style.Stroke({
                    color: color,
                    width: weight,
                    opacity: opacity
                })
            })
        });
        var l = points.length;
        var latlngs = [];
        for (var i = 0; i < l; i++) {
            latlngs.push(ol.proj.transform([points[i].longitude, points[i].latitude],'EPSG:4326', 'EPSG:3857'));

            //below 3 lines of code creates point geometry. I think you don't need this
            var point = new ol.geom.Point([points[i].longitude, points[i].latitude]).transform('EPSG:4326', 'EPSG:3857');
            var fea = new ol.Feature({geometry:point});
            vectorSourcePoint.addFeature(fea);
        };

        //below lines of code creates polyline. You are missing these lines.
        var thing = new ol.geom.MultiLineString([points]);
        var featurething = new ol.Feature({
            name: "Thing",
            geometry: thing
        });
        vectorSource.addFeature( featurething );