OpenLayers - 創(chuàng)建多邊形Polygon

OpenLayers版本：4.6.4

叨叨：

本來這不應(yīng)該成為一個(gè)問題，也不值得專門寫一篇文章，尤其是對一個(gè)已經(jīng)用過各種MapAPI（Google、百度、高德、SmartEarth...）的人來說，但就是這個(gè)本來以為3分鐘解決的問題我卻用了至少30分鐘才把坑填完，最后發(fā)現(xiàn)OpenLayers的好多設(shè)計(jì)理念、思路都和之前用過的API大不相同。

需求：

需求很簡單，其實(shí)就是用代碼把一串經(jīng)緯度坐標(biāo)表示的Polygon添加在Map上，注意這里不是創(chuàng)建地圖交互工具來用鼠標(biāo)畫Polygon，也不是用GeoJSON或WKT作為數(shù)據(jù)源，而是用代碼手動實(shí)現(xiàn)，因?yàn)楹笳逴L官網(wǎng)都有示例，前者我并沒有找到（可能是因?yàn)槲矣⑽奶珷€，如果哪位發(fā)現(xiàn)有這樣的示例請告訴我）

正題：

我先把最后的代碼貼出來，再來分析我踩的那些坑

<script>
    var map = OLU.createBaseMap('mapDiv');
    var polygon = new ol.geom.Polygon([[[110, 39], [116, 39], [116, 33], [110, 33], [110, 39]]]);
    polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
    var feature = new ol.Feature(polygon);

    var vectorSource = new ol.source.Vector();
    vectorSource.addFeature(feature);

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);
</script>

創(chuàng)建Map的過程我封裝了一下，基本是最簡化的配置，沒什么特殊的
坑1：Polygon的構(gòu)造函數(shù)，按照過往經(jīng)驗(yàn)給一個(gè)Point的數(shù)組就好了，但是在OL中是一個(gè)Point的數(shù)組的數(shù)組，這還好，最起碼在API中能看到，最坑的就是下面的坑；
坑2：一定要做坐標(biāo)轉(zhuǎn)換，其實(shí)折騰了半天我就是缺這一句代碼，至于投影坐標(biāo)系這些東西我還暈著呢，大家自己悟吧。

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

最后要把polygon顯示出來需要這樣一個(gè)流程：
polygon封裝到Feature --> feature添加到source --> 通過source創(chuàng)建vector layer --> 把layer添加到map上。
這就是為什么我開始說OL在設(shè)計(jì)理念上和之前接觸的大不相同，之前的大部分API直接通過map.addxxx 函數(shù)就可以添加覆蓋物，也許要用OL就得把之前自己想當(dāng)然的那些經(jīng)驗(yàn)都扔掉。