Openlayers 4入門開発シリーズの風場図編

前言

Openlayers 4公式サイトのapiドキュメント紹介アドレスopenlayers 4 api、openlayers 4の各クラスの紹介、そしてオンライン例:openlayers 4公式サイトのオンライン例、これもopenlayers 4を学ぶ良い素材です.
Openlayers 4入門開発シリーズの地図サービスはGeoserverが発表した、Geoserver側の操作に関するブログに基づいて、以下のいくつかの記事を参照することができます.

geoserverインストール導入手順

geoserver地図サービスWMS

をリリース

geoserver地図サービスWMTS

をリリース

geoserver arcgis serverタイルデータ

の統合と導入
本編の重点内容はopenlayers 4を利用して風場図機能を実現し、効果図は以下の通りである.

実現構想.

インタフェース設計

// 
"
" +
" " +
"
" +
'
' +
'' +
' ' +
'
'

クリックイベント

// 
$("#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();
}
 
}

コアコード

/*!
* author: FDD 
* 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;
 
var bilinearInterpolateVector = function bilinearInterpolateVector(x, y, g00, g10, g01, g11) {
var rx = 1 - x;
var ry = 1 - y;
var a = rx * ry,
b = x * ry,
c = rx * y,
d = x * y;
var u = g00[0] * a + g10[0] * b + g01[0] * c + g11[0] * d;
var v = g00[1] * a + g10[1] * b + g01[1] * c + g11[1] * d;
var tmp = g00[2] * a + g10[2] * b + g01[2] * c + g11[2] * d;
return [u, v, tmp];
};
……

詳細については、GISの家小欄を参照してください.
このコラムに興味があれば、注目してみてください.
転載先:https://www.cnblogs.com/giserhome/p/10294661.html