在OpenLayers中使用和百度地图一样的图标

商业地图中的图标

在高德地图、百度地图看到的图标都是十分好看的图标，然而如果通过图片生成的图标和我们预想中的效果始终有点差距，本文的目的是通过SVG的方式生成一种和谷歌地图图标十分相似的效果。

当然，除了可以直接设置png的文件url之外，也可以设置svg的文件url，但这并不是唯一的加载svg图标的方式。提供了直接使用图像对象来设置的方式，对应于ol.style.Icon构造函数中的img参数。

实现代码

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

  var anchor = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });

  // 构建svg的Image对象
  var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+    
'<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+
'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';

    var mysvg = new Image();
    mysvg.src = 'data:image/svg+xml,' + escape(svg);

  anchor.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      img: mysvg,    // 设置Image对象
      imgSize: [30, 30]    // 及图标大小
//          src: 'http://www.williambuck.com/portals/0/Skins/WilliamBuck2014/images/location-icon.svg',
//          size: [30, 30]
    })
  }));
  layer.getSource().addFeature(anchor);
</script>