前言：在ol中我們也可以新增一些圖示在地圖上，用於展示效果，較早期的版本OL提供一個overlay覆蓋物的方式，在OL3和OL4中這種用法不太多了，一個主要的原因它是通過HTML的方式的新增到地圖上，這種方式有一個很大的問題就是偏移，隨著你放大或者縮小可以看到圖示的位置明顯偏移。主要的問題是overlay（覆蓋物）主要以HTML的方式疊加到地圖上。

一、overlay（覆蓋物）

1.demo示例：

<div id="anchor"><img src="../img/anchor.png" alt="示例"/></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({
      projection: 'EPSG:4326',
      center: [104, 30],
      zoom: 10
    })
  });

  // 下面把上面的圖示附加到地圖上，需要一個ol.Overlay
  var anchor = new ol.Overlay({
    element: document.getElementById('anchor')
  });
  // 關鍵的一點，需要設定附加到地圖上的位置
  anchor.setPosition([104, 30]);
  // 然後新增到map上
  map.addOverlay(anchor);
</script>
 

這種方式載入到地圖上還有一個問題就是，資料量大的時候會造成頁面的卡頓，偏移問題非常嚴重，觀感效果很差。

二、ol.style.Icon（樣式圖示設定）

1.demo示例

        var createLineStyle = function (textA) {           
            var canvas = document.createElement('canvas');
            canvas.width = 80;
            canvas.height = 20;
            var ctx = canvas.getContext("2d");
            ctx.lineWidth = 2;
            ctx.strokeStyle = "red";
            ctx.beginPath(); //新建一條path                             
            ctx.moveTo(0, 0); 
            ctx.lineTo(textA.length*30,0);         
            //畫線
            ctx.stroke();
            //封閉路徑
            ctx.closePath();
            var lineStyle = new ol.style.Style({
                image: new ol.style.Icon({
                    img: canvas,
                    imgSize: [canvas.width, canvas.height],
                    rotation: 180 * Math.PI/180
                })
            });       
            return lineStyle;
        }
 

這種方式通過Feature + Style，在ol.style.Icon引數中img引數和imgSize引數連用，imgSize引數必須需要設定，該方式設定圖示不會造成偏移的問題，彌補上面的方式，在資料量較大的時候，如果不是很大就不太會卡。