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，那么更長的字符串對我們來說可能不可見。