openlayers学习之Overlay实现点标记+点标注(三)

一、设置点标记dom对象和样式

首先在css文件中设置点标记的样式，然后再html文件中设置点标记的dom对象。

#marker{
    width: 20px;
    height: 20px;
    border: 1px solid #088;
    border-radius: 10px;
    background-color: #0ff;
    opacity: 0.8;
}
<div id="marker" title="点标记"></div>

二、设置标注的样式

在css文件中设置点标注的样式，然后再html文件中设置点标注的dom对象。

#labelText{
    text-decoration: none;
    color: yellow;
    font-size: 11pt;
    font-weight: bold;
}
<div id="labelText" title="点标注">别点我</div>

三、定义Overlay

定义一个点标记Overlay和一个点标注Overlay，并叠加在地图上。

var pointOverlay = new ol.Overlay({
    position: [40532830.52029891, 3998082.7149029886],					//经纬度坐标需要转
    positioning: "center-center",						//设置该坐标点在标记图形中心上
    element: document.getElementById("marker"),
    stopEvent: false

});
map.addOverlay(pointOverlay);

var labelOverlay=new ol.Overlay({
    position: [40532830.52029891, 3998082.7149029886],
    element: document.getElementById("labelText")
});
map.addOverlay(labelOverlay);

最终结果如下：