自定义控件

有了前面的基础介绍，自定义控件就变得相对简单了，共分为两个步骤，第一步是构建界面，第二步是用代码实现功能。 下面自定义了一个分享当前地图的功能：

对应的代码如下：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在viewport节点下添加一个分享按钮
    var viewport = map.getViewport();
    $(viewport).append('<div id="share" class="share">分享地图</div>');

    // 监听按钮点击事件，执行相关操作
    document.getElementById('share').onclick = function() {
        alert('分享当前地图给朋友');
    }
</script>

结合注释理解代码，对于分享按钮的外观都是由css来定义：

.share {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px;
    border-color: #333;
    background-color: #339999;
    color: #fff;
    box-shadow: 0px 0px 2px #666;
    cursor: pointer;
    padding: 0 4px 0 4px;
}

由此可见，自定义控件也是一件非常简单的事。