openlayers4 入门开发系列之风场图篇
前言
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="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();
} }
- 核心代码
/*!
* 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; 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之家小专栏
对本专栏感兴趣的话,可以关注一波
openlayers4 入门开发系列之风场图篇的更多相关文章
- openlayers4 入门开发系列之热力图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之小区信号扇形图篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之台风轨迹篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之船讯篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之聚合图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图模态层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之迁徙图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图标绘篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- Python_字符串连接
#join() 与split()相反,join()方法用来将列表中多个字符串进行连接,并在相邻两个字符串之间插入指定字符 li=['apple','peach','banana','pear'] se ...
- 【原】fetch跨域请求附带cookie(credentials)
HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍" ...
- jenkins+gitlab自动化编译部署方案探索及服务端编译webpack实战
一. 背景 之前我们的开发流程为在本地进行webpack打包编译,然后svn提交源代码和编译后的代码.同时每次提交前也会从svn更新源代码和编译后的代码.这样做有几个缺点: 1. svn 更新和提交编 ...
- CS224n笔记0
我准备跟随码农场hankcs大神的脚步,学习一下斯坦福的CS224n课程. 关于该课程的简介,hankcs大神已经写得很清楚了.
- Git常用命令解说
http://blog.csdn.net/hangyuanbiyesheng/article/details/6731629 1. Git概念 1.1. Git库中由三部分组成 Gi ...
- app后端设计(11)-- 系统架构(2014.12.05更新)
个人认为,在小型的创业团队中,特别是以应用产品为主,在架构后台的时候,需要集中精力解决自身业务上的问题,不是花时间解决第三方已经解决的问题,简单点来说,就是能用第三方服务就使用第三方的服务.基于这个原 ...
- persistent_storage_worker.go
package) ) :length],) ) :length]) } func (engine *Engine) persistentStorageInitWorker(shard int) { ...
- server.go 源码阅读
; i < conn.retries(); i++ { r.conf.addr = conn.addr() listener, err = net.Listen( ...
- 连续查询(Continuous Queries)
当数据超过保存策略里指定的时间之后,就会被删除.如果我们不想完全删除掉,比如做一个数据统计采样:把原先每秒的数据,存为每小时的数据,让数据占用的空间大大减少(以降低精度为代价). 这就需要Influx ...
- Python Django 2.1登录功能_1
#在上篇的基础上进行#在.../sign/templates/index.html文件,开发登录表单 <html> <head> <title>Django Pag ...