加载Gpx轨迹后，如何使用不同的颜色创建传单折线

问题描述 投票：0回答：1

我使用脚本将 gpx 轨迹直接加载到我的地图上，效果很好。

https://github.com/shramov/leaflet-plugins

脚本的核心是

var track = new L.GPX('fells_loop.gpx', {
    async: true,
    display_wpt:false
}).on('loaded', function (e) { 
    map.fitBounds(e.target.getBounds());
}).addTo(map);

使用此脚本加载和转换 GPX 文件

L.GPX = L.FeatureGroup.extend({
initialize: function (gpx, options) {
    L.Util.setOptions(this, options);
    this._gpx = gpx;
    this._layers = {};
    
    if (gpx) {
        this.addGPX(gpx, options, this.options.async);
    }
},

loadXML: function (url, cb, options, async) {
    if (async === undefined) async = this.options.async;
    if (options === undefined) options = this.options;

    var req = new window.XMLHttpRequest();
    req.open('GET', url, async);
    try {
        req.overrideMimeType('text/xml'); // unsupported by IE
    } catch (e) {}
    req.onreadystatechange = function () {
        if (req.readyState !== 4) return;
        if (req.status === 200) cb(req.responseXML, options);
    };
    req.send(null);
},

_humanLen: function (l) {
    if (l < 2000)
        return l.toFixed(0) + ' m';
    else
        return (l/1000).toFixed(1) + ' km';
},

_polylineLen: function (line)//line is a L.Polyline()
{
    var ll = line._latlngs;
    var d = 0, p = null;
    for (var i = 0; i < ll.length; i++)
    {
        if (i && p)
            d += p.distanceTo(ll[i]);
        p = ll[i];
    }
    return d;
},

addGPX: function (url, options, async) {
    var _this = this;
    var cb = function (gpx, options) { _this._addGPX(gpx, options); };
    this.loadXML(url, cb, options, async);
},

_addGPX: function (gpx, options) {
    var layers = this.parseGPX(gpx, options);
    if (!layers) return;
    this.addLayer(layers);
    this.fire('loaded');
},

parseGPX: function (xml, options) {
    var j, i, el, layers = [];
    var named = false, tags = [['rte','rtept'], ['trkseg','trkpt']];

    for (j = 0; j < tags.length; j++) {
        el = xml.getElementsByTagName(tags[j][0]);
        for (i = 0; i < el.length; i++) {
            var l = this.parse_trkseg(el[i], xml, options, tags[j][1]);
            for (var k = 0; k < l.length; k++) {
                if (this.parse_name(el[i], l[k])) named = true;
                layers.push(l[k]);
            }
        }
    }

    el = xml.getElementsByTagName('wpt');
    if (options.display_wpt !== false) {
        for (i = 0; i < el.length; i++) {
            var marker = this.parse_wpt(el[i], xml, options);
            if (!marker) continue;
            if (this.parse_name(el[i], marker)) named = true;
            layers.push(marker);
        }
    }

    if (!layers.length) return;
    var layer = layers[0];
    if (layers.length > 1) 
        layer = new L.FeatureGroup(layers);
    if (!named) this.parse_name(xml, layer);
    return layer;
},

parse_name: function (xml, layer) {
    var i, el, txt='', name, descr='', link, len=0;
    el = xml.getElementsByTagName('name');
    if (el.length)
        name = el[0].childNodes[0].nodeValue;
    el = xml.getElementsByTagName('desc');
    for (i = 0; i < el.length; i++) {
        for (var j = 0; j < el[i].childNodes.length; j++)
            descr = descr + el[i].childNodes[j].nodeValue;
    }
    el = xml.getElementsByTagName('link');
    if (el.length)
        link = el[0].getAttribute('href');

    if (layer instanceof L.Path)
        len = this._polylineLen(layer);

    if (name) txt += '<h2>' + name + '</h2>' + descr;
    if (len) txt += '<p>' + this._humanLen(len) + '</p>';
    if (link) txt += '<p><a target="_blank" href="'+link+'">[...]</a></p>'; 

    if (layer && layer._popup === undefined) layer.bindPopup(txt);
    return txt;
},

parse_trkseg: function (line, xml, options, tag) {
    var el = line.getElementsByTagName(tag);
    if (!el.length) return [];
    var coords = [];
    for (var i = 0; i < el.length; i++) {
        var ll = new L.LatLng(el[i].getAttribute('lat'),
                    el[i].getAttribute('lon'));
        ll.meta = {};
        for (var j in el[i].childNodes) {
            var e = el[i].childNodes[j];
            if (!e.tagName) continue;
            ll.meta[e.tagName] = e.textContent;
        }
        coords.push(ll);
    }
    var l = [new L.Polyline(coords, options)];
    this.fire('addline', {line:l});
    return l;
},

parse_wpt: function (e, xml, options) {
    var m = new L.Marker(new L.LatLng(e.getAttribute('lat'),
                    e.getAttribute('lon')), options);
    var attributes = {};
    for (var i = 0; i < e.childNodes.length; i++) {
        var ch = e.childNodes[i];
        if (ch.nodeName !== '#text') {
            attributes[ch.nodeName] = ch.textContent;
        }
    }
    this.fire('addpoint', {point:m, attributes:attributes});
    return m;
}

});

