У меня есть набор маркеров на листовой карте, который представляет простои за определенный период времени.Когда пользователь щелкает по отключению, я бы хотел, чтобы каждый метр (конечные узлы на графике листовок), подверженные отключению, увеличивался в размере.Я пытался создать слой для каждого сбоя, который содержит все затронутые метры, но я делаю что-то неправильно.Я приложил свой код, комментируя ту часть, которая в данный момент не работает.Спасибо за вашу помощь!
<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: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
L.control.scale().addTo(map);
geojsonLayer.addTo(map);
}