前言

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="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;
}

更多的详情见GIS之家小专栏

对本专栏感兴趣的话,可以关注一波

openlayers4 入门开发系列之台风轨迹篇的更多相关文章

  1. openlayers4 入门开发系列之船讯篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  2. openlayers4 入门开发系列之聚合图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  3. openlayers4 入门开发系列之迁徙图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. openlayers4 入门开发系列之地图切换篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. openlayers4 入门开发系列之小区信号扇形图篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之风场图篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. Python_异常处理结构与调试

    while True: x =input('Pleaes input:') try: x=int(x) print('You have input {0}'.format(x)) break exce ...

  2. github routine

    1. 从官方库fork 自己的分支库后,git clone到local. 2. local的remotes/origin默认是自己的分支库.可以添加remotes/upstream指向官方库. 3. ...

  3. Python《学习手册:第二章-习题》

    什么是Python解释器? Python解释器是运行Python程序的程序. 什么是源代码? 源代码是为程序所写的语句:它包括文本文件(通常以.py为文件名结尾)的文件. 什么是字节码? 字节码是Py ...

  4. 进阶-MongoDB 知识梳理

    MongoDB 一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mo ...

  5. Linux Vim配置

    用过很多vim配置的版本,怎么说,想轻量级就不要胡加乱七八糟的功能:如果不在乎反应是不是快速,侧重功能是否强大,可以参考vim大神的配置策略(spf13-vim)https://github.com/ ...

  6. Mybatis配置文件SqlMapConfig.xml中的标签

    SqlMapConfig.xml配置文件中的属性 1 配置内容 properties(属性) settings(全局配置参数) typeAliases(类型别名) typeHandlers(类型处理器 ...

  7. OpenStack架构详解

    OpenStack提供开放源码软件,建立公共和私有云. OpenStack是一个社区和一个项目,以及开放源码软件,以帮助企业运行的虚拟计算或者存储云. OpenStackd开源项目由社区维护,包括Op ...

  8. Visual Studio的常用快捷键

    项目相关的快捷键 Ctrl + Shift + B   生成项目 Ctrl + Alt + L   显示Solution Explorer(解决方案资源管理器) Shift + Alt+ C   添加 ...

  9. 聊聊Spring Cloud版本的那些事儿

    说说Spring Cloud版本的那些事儿. 版本命名 之前提到过,Spring Cloud是一个拥有诸多子项目的大型综合项目,原则上其子项目也都维护着自己的发布版本号.那么每一个Spring Clo ...

  10. 你不知道的JavaScript--Item6 var预解析与函数声明提升(hoist )

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉, ...