openlayers4 官網的 api 文檔介紹地址 openlayers4 api，里面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網在線例子，這個也是學習 openlayers4 的好素材。
openlayers4 入門開發系列的地圖服務基于 Geoserver 發布的，關于 Geoserver 方面操作的博客，可以參考以下幾篇文章：
本篇的重點內容是利用 openlayers4 實現臺風軌跡功能，效果圖如下：
//臺風"<div style='height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;'>" +"<span style='margin-left:5px;font-size: 13px;color:white;'>臺風</span>" +"</div>" +'<div id="typhoonLayer" style="padding:5px;float: left;">' +'<input type="checkbox" name="typhoonlayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +'<label style="font-weight: normal;vertical-align: middle;margin: auto;">臺風</label>' +'</div>'
//臺風$("#typhoonLayer input").bind("click", function () {if (this.checked) {listDialog = new bxmap.TyphoonListDialog();listDialog.setTyphoonMap(bmap);listDialog.show();var map = bmap.getMap();map.getView().setCenter([13286590.004642466, 2562780.6843453925]);map.getView().setZoom(6);//圖例面板顯示$("#map_tl").css("display","block");$("#map_tl>img").attr('src', GLOBAL.domainResource+"/Content/img/typhoonLegend.png");$("#map_tl>img").css("width","auto");$("#map_tl>img").css("height","350px");}else {if(listDialog){listDialog.close();}//圖例面板隱藏$("#map_tl").hide();}})
/*** @description 初始化圖層* @param bmap* @private*/bxmap.Typhoon.prototype._initializeLayers = function () {//24小時48小時警戒線this.picketLineLayer = new bxmap.layer.Vector({source: new ol.source.Vector()});//臺風實際路線節點this.realNodesLayer = new bxmap.layer.Vector({source: new ol.source.Vector(),property: "symbol",style: null,context: function (feature) {return feature["symbol"];}});var symbolizer = new bxmap.symbol.UniqueValueSymbolizer();var styles = this.styles;symbolizer.addRule({ruleName: "default", styles: styles["TyphoonNodes_Unselected"]});symbolizer.addRule({ruleName: "selected", styles: styles["TyphoonNodes_Selected"]});symbolizer.addRule({ruleName: "unselected", styles: styles["TyphoonNodes_Unselected"]});this.realNodesLayer.setSymbolizer(symbolizer); //臺風預測路線節點this.forecastNodesLayer = new bxmap.layer.Vector({source: new ol.source.Vector(),property: "symbol",style: null,context: function (feature) {return feature["symbol"];}});symbolizer = new bxmap.symbol.UniqueValueSymbolizer();symbolizer.addRule({ruleName: "default", styles: styles["TyphoonNodes_Unselected"]});symbolizer.addRule({ruleName: "selected", styles: styles["TyphoonNodes_Selected"]});symbolizer.addRule({ruleName: "unselected", styles: styles["TyphoonNodes_Unselected"]});this.forecastNodesLayer.setSymbolizer(symbolizer); //其他數據this.resourceLayer = new bxmap.layer.Vector({source: new ol.source.Vector()});}
/*** @description 創建樣式* @return {JSON}*/bxmap.Typhoon.prototype.createStyles = function () {var output = {};//臺風節點output["TyphoonNodes_Unselected"] = {"熱帶低壓": new ol.style.Style({image: new ol.style.Icon({opacity: 0.8, scale: 0.8, src: bxmap.Resource.TyphoonPngRddy})}),"熱帶風暴": new ol.style.Style({image: new ol.style.Icon({opacity: 0.8, scale: 0.8, src: bxmap.Resource.TyphoonPngRdfb})}),"強熱帶風暴": new ol.style.Style({image: new ol.style.Icon({opacity: 0.8, scale: 0.8, src: bxmap.Resource.TyphoonPngQrdfb})}),"臺風": new ol.style.Style({image: new ol.style.Icon({opacity: 0.8, scale: 0.8, src: bxmap.Resource.TyphoonPngTf})}),"強臺風": new ol.style.Style({image: new ol.style.Icon({opacity: 0.8, scale: 0.8, src: bxmap.Resource.TyphoonPngQtf})}),"超強臺風": new ol.style.Style({image: new ol.style.Icon({opacity: 0.8, scale: 0.8, src: bxmap.Resource.TyphoonPngCqtf})})};output["TyphoonNodes_Selected"] = {"熱帶低壓": new ol.style.Style({image: new ol.style.Icon({opacity: 1, scale: 1, src: bxmap.Resource.TyphoonPngRddy})}),"熱帶風暴": new ol.style.Style({image: new ol.style.Icon({opacity: 1, scale: 1, src: bxmap.Resource.TyphoonPngRdfb})}),"強熱帶風暴": new ol.style.Style({image: new ol.style.Icon({opacity: 1, scale: 1, src: bxmap.Resource.TyphoonPngQrdfb})}),"臺風": new ol.style.Style({image: new ol.style.Icon({opacity: 1, scale: 1, src: bxmap.Resource.TyphoonPngTf})}),"強臺風": new ol.style.Style({image: new ol.style.Icon({opacity: 1, scale: 1, src: bxmap.Resource.TyphoonPngQtf})}),"超強臺風": new ol.style.Style({image: new ol.style.Icon({opacity: 1, scale: 1, src: bxmap.Resource.TyphoonPngCqtf})})};return output;}
更多的詳情見：GIS之家小專欄
對本專欄感興趣的話，可以關注一波
