前言
本篇的重点内容是利用 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; }
|
|