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="aisLayer" style="padding:5px;float: left;">' +
'<input type="checkbox" name="aislayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
'<label style="font-weight: normal;vertical-align: middle;margin: auto;">船讯</label>' +
'</div>'
- 点击事件
//船讯
$("#aisLayer input").bind("click", function () {
if (this.checked) {
ais = new bxmap.AIS({
bmap: bmap
});
ais.initSearchPanel($("#map-search-box-panel"));
ais.refresh();
var map = bmap.getMap();
map.getView().setCenter([12867513.634164134, 2589684.2523000734]);
map.getView().setZoom(10);
//图例面板显示
$("#map_tl").css("display","block");
$("#map_tl>img").attr('src', GLOBAL.domainResource+"/Content/img/AISLegend.png");
$("#map_tl>img").css("width","auto");
$("#map_tl>img").css("height","300px");
}
else {
ais.clear();
//图例面板隐藏
$("#map_tl").hide();
}
})
- 地图范围显示船讯核心代码
/**
* @description 刷新船舶位置
*/
bxmap.AIS.prototype.refresh = function () {
var view = this.bmap.getMap().getView();
var resolution = view.getResolution();
//不满足显示渔船的条件
if(resolution > this.displayResolution) {
this.shipLayer && this.shipLayer.setVisible(false);
return;
} if(this.shipLayer){
//显示图层
this.shipLayer.setVisible(true); var center = view.getCenter();
//如果投影坐标系则转为EPSG:4326
if(this.isProjected) {
center = ol.proj.toLonLat(center);
} //获取船舶信息并添加到地图
var self = this;
bxmap.AIS.getShipsByResolution(center, resolution, function (data) {
if (data && data.length) {
//更新船舶
self._updateFeatureToMap(data);
//上次点击选中
if(self._shipInfoFeature){
//设置要素高亮样式
self.setHighlight(self._shipInfoFeature, true);
var info = self._shipInfoFeature["shipInfoData"];
if(this.showDefaultDialog){
this._showInfoDialog(info.shipid, info.source);
}
}
}
});
}
}
更多的详情见: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 入门开发系列之地图展示篇(附源码下载)
前言 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 官网在线例子 ...
随机推荐
- os模块介绍
一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.(一语中的) 二.常用方法 1.os.name 输出字符串指示正在使用的平台 ...
- Struts2中的值栈
一 什么是值栈 值栈: struts2中提供的一种类似于域对象的工具, 用于struts2中的存值和取值. 每次访问Action的时候, 都会创建一个action对象, 而每个action对象中都存在 ...
- linux 获取网络状态信息(Rtnetlink)
一.Rtnetlink Rtnetlink 允许对内核路由表进行读和更改,它用于内核与各个子系统之间(路由子系统.IP地址.链接参数等)的通信, 用户空间可以通过NET_LINK_ROUTER soc ...
- @SpringBootApplication注解理解
@SpringBootApplication包含三个有用的注解,包括 @SpringBootConfiguration:看源码其实就是@Configuration,表示当前类是一个配置类,就像xml配 ...
- RabbitMQ入门:认识并安装RabbitMQ(以Windows系统为例)
最近在学习Spring Cloud,其中消息总线Spring Cloud Bus是必不可少的,但是Spring Cloud Bus目前只支持RabbitMQ和kafka,因此学习RabbitMQ势在必 ...
- nginx cache的玩法
一.简介 Nginx版本从0.7.48开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当做Key,用Md5算法对Key进行哈希,得到硬盘上对应的哈希目录路径,从而将缓存内容保存在 ...
- 在线OJ的小demo
牛课网OJ规则 用readLine()代替read_line() 用readLine()代替read_line() 用readLine()代替read_line() 用readLine()代替read ...
- Javascript 设计模式 单例
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30490955 一直很喜欢Js,,,今天写一个Js的单例模式实现以及用法. 1.单 ...
- 交换两个局部变量Integer的值
反射是很强大的,谁说的final修饰的就不能改变, 通过反射获取成员变量,之后可以取消访问修饰符,也就是说private的也可以访问, 在修改常量(final修饰的),之后就可以对其做任何操作了 如下 ...
- balance.go 源码阅读
) //10s +随机毫秒数 后 执行下面代码 for _ = range t { for _, v := range pBackendSvrs { i ...