憤怒的小Ming

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     }

 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     },