OpenLayers-在标记的矢量要素周围绘制一个框

Question

After endless searching, I've hit a wall. I have an OpenLayers map that uses many labels. My two options are to use the Popup Class or a labeled Vector Feature. I have tried using the Popup class, but it is extremely heavy on the DOM accounting for approximately 75% of the CPU load when updating the layer (verified with Chrome Developer CPU Profiling). After switching from popups to vector features with a label, all the processor weight came off the DOM and now everything runs smoothly. The only problem though, is I can't get a solid colored box behind the label.

The label renders inside a text and tspan svg element. From what I have read, there is no way to use the attributes of text or tspan to specify a backcolor property. This is an endless search. I could add a rect around the text element using getBBox, but OpenLayers manages the tspan element and manipulating that alongside OpenLayers seems impossible.

Next, I was thinking that I could add a labeled vector feature that was a rectangle. Here though, there is no way to draw the rectangle at the exact size of the label and behind it. Maybe this just isn't possible. Hopefully one of you know a solution. Thanks.

Answer 1

I figured it out. Once I spent some time looking at OpenLayers on GitHub, I figured it out looking at the Popup class. First, autosize must be set to false and the size property must be set in addition to the contentsize. Since the contentsize is part of the constructor, you must explicitly set the popup.size after initialization. This will prevent the setSize() method from executing, which will cut the load by about 50%. Then, I went and modified the class and removed the huge amount of event handlers. These two methods reduced the CPU load by about 50-75%.