листовка: изменение размера множества маркеров при нажатии на один маркер - PullRequest
0 голосов
/ 24 сентября 2019

У меня есть набор маркеров на листовой карте, который представляет простои за определенный период времени.Когда пользователь щелкает по отключению, я бы хотел, чтобы каждый метр (конечные узлы на графике листовок), подверженные отключению, увеличивался в размере.Я пытался создать слой для каждого сбоя, который содержит все затронутые метры, но я делаю что-то неправильно.Я приложил свой код, комментируя ту часть, которая в данный момент не работает.Спасибо за вашу помощь!

<div id="mapInsert"></div>
    <script type="text/javascript">
    //Hack to stop leaflet from loading before geojson data loads 
    if(modelStatus === "finished"){
    mapHtml = '<p class="reportTitle">Outage Map (Faults Marked in Blue)</p><div id="mapHolder" class="tightContent"><div id="map"></div></div>';
    gebi('mapInsert').innerHTML = mapHtml;
    //Parse geojson dict (instead of reading from geojson.js - doesn't really matter if you want to load from geojson.js, was just quicker to prototype) 
    var geojson = JSON.parse(allOutputData['geoDict']);
    console.log(geojson);

    function filterFunction(feature, layer) {
        minMeter = feature.properties['meterMinFilter'];
        maxMeter = feature.properties['meterMaxFilter'];
        meterCount = feature.properties['meterCount'];
        minDuration = feature.properties['durationMinFilter'];
        maxDuration = feature.properties['durationMaxFilter'];
        dur = feature.properties['duration'];
        causeFilter = feature.properties['causeFilter'];
        cause = feature.properties['cause'];
        time = feature.properties['time'];
        timeMin = feature.properties['timeMin'];
        timeMax = feature.properties['timeMax'];
        thisMeter = false;
        if (minMeter > maxMeter)
            return false;
        if (meterCount > maxMeter || meterCount < minMeter)
            thisMeter = false;
        else thisMeter = true;
        if (thisMeter == false)
            return false;
        thisDuration = false;
        if (minDuration > maxDuration)
            return false;
        if (dur > maxDuration || dur < minDuration) {
            thisDuration = false;
        }
        else thisDuration = true;
        if (thisDuration == false) {
            return false;
        }
        thisCause = false;
        if (causeFilter != '0') {
            if (causeFilter == cause) {
                thisCause = true;
            }
            else thisCause = false;
        }
        else thisCause = true;
        if (thisCause == false) {
            return false;
        }
        thisTime = false;
        if (timeMin > timeMax)
            return false;
        if (time > timeMax || time < timeMin)
            thisTime = false;
        else thisTime = true;
        if (thisTime == false)
            return false;
        return true;
    }

    function onEachFeature(feature, layer) {
        var popup = '';
        if (feature.properties['popupContent']){
            popup += feature.properties['name']
            popup += feature.properties['popupContent'];
            layer.bindPopup(popup);
        }
    }

    function pointToLayerNode(feature, latlng) {
        let fillColorValue = 'gray';
        let rad = 3
        if (feature.properties['pointColor']){
            fillColorValue = feature.properties['pointColor'];
            rad = 6;
        }
        return L.circleMarker(latlng, {
            radius: rad,
            fillColor: fillColorValue,
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
    }

    function lineStyle(feature){
        if (feature.geometry['type'] == 'LineString'){
            if (feature.properties.edgeColor){
                return {
                    "color": feature.properties.edgeColor
                }
            }
            else{
                return {
                    "color": "black"
                }
            }
        }
        else if (feature.geometry['type'] == 'Polygon'){
            return {
                "color": "blue"
            }
        }
    }

    geojsonLayer = L.geoJSON(false, {
                pointToLayer: pointToLayerNode,
                onEachFeature: onEachFeature,
                style: lineStyle,
                filter: filterFunction
            });

    geojson.features.forEach(function(feature){
        if (feature.geometry['type'] == 'Point'){
            geojsonLayer.addData(feature);
        }
        else if (feature.geometry['type'] == 'LineString'){
            geojsonLayer.addData(feature);
        }
        else if (feature.geometry['type'] == 'Polygon'){
            geojsonLayer.addData(feature);
        }
    });

    //function click(e) {
    //  if (typeof clicked != 'undefined') {clicked.setRadius(3);}

    //  var layer = e.target;
    //  e.target.setRadius(5);
    //  clicked = e.target;
    //  update(feature.properties.radius);
    //}

    //var update = function(feature, latlng) {
    //  return L.circleMarker(latlng)
    //}

    //function onEachFeature2(feature,layer) {
    //  layer.on({click: click,})
    //}

    // Optional forcing of canvas renderer:
    // var map = L.map('map', {renderer: L.canvas()}).fitBounds(bounds);
    var bounds = geojsonLayer.getBounds();
    var map = L.map('map').fitBounds(bounds);

    //geojson.features.forEach(function(feature1) {
    //  if (feature1.properties['meters']) {
    //      var feature1.properties['name'] = new L.geoJSON(false, {
    //          onEachFeature: onEachFeature2,
    //          pointToLayer: function(feature, latlng) {
    //              return L.circleMarker(latlng, {
    //                  radius: 3,
    //                  fillColor: 'gray',
    //                  color: '#000',
    //                  opacity : 1,
    //                  weight: 1.5,
    //                  fillOpacity: 1
    //              });
    //          }
    //      });
    //      feature1.properties['name'].addData(feature1);
    //      geojson.features.forEach(function(feature2){
    //          if (feature1.properties['meters'].includes(feature2.properties['name'])) {
    //              feature1.properties['name'].addData(feature2);
    //          }                   
    //      });
    //  }
    //});

    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);
    L.control.scale().addTo(map);
    geojsonLayer.addTo(map);
}
...