前言

openlayers4 官網(wǎng)的 api 文檔介紹地址 openlayers4 api，里面詳細(xì)的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網(wǎng)在線例子，這個也是學(xué)習(xí) openlayers4 的好素材。

openlayers4 入門開發(fā)系列的地圖服務(wù)基于 Geoserver 發(fā)布的，關(guān)于 Geoserver 方面操作的博客，可以參考以下幾篇文章：

• geoserver 安裝部署步驟
• geoserver 發(fā)布地圖服務(wù) WMS
• geoserver 發(fā)布地圖服務(wù) WMTS
• geoserver 集成以及部署 arcgis server 瓦片數(shù)據(jù)

本篇的重點(diǎn)內(nèi)容是利用 openlayers4 實(shí)現(xiàn)風(fēng)場圖功能，效果圖如下：

image

實(shí)現(xiàn)思路

• 界面設(shè)計(jì)

//風(fēng)場圖
"<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;'>風(fēng)場圖</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;">風(fēng)場圖</label>' +
'</div>'

• 點(diǎn)擊事件

//風(fēng)場圖
$("#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);
        //加載風(fēng)場數(shù)據(jù)
        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();
    }

}

• 核心代碼

/*!
 * author: FDD <smileFDD@gmail.com> 
 * wind-layer v0.0.4
 * build-time: 2018-2-6 17:34
 * LICENSE: MIT
 * (c) 2017-2018 https://sakitam-fdd.github.io/wind-layer
 */
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('openlayers')) :
    typeof define === 'function' && define.amd ? define(['openlayers'], factory) :
    (global.WindLayer = factory(global.ol));
}(this, (function (ol) { 'use strict';

ol = ol && ol.hasOwnProperty('default') ? ol['default'] : ol;

var Windy = function Windy(params) {
  var VELOCITY_SCALE = 0.005 * (Math.pow(window.devicePixelRatio, 1 / 3) || 1);
  var MIN_TEMPERATURE_K = 261.15;
  var MAX_TEMPERATURE_K = 317.15;
  var MAX_PARTICLE_AGE = 90;
  var PARTICLE_LINE_WIDTH = 1;
  var PARTICLE_MULTIPLIER = 1 / 200;
  var PARTICLE_REDUCTION = Math.pow(window.devicePixelRatio, 1 / 3) || 1.6;
  var FRAME_RATE = 15,
      FRAME_TIME = 1000 / FRAME_RATE;

  var NULL_WIND_VECTOR = [NaN, NaN, null];

  var builder;
  var grid;
  var date;
  var λ0, φ0, Δλ, Δφ, ni, nj;

更多的詳情見：GIS之家小專欄
對本專欄感興趣的話，可以關(guān)注一波

GIS之家作品：GIS之家
GIS之家源碼咨詢：咨詢模式