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);
            }
        }

所以，我想用一个带有不同参数的函数绘制一条Polyline： - pool：存储我的折线的Hashtable - id：不重要 - points：包含一系列对象（ {"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。

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 );

Openlayer-3：绘制带GPS坐标的折线

1 个答案: