OL4中添加图标的两种方式的比较

前言：在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参数必须需要设置，该方式设置图标不会造成偏移的问题，弥补上面的方式，在数据量较大的时候，如果不是很大就不太会卡。

OL4中添加图标的两种方式的比较

猜你喜欢