javascript - Openlayer-3:用GPS坐标绘制一条折线

对于我的公司，我必须开发一个可以使用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：不重要
  -点：包含一个对象数组（
{"location":[{"id":1854703,"latitude":42.831,"longitude":0.30087,"altitude":0,"hpl":0,"vpl":0,"speed":4,"direction":258,"date":"2012-08-25 03:43:23","device_id":786,"datereceived":"2012-08-25 03:43:23"}）。

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

如果有人可以帮助我，那就太好了。

问候，Brz。

最佳答案

您只需要如下创建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 );