onEachFeature 函数内的 Leaflet nestinf IF 条件

Question

我想根据条件语句设置弹出内容。我自己有两种方法，none 目前为止它们都有效。

第一个：

 onEachFeature: function (pointFeature, layer) {
 function Stream() {
  if (pointFeature.properties.Stream = 1) {
    "<p> Live Stream </p>"
  } else { "<p> Image refresh </p>"}
  }
  var popupContent = "<p><h2 class='webcam_location'>" +
    pointFeature.properties.Location + "</h2></p>" + 
    "<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
    "<iframe src='" + pointFeature.properties.Link + "' height='200' width='300' title='camera 
    thumbnail'></iframe>" +
      Stream()
      };
     layer.bindPopup(popupContent);
    }

第二个：

  onEachFeature: function (pointFeature, layer) {
   var popupContent = "<p><h2 class='webcam_location'>" +
    pointFeature.properties.Location + "</h2></p>" + 
    "<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
    "<iframe src='" + pointFeature.properties.Link + "' height='200' width='300' title='camera 
    thumbnail'></iframe>" +
      if (pointFeature.properties.Stream = 1) {
        "<p> Live Stream </p>"
      } else { "<p> Image refresh </p>"}
      };
    layer.bindPopup(popupContent);

控制台出现错误：

语法错误：意外的标记'if'

如何在现有函数中放置 if 语句？

Answer 1

将连接替换为 template literal syntax，并为您的条件文本使用单独的连接。

像这样：

更新：根据您的意见，我修改了解决方案以更接近您提供的 fiddle。

这应该足够接近，您可以适应。

首先，将弹出内容和条件内容保存到变量中。使用所需的变量构建字符串，包括条件内容。然后使用该单个变量 (popUpContent) 作为要添加到弹出窗口的内容。

onEachFeature: function(pointFeature, layer) {
  const stream = pointFeature.properties.Stream;
  let popUpConditionalContent;

  if (stream === 1) {
    popUpConditionalContent = "<p class='webcam_refresh'> Live Stream </p>"
  } else {
    popUpConditionalContent = "<p class='webcam_refresh'> Image refresh </p>"
  }

  const popUpContent = `<p><h2 class='webcam_location'>
    ${pointFeature.properties.Location}</h2></p>
    <h4 class='webcam_provider'>${pointFeature.properties.Provider}</h4>
    <iframe src='${pointFeature.properties.Link}' height='200' width='300' title='camera 
  thumbnail '></iframe>${popUpConditionalContent}<b class='popup_category'>Rotation:</b>${pointFeature.properties.Rotation}${stream}`;

  var popUp = L.popup({
    className: 'map-popup',
  }).setContent(popUpContent);

  layer.bindPopup(popUp);
}

onEachFeature 函数内的 Leaflet nestinf IF 条件

Leaflet nestinf IF condition inside the onEachFeature function

javascript

leaflet