openlayers-ol3 Popup 样式

popup主体加个圆角和阴影： border-radius: 1.2em 1.2em 1.2em 1.2em; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); popup的那个小箭头：矩形旋转45度，使用transform: rotate(45deg)来实现。另外针对不同的浏览器还需要添加不同的hack，例如Opera的-o-transform、Firefox的-moz-transform。 具体效果如下：  实现的过程如下：

1. 我在OpenLayers.Popup.Framed基础上另写了一个类如下：

 

2. 然后是css样式：

.olPopupContent {
    overflow: visible !important;
    padding: 0 !important;
}
.olPopup {
    z-index: 1005 !important;
}
.olwidgetPopupContent {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 1.2em 1.2em 1.2em 1.2em;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
    overflow: auto;
    padding: 10px 8px 8px;
}
.olwidgetPopupCloseBox {
    background: url("img/popup_icons.png") no-repeat scroll -80px 0 #FFFFFF;
    cursor: pointer;
    height: 0;
    overflow: hidden;
    padding-top: 16px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
}
.olwidgetPopupCloseBox:hover {
    background-position: -64px 0;
}
.olwidgetPopupStemTL,.olwidgetPopupStemTR {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none repeat scroll 0 0 #FFFFFF;
    z-index: 1;
}

.olwidgetPopupStemBL,.olwidgetPopupStemBR {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none repeat scroll 0 0 #FFFFFF;
    z-index: 1;
}

使用方法和OL自带的一样：

function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.CSSFramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "
Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"
",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }

 源码：https://github.com/shitao1988/OL_CSSPopups  在线示例：http://www.fenglgis.com/github/OL_CSSPopups/select-feature-openpopup.html