Изменение цвета маркеров листовок в реальном времени с помощью веб-сайтов - PullRequest
Новая
       88

Изменение цвета маркеров листовок в реальном времени с помощью веб-сайтов

1 голос
/ 28 мая 2020

У меня есть следующий код, который опрашивает мою конечную точку geo JSON / station каждые 15 секунд и обновляет карту новым слоем точечных объектов. В данный момент он мигает во время обновления. 

var map = L.map("mapid").setView([0,0], 1);

///////////////////////////
// Map Vector Tile Layer //
///////////////////////////

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 18,
}).addTo(map);


//////////////////
// Points Layer //
//////////////////

function onEachFeaturePoint (feature, layer) {
var html = `
<div>
    <table class='table table-condensed table-striped'>
        <tbody>
            <tr>
                <td>Station Name: ${feature.properties.name}</td>
            </tr>
            <tr>
                <td>Latitude: ${feature.geometry.coordinates[1].toFixed(7)}</td>
            </tr>
            <tr>
                <td>Longitude: ${feature.geometry.coordinates[0].toFixed(7)}</td>
            </tr>
            <tr>
                <td>Height: ${feature.properties.height.toFixed(3)}</td>
            </tr>

        </tbody>
    </table>
</div>
`;
    layer.on(
        'click', 
        function () {
            document.getElementById('station-info').innerHTML = "";
            document.getElementById('station-info').innerHTML = html;
        }
    );
    /*layer.bindPopup(html);*/
}

function markerOptions (feature) {
    var rnum = Math.floor(Math.random()*10);
    if ( rnum < 5 ) {
        return { radius: 4, fillColor: "#ff0000", color: "#000", weight: 1, opacity: 1,fillOpacity: 0.8 };
    }
    return { radius: 4, fillColor: "#00ff00", color: "#000", weight: 1, opacity: 1,fillOpacity: 0.8 };

}

function pointToLayer (feature, latlng) {
    return L.circleMarker(latlng, markerOptions(feature));
}

function addStations() {

    map.eachLayer(function(layer) {
        if (layer.hasOwnProperty("points")) { 
            map.removeLayer(layer);
        }
    });

    var stationsLayer = new L.GeoJSON.AJAX(
        "/stations",
        {
            onEachFeature: onEachFeaturePoint,
            pointToLayer: pointToLayer,
        }
    ); 

    stationsLayer.points = true;

    // Add the layer 
    stationsLayer.addTo(map);

    setTimeout(addStations, 15000);

}

addStations();

В конечном итоге я хотел бы использовать данные, поступающие из веб-сокета, для обновления карты. 

 var loc = window.location;
 var uri = 'ws:';

 if (loc.protocol === 'https:') {
   uri = 'wss:';
 }
 uri += '//' + loc.host;
 uri += loc.pathname + '/' + 'stream';

 ws = new WebSocket(uri)

 ws.onopen = function() {
   console.log('Connected')
 }

 ws.onmessage = function(evt) {
   // do something here to update color of the stations
 }

Я искал возможность комбинировать d3. js с листовкой (https://bost.ocks.org/mike/leaflet/) или, возможно, метод domUtil.addClass () листовки ( Как сделать маркеры в листочке мигающими ). Но примеры часто показывают обновление одной точки. Я немного заблудился, пытаясь экстраполировать это на несколько точек (например, набор функций geo JSON).

Есть ли лучший способ обновить цвет сотен точек на карте в реальном времени без замены всего слоя?

...