openlayers中实现自定冒泡的效果

自定义的Openlayers.Popup.FreshCloud继承自Openlayers.Popup.Framed,实现了比较简洁的冒泡效果，详细代码如下

/**
* Class: OpenLayers.Popup.FramedCloud
* 
* Inherits from: 
*  - <OpenLayers.Popup.Framed>
*/
OpenLayers.Popup.FreshCloud =
  OpenLayers.Class(OpenLayers.Popup.Framed, {

      /** 
      * Property: contentDisplayClass
      * {String} The CSS class of the popup content div.
      */
      contentDisplayClass: "olFreshCloudPopupContent",

      /**
      * APIProperty: autoSize
      * {Boolean} Framed Cloud is autosizing by default.
      */
      autoSize: true,

      /**
      * APIProperty: panMapIfOutOfView
      * {Boolean} Framed Cloud does pan into view by default.
      */
      panMapIfOutOfView: true,

      /**
      * APIProperty: imageSize
      * {<OpenLayers.Size>}
      */
      imageSize: new OpenLayers.Size(1276, 736),

      /**
      * APIProperty: isAlphaImage
      * {Boolean} The FramedCloud does not use an alpha image (in honor of the 
      *     good ie6 folk out there)
      */
      isAlphaImage: false,

      /** 
      * APIProperty: fixedRelativePosition
      * {Boolean} The Framed Cloud popup works in just one fixed position.
      */
      fixedRelativePosition: false,

      /**
      * Property: positionBlocks
      * {Object} Hash of differen position blocks, keyed by relativePosition
      *     two-character code string (ie "tl", "tr", "bl", "br")
      */
      positionBlocks: {
          "tl": {
              'offset': new OpenLayers.Pixel(55, 0),
              'padding': new OpenLayers.Bounds(5, 35, 5, 5),
              'blocks': [
                { // top-left
                    size: new OpenLayers.Size('auto', 'auto'),
                    anchor: new OpenLayers.Bounds(0, 35, 5, 0),
                    position: new OpenLayers.Pixel(0, 0)
                },
                { //top-right
                    size: new OpenLayers.Size(5, 'auto'),
                    anchor: new OpenLayers.Bounds(null, 35, 0, 0),
                    position: new OpenLayers.Pixel(-1271, 0)
                },
                { //bottom-left
                    size: new OpenLayers.Size('auto', 5),
                    anchor: new OpenLayers.Bounds(0, 30, 5, null),
                    position: new OpenLayers.Pixel(0, -641)
                },
                { //bottom-right
                    size: new OpenLayers.Size(5, 5),
                    anchor: new OpenLayers.Bounds(null, 30, 0, null),
                    position: new OpenLayers.Pixel(-1271, -641)
                },
                { // stem
                    size: new OpenLayers.Size(42, 33),
                    anchor: new OpenLayers.Bounds(null, 0, 30, null),
                    position: new OpenLayers.Pixel(-5, -699)
                }
            ]
          },
          "tr": {
              'offset': new OpenLayers.Pixel(-50,0),
              'padding': new OpenLayers.Bounds(5, 35, 5, 5),
              'blocks': [
                { // top-left
                    size: new OpenLayers.Size('auto', 'auto'),
                    anchor: new OpenLayers.Bounds(0, 35, 5, 0),
                    position: new OpenLayers.Pixel(0, 0)
                },
                { //top-right
                    size: new OpenLayers.Size(5, 'auto'),
                    anchor: new OpenLayers.Bounds(null, 35, 0, 0),
                    position: new OpenLayers.Pixel(-1271, 0)
                },
                { //bottom-left
                    size: new OpenLayers.Size('auto', 5),
                    anchor: new OpenLayers.Bounds(0, 30, 5, null),
                    position: new OpenLayers.Pixel(0, -641)
                },
                { //bottom-right
                    size: new OpenLayers.Size(5, 5),
                    anchor: new OpenLayers.Bounds(null, 30, 0, null),
                    position: new OpenLayers.Pixel(-1271, -641)
                },
                { // stem
                    size: new OpenLayers.Size(42, 33),
                    anchor: new OpenLayers.Bounds(33, 0, null, null),
                    position: new OpenLayers.Pixel(-5, -699)
                }
            ]
          },
          "bl": {
              'offset': new OpenLayers.Pixel(52, 0),
              'padding': new OpenLayers.Bounds(4, 4, 4, 35),
              'blocks': [
                { // top-left
                    size: new OpenLayers.Size('auto', 'auto'),
                    anchor: new OpenLayers.Bounds(0, 5, 5, 30),
                    position: new OpenLayers.Pixel(0, 0)
                },
                { //top-right
                    size: new OpenLayers.Size(5, 'auto'),
                    anchor: new OpenLayers.Bounds(null, 5, 0, 30),
                    position: new OpenLayers.Pixel(-1271, 0)
                },
                { //bottom-left
                    size: new OpenLayers.Size('auto', 5),
                    anchor: new OpenLayers.Bounds(0, 0, 5, null),
                    position: new OpenLayers.Pixel(0, -641)
                },
                { //bottom-right
                    size: new OpenLayers.Size(5, 5),
                    anchor: new OpenLayers.Bounds(null, 0, 0, null),
                    position: new OpenLayers.Pixel(-1271, -641)
                },
                { // stem
                    size: new OpenLayers.Size(42, 32),
                    anchor: new OpenLayers.Bounds(null, null, 30, 2),
                    position: new OpenLayers.Pixel(-52, -697)
                }
            ]
          },
          "br": {
              'offset': new OpenLayers.Pixel(-50, 5),
              'padding': new OpenLayers.Bounds(5, 5, 0, 35),
              'blocks': [
                { // top-left
                    size: new OpenLayers.Size('auto', 'auto'),
                    anchor: new OpenLayers.Bounds(0, 5, 5, 30),
                    position: new OpenLayers.Pixel(0, 0)
                },
                { //top-right
                    size: new OpenLayers.Size(5, 'auto'),
                    anchor: new OpenLayers.Bounds(null, 5, 0, 30),
                    position: new OpenLayers.Pixel(-1271, 0)
                },
                { //bottom-left
                    size: new OpenLayers.Size('auto', 5),
                    anchor: new OpenLayers.Bounds(0, 0, 5, null),
                    position: new OpenLayers.Pixel(0, -641)
                },
                { //bottom-right
                    size: new OpenLayers.Size(5, 5),
                    anchor: new OpenLayers.Bounds(null, 0, 0, null),
                    position: new OpenLayers.Pixel(-1275, -641)
                },
                { // stem
                    size: new OpenLayers.Size(42, 32),
                    anchor: new OpenLayers.Bounds(30, null, null, 2),
                    position: new OpenLayers.Pixel(-52, -697)
                }
            ]
          }
      },

      /**
      * APIProperty: minSize
      * {<OpenLayers.Size>}
      */
      minSize: new OpenLayers.Size(105, 10),

      /**
      * APIProperty: maxSize
      * {<OpenLayers.Size>}
      */
      maxSize: new OpenLayers.Size(1200, 660),

      /** 
      * Constructor: OpenLayers.Popup.FramedCloud
      * 
      * Parameters:
      * id - {String}
      * lonlat - {<OpenLayers.LonLat>}
      * contentSize - {<OpenLayers.Size>}
      * contentHTML - {String}
      * anchor - {Object} Object to which we'll anchor the popup. Must expose 
      *     a 'size' (<OpenLayers.Size>) and 'offset' (<OpenLayers.Pixel>) 
      *     (Note that this is generally an <OpenLayers.Icon>).
      * closeBox - {Boolean}
      * closeBoxCallback - {Function} Function to be called on closeBox click.
      */
      initialize: function (id, lonlat, contentSize, contentHTML, anchor, closeBox,
                        closeBoxCallback) {

          this.imageSrc = OpenLayers.Util.getImageLocation('fresh-popup-relative.gif');
          OpenLayers.Popup.Framed.prototype.initialize.apply(this, arguments);
          this.contentDiv.className = this.contentDisplayClass;
      },

      CLASS_NAME: "OpenLayers.Popup.FreshCloud"

  }); 

 

 JS文件地址：https://files.cnblogs.com/wanfeng/FreshCloud.js

图片地址： https://files.cnblogs.com/wanfeng/fresh-popup-relative.gif