openlayers入門開發系列之風場圖篇
阿新 • • 發佈:2019-01-20
class orm bind margin ets style gfs layer white
本篇的重點內容是利用openlayers實現風場圖功能,效果圖如下:
實現思路
- 界面設計
//風場圖 "<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="windLayer" style="padding:5px;float: left;">‘ + ‘<input type="checkbox" name="windlayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>‘ + ‘<label style="font-weight: normal;vertical-align: middle;margin: auto;">風場圖</label>‘ + ‘</div>‘
- 點擊事件
//風場圖 $("#windLayer input").bind("click", function () { if (this.checked) { var layer = bmap.getMapConfig().getShareLayer("GISSERVER_Wind"); bxmap.olWindLayer.Init(bmap); if(layer){ layer.setVisible(true); } //圖例面板顯示 $("#map_tl").css("display","block"); $("#map_tl>img").attr(‘src‘, getRootPath() +"js/main/olWindLayer/windLegend.jpg"); $("#map_tl>img").css("width","auto"); $("#map_tl>img").css("height","300px"); }else { var layer = bmap.getMapConfig().getShareLayer("GISSERVER_Wind"); bxmap.olWindLayer.clearWind(); if(layer){ layer.setVisible(false); } //圖例面板隱藏 $("#map_tl").hide(); } })
- 初始化代碼
var bxmap = bxmap || {}; bxmap.olWindLayer = { map:null, wind:null, Init:function(bmap){ this.map = bmap.getMap(); this.map.getView().setCenter([13501836.676, 2751733.018]); this.map.getView().setZoom(3); //加載風場數據 var wind, data; axios.get(getRootPath() +"js/main/olWindLayer/gfs.json").then(function (res) { if (res.data) { data = res.data wind = bxmap.olWindLayer.wind = new WindLayer(data, { projection: ‘EPSG:3857‘, ratio: 1 }) wind.appendTo(bxmap.olWindLayer.map) } }); }, clearWind:function(){ if(bxmap.olWindLayer.wind) bxmap.olWindLayer.wind.clearWind(); } }
openlayers入門開發系列之風場圖篇