Openlayers 添加照片缩略图到地图上

** 遇到这样一个问题，在地图上添加大小相等的照片缩略图标注，由于每张照片的大小不一致，所以使用ol.style.Icon的scale是不行的。然后是用画布的方式，先在caves上画出来，再添加到地图上，代码如下：**

   VectorLayer = new ol.layer.Vector({
            id: 'VectorLayer',
            type: 'DrawLayer',
            source: vectorSource,
            style: function (feat) {
                var imageSrc = feat.get('info').URL === null || feat.get('info').URL === '' ? '../../image/map/symbol2.png' : ImageUrl + feat.get('info').URL;
                var newCaves=document.createElement('canvas');
                var cxt=newCaves.getContext("2d");
                var img=new Image();
                img.src=imageSrc;
                cxt.drawImage(img,40,40);

                return new ol.style.Style({
                    image: new ol.style.Icon({
                        src: img,
                        crossOrigin: 'anonymous',
                        anchor: [0.5, 0.5],
                        //scale: 0.01 ,
                        imgSize: [40, 40],
                    })
                })
            },
            zIndex: 99
        })

但是会发现，每次刷新地图都没有将照片的缩略图加载完全，检查后得知drawImage方法是异步特性…(’_’),应此改为后台处理，在添加数据时保存上图片的缩略图

Image thumbnailImage = Image.FromFile(path + "\\" + name);
                    int width = 40;
                    int height = 40;
                    thumbnailImage = thumbnailImage.GetThumbnailImage(width, height, null, IntPtr.Zero);
                    thumbnailImage.Save(path + "\\" + "thumb_" + name);

######(path是图片路径，name是图片名称)######