Openlayers Label添加背景

Openlayers的2.11的 Label是没有添加背景色的,需要使用label需要添加如下代码

//修改文件: openlayers/lib/OpenLayers/Renderer/Elements.js
//行号范围@@ -838,6 +838,10 @@
         if (label) {
             this.textRoot.removeChild(label);
         }
//添加start
        var labelBackground = document.getElementById(featureId + this.LABEL_ID_SUFFIX + "_bg");
        if (labelBackground) {
            this.textRoot.removeChild(labelBackground);
        }
//添加结束
     },
 
//===================================================================
//修改文件: openlayers/lib/OpenLayers/Renderer/VML.js
//行号范围 -807,6 +807,15 @@
 
         textbox.innerText = style.label;
 
//添加start
        if (style.labelBackgroundColor) {
            textbox.style.backgroundColor = style.labelBackgroundColor;
        }
        if (style.labelBorderColor || style.labelBorderSize) {
            textbox.style.border = "solid " +
                (style.labelBorderSize ? style.labelBorderSize : "1px") + " " +
                (style.labelBorderColor ? style.labelBorderColor : "#000000");
        }
        
//添加结束
         if (style.fillColor) {
             textbox.style.color = style.fontColor;
         }


//===================================================================
//修改文件: openlayers/lib/OpenLayers/Renderer/SVG.js
//行号范围 -713,6 +713,38 @@
             label.appendChild(tspan);
             this.textRoot.appendChild(label);
         }   
//添加start
        
        if (style.labelBackgroundColor ||
                style.labelBorderColor ||
                style.labelBorderSize) {
            var bg = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_bg", "rect");
            if (style.labelBackgroundColor) {
                bg.setAttributeNS(null, "fill", style.labelBackgroundColor);
            }
            if (style.labelBorderColor || style.labelBorderSize) {
                bg.setAttributeNS(null, "stroke", 
                    (style.labelBorderColor ? style.labelBorderColor : "#000000"));
                bg.setAttributeNS(null, "stroke-width", 
                    (style.labelBorderSize ? style.labelBorderSize : "0.5"));
            }
            var bbox = label.getBBox();
            var labelWidth = bbox.width;
            var labelHeight = bbox.height;
            var padding = 2;
            if (style.labelPadding) {
                var pos = style.labelPadding.indexOf("px");
                if (pos == -1) {
                    padding = style.labelPadding;
                } else {
                    padding = parseInt(style.labelPadding.substr(0, pos));
                }
            }
            bg.setAttributeNS(null, "x", bbox.x-padding);
            bg.setAttributeNS(null, "y", bbox.y-padding);
            bg.setAttributeNS(null, "height", (labelHeight+padding*2)+"px");
            bg.setAttributeNS(null, "width", (labelWidth+padding*2)+"px");
            this.textRoot.insertBefore(bg, label);
        }  
//添加结束
     },
     
//===================================================================
//使用示例: openlayers/examples/vector-features-with-text.html
//行号范围@@ -33,6 +33,10 @@
                     fontSize: "12px",
                     fontFamily: "Courier New, monospace",
                     fontWeight: "bold",
//添加结束
                     labelPadding: "3px",
                     labelBackgroundColor: "#efefef",
                     labelBorderColor: "#cfcfcf",
                     labelBorderSize: "1px",
//添加结束
                     labelAlign: "${align}",
                     labelXOffset: "${xOffset}",
                     labelYOffset: "${yOffset}"


转载自:https://blog.csdn.net/lisai17/article/details/24030255

You may also like...