OpenLayers绘制多边形踩坑记录

初始化地图使用的EPSG是4326，看了这篇文章
https://blog.51cto.com/13802307/2295958
按照他的代码绘制多边形始终没画出来，
然后我发现这段代码
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
这个段代码的大概的意思就是将4326的坐标转换城3857墨卡托投影坐标系在地图上展示，那么问题来了，我初始化的时候是使用4326，恰巧这段代码把坐标给转成3857了，所以没绘制出来。
总结：
初始化地图使用的如果是4326地理坐标系，那么在坐标转换时候也要转换成相应的坐标系。
要点：
Openlayers地图初始化默认是3857，也可以指定城4326。当改变默认坐标系时在绘制图形是一定要对坐标进行转换
具体代码如下：

        var style = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#000',
                width: 3,
            }),
            fill: new ol.style.Fill({
                color: '#ff5722',
            }),
        })
        var polygonStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#00bcd4',
                width: 3,
            }),
            fill: new ol.style.Fill({
                color: '#ff5722',
            }),
        })
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: './src/data/countries.geojson',
                format: new ol.format.GeoJSON(),
            }),
            style: [style]
        });

        var map = new ol.Map({
            layers: [vectorLayer],
            target: 'map',
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.11, 22.71],
                zoom: 0,
            }),
        });

        var polygon = new ol.geom.Polygon([[[114.11, 22.71], [117.11, 22.71], [117.11, 22.01], [114.11, 22.01], [114.11, 22.71]]]);

        polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:4326'));

        var polygonFeature = new ol.Feature(polygon);

        var polygonSource = new ol.source.Vector();

        polygonSource.addFeature(polygonFeature);

        var polygonLayer = new ol.layer.Vector({
            source: polygonSource,
            style: [polygonStyle]
        });
        map.addLayer(polygonLayer);
        map.on('click', function (evt) {
            console.log(evt)
        })