将自定义 div 标签插入 openlayers

Question

我目前正在使用 Openlayers2 开发地图。这张地图要显示几个信息

我已经使用

成功整合了图像和 canvas

OpenLayers.Layer.Vector -> 对于基本图像和矢量
OpenLayers.StyleMap 和 OpenLayers.Style -> 对于 canvas 和文本

我现在需要插入几个框，整合文本。

方框必须适应文本，每个方框都有不同的长度。

我现在想插入 自定义的 HTML 标签，例如 div，而不是 canvas（难以适应和处理起来很重）

信息整合自json:

Example of Json

{
   
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    589200.0,
                   2402900.0
               ]
           },
            "properties": {
                "activation": "true",
                "info": "one for example short text"
    
            }
      }, {
            "type": "Feature",
            "geometry": {
               "type": "Point",
               "coordinates": [
                   603700.0,
                 2408300.0
              ]
           },
          "properties": {
             "activation": "true",
              "info": My other very long text \n with lines \r different messages and so on\n and it has to fit in.."
    
          }
       }]
  }

这是一个遗留地图，我们被困在 Openlayer 2 上，所以解决方案不会是版本 3。

我拼命地在网上搜索适合的解决方案，但没有成功，但我正在为此浪费宝贵的时间。

信息是这样加载的：

new OpenLayers.Layer.Vector("Vector", {
            layername: "myText",
            resolutions: [100, 50, 25, 10],
            styleMap: textStyleMap,
            isBaseLayer: false,
            visibility: false,
            strategies: [new OpenLayers.Strategy.Fixed({
                preload: true
            })],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "myText.json",
                format: new OpenLayers.Format.GeoJSON()
            })
        })

我可以使用什么样的 styleMap？有没有人解决这个问题？

谢谢！

Answer 1

我终于用可拖动的弹出窗口跳过了这个问题。

您可以在此处找到更新：

http://aamirafridi.com/openlayers/openlayers-draggable-popups.

将自定义 div 标签插入 openlayers

insert custom div tags into openlayers

html

class

layer

openlayers