QGIS2web 中的标签不可编辑

Question

我想让我的标签在 QGIS2web 插件中可见和可定制。

我的代码如下所示：

 var size = 0;
 var placement = 'point';
 function categories_Area5chamber_14(feature, value, size, resolution, labelText,
                   labelFont, labelFill, bufferColor, bufferWidth,
                   placement) {
            switch(value.toString()) {case 'BT':
                return [ new ol.style.Style({
    stroke: new ol.style.Stroke({color: 'rgba(35,35,35,1.0)', lineDash: null, lineCap: 'butt', 
  lineJoin: 'miter', width: 0}),fill: new ol.style.Fill({color: 'rgba(0,0,0,1.0)'}),
    text: createTextStyle(feature, resolution, labelText, labelFont,
                          labelFill, placement, bufferColor,
                          bufferWidth)
})];
                break;
 case 'Voneus':
                return [ new ol.style.Style({
    stroke: new ol.style.Stroke({color: 'rgba(35,35,35,1.0)', lineDash: null, lineCap: 'butt', 
  lineJoin: 'miter', width: 0}),fill: new ol.style.Fill({color: 'rgba(252,0,0,1.0)'}),
    text: createTextStyle(feature, resolution, labelText, labelFont,
                          labelFill, placement, bufferColor,
                          bufferWidth)
})];
                break;}};

  var style_Area5chamber_14 = function(feature, resolution){
    var context = {
    feature: feature,
    variables: {}
   };
var value = feature.get("Chamber Type");
var labelText = "";
size = 1;
var labelFont = "15px, sans-serif";
var labelFill = "#787878";
var bufferColor = "";
var bufferWidth = 0;
var textAlign = "left";
var offsetX = 0;
var offsetY = 0;
var placement = 'point';
  if (feature.get("Chamber No") !== null) {
    labelText = String(feature.get("Chamber No"));
}

  var style = categories_Area5chamber_14(feature, value, size, resolution, labelText,
                      labelFont, labelFill, bufferColor,
                      bufferWidth, placement);

   return style;
 };

定义文本的元素根本不起作用。 只有labelFill有效。

我在这里找到了一些解决方案：

https://gis.stackexchange.com/questions/374510/how-to-make-labels-be-center-justified-in-an-openlayers-web-map

但它并不真正符合我的例子，因为我有：

     var style = categories_Area5chamber_14(feature, value, size, resolution, labelText,
                      labelFont, labelFill, bufferColor,
                      bufferWidth, placement);

     return style;

我怎么解决这个问题？ 我想更改字体、偏移量和颜色，但只有颜色labelFill有效。

在下图中，您可以看到我在代码中列出的 2 个案例。 一个对应于没有文本的红色框（我不知道为什么？），另一个对应于带有 label 的黑框，除了颜色之外无法编辑。

Answer 1

类似问题的解决方案在这里：

https://github.com/tomchadwin/qgis2web/issues/627

如果 labelFont 没有返回有趣的结果，我们可以在labelText中的feature.get之后添加它。

  var style_Area5chamber_14 = function(feature, resolution){
    var context = {
    feature: feature,
    variables: {}
   };
  var value = feature.get("Chamber Type");
  var labelText = "";
  size = 0;
  var labelFont = "15px \'MS Shell Dlg 2\', sans-serif";
  var labelFill = "#787878";
  var bufferColor = "";
  var bufferWidth = 0;
  var textAlign = "center";
  var offsetX = 0;
  var offsetY = 0;
  var placement = 'point';
    if (feature.get("Chamber No") !== null) {
       labelText = String(feature.get("Chamber No")); labelFont = "15px \'MS Shell Dlg 
 2\', sans-serif";    //adding our font properties again ;
   }


    var style = categories_Area5chamber_14(feature, value, size, resolution, 
 labelText,
                      labelFont, labelFill, bufferColor,
                      bufferWidth, placement);
                
     return style;

    };

为了文本消失，我们必须知道我们为 map 设置的缩放级别。如果字符串太长，当超过文本边界时可能无法显示（假设是红色框大小）。 当您决定设置较小的缩放级别时，就会发生这种情况。 在QGIS2web 插件中，我们的map 的最大缩放级别可以是28。如果将它缩小到ie 21 或22，那么更长的字符串对我们来说可能不可见。