我想要的是用不同的颜色绘制我生成的折线。

我找到了相同的解决方案，但我无法使它们与第一个脚本一起工作。

到目前为止找到的每个解决方案都是从用 json 编写的坐标或直接在 Js 文件上开始。 http://hgoebl.github.io/Leaflet.MultiOptionsPolyline/demo/

            altitude: {
            optionIdxFn: function (latLng) {
                var i, alt = latLng.alt,
                    altThresholds = [800, 900, 1000, 1100, 1200, 1300, 1400, 1500]; // meters

                if (!alt) {
                    return 0;
                }

                for (i = 0; i < altThresholds.length; ++i) {
                    if (alt <= altThresholds[i]) {
                        return i;
                    }
                }
                return altThresholds.length;
            },
            options: [
                {color: '#0000FF'}, {color: '#0040FF'}, {color: '#0080FF'},
                {color: '#00FFB0'}, {color: '#00E000'}, {color: '#80FF00'},
                {color: '#FFFF00'}, {color: '#FFC000'}, {color: '#FF0000'}
            ]
        },

https://iosphere.github.io/Leaflet.hotline/demo/

var hotlineLayer = L.hotline(coords, {
        min: 150,
        max: 350,
        palette: {
            0.0: '#008800',
            0.5: '#ffff00',
            1.0: '#ff0000'
        },
        weight: 5,
        outlineColor: '#000000',
        outlineWidth: 1
    });
    var bounds = hotlineLayer.getBounds();

https://oliv.github.io/leaflet-polycolor/

var latLngs = [[45.187273, 5.758124], [45.182772, 5.758516], [45.185767, 5.747106], [45.176569, 5.752082], [45.171863, 5.757120], [45.168354, 5.755178]];
var colors = ['rgb(20, 200, 100)', 'rgb(200, 100, 20)', null, null, 'rgb(20, 200, 100)', 'rgb(0, 0, 0)'];

var polyline = L.polycolor(latLngs, {
  colors: colors,
  weight: 5
}).addTo(map);

传单多色折线

   var latlngs = line.getLatLngs();

   latlngs.forEach(function(latlng, idx){
       if(idx+1 < latlngs.length ){
       var poly =  L.polyline([latlng,latlngs[idx+1]],{color: colors[idx]}).addTo(map);
    }
   })

如前所述，我无法安排让它们与第一个脚本一起工作

我尝试了不同的解决方案，但没有成功：

即

var track = new L.GPX('fells_loop.gpx', {
async: true,
display_wpt:false});

然后

var polyline = L.polycolor(track, {colors: colors,weight: 5}).addTo(map);

但只收到错误。

预先感谢您的任何建议。

RGDS

PS

我使用console.log(track);检查变量内部的内容并得到这个。

如何提取经纬度数据？这可能会解决主要问题

谢谢

javascript leaflet gradient polyline gpx
1个回答
0
投票

未回答问题，但找到了替代工作解决方案

为什么当我尝试在 javascript 中使用数组时出现未定义

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.