openlayers三：添加图片和图标

openlayers添加图片是指：

　　添加在地图上的图片会跟随地图同步放大缩小

而添加图标是指：

　　添加在地图上的图片不会跟随地图同步放大缩小

添加图片：

　　首先初始化图片图层：

     initImageLayer: function (extent) {
         this.imageLayer = new ol.layer.Image({
             // source: this.imageSource
         })
         this.map.addLayer(this.imageLayer);
     },

　　然后添加图片：

     addImage: function (extent, url) {
         var imageExtent = extent;//左下角右上角[113, 30.2, 115, 32.2]
         this.imageSource = new ol.source.ImageStatic({
             url: url,
             projection: 'EPSG:3857',
             imageExtent: ol.proj.transformExtent(imageExtent, 'EPSG:4326', 'EPSG:3857')
         })
         this.imageLayer.setSource(this.imageSource);
     }

添加图标：

　　通过point feature来添加图标

 addIcon: function (lonlat, tip) {
         var point = new ol.geom.Point(ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857'));
         var pointFeature = new ol.Feature(point);
         pointFeature.setStyle(
             new ol.style.Style({
                 image: new ol.style.Icon({
                     anchor: [0.5, 0.5],
                     crossOrigin: 'anonymous',
                     src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
                 }),
                 text: new ol.style.Text({
                     text: tip,
                     scale: 1.3,
                     fill: new ol.style.Fill({
                       color: '#000000'
                     }),
                     stroke: new ol.style.Stroke({
                       color: '#FFFF99',
                       width: 3.5
                     })
                 })
             })
         );
         this.vectorSource.addFeature(pointFeature);
     },

最后效果如图：

整体代码：

链接: https://pan.baidu.com/s/1_kWPLJuTCOzVEx3Ci1eITA 密码: udxf