openlayers三：添加图片和图标

openlayers添加图片是指：

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

而添加图标是指：

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

添加图片：

　　首先初始化图片图层：

1     initImageLayer: function (extent) {
2         this.imageLayer = new ol.layer.Image({
3             // source: this.imageSource
4         })
5         this.map.addLayer(this.imageLayer);
6     },

　　然后添加图片：

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

 

添加图标：

　　通过point feature来添加图标

 1 addIcon: function (lonlat, tip) {
 2         var point = new ol.geom.Point(ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857'));
 3         var pointFeature = new ol.Feature(point);
 4         pointFeature.setStyle(
 5             new ol.style.Style({
 6                 image: new ol.style.Icon({
 7                     anchor: [0.5, 0.5],
 8                     crossOrigin: 'anonymous',
 9                     src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
10                 }),
11                 text: new ol.style.Text({
12                     text: tip,
13                     scale: 1.3,
14                     fill: new ol.style.Fill({
15                       color: '#000000'
16                     }),
17                     stroke: new ol.style.Stroke({
18                       color: '#FFFF99',
19                       width: 3.5
20                     })
21                 })
22             })
23         );
24         this.vectorSource.addFeature(pointFeature);
25     },

最后效果如图：

整体代码：

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

转载于:https://www.cnblogs.com/venjin/p/9180267.html