OpenLayers加载实时路况信息

2023-11-01 04:59
文章标签 加载 实时 信息 openlayers 路况

本文主要是介绍OpenLayers加载实时路况信息，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

OpenLayers官方QQ群
                              群号 259159743     259159561

 

实时路况信息对于我们来说还是比较重要的，
当然实时路况的发布是需要条件的，我们可以调用别人已经发布好的实时路况
这里以北京实时路况为例，仅作学习 交流之用。请勿商用。。。。否则责任自负！

1.首先我们要有路况发布的服务。可以是瓦片形式的，也可以是wms或其他形式的服务
2.要得到当前路况的时间。
3.叠加到地图之上
4.实时刷新路况图层，这个要用到ajax

下面直接上代码
同样
一 、我们在lib\OpenLayers\Layer目录下面新建一共LTTrafficLayer2.js

新建一共OpenLayers.Layer.LTTrafficLayer2.js类继承自OpenLayers.Layer.TileCache  ，重新定义getURL方法
并添加获取获取实时路况时间戳的方法

 

/**
* 对自定义规则切割的图片进行拼装的类
*/
OpenLayers.Layer.LTTrafficLayer2 = OpenLayers.Class(OpenLayers.Layer.TileCache, {
/*获取图片的地址的定时器*/
timer : null,
mapMaxExtent: null,
initialize: function (name, url, options) {
var tempoptions = OpenLayers.Util.extend({
'format': 'image/png',
isBaseLayer: true
}, options);
OpenLayers.Layer.TileCache.prototype.initialize.apply(this, [name, url, {},
tempoptions]);
this.numZoomLevels = 6;
this.maxResolution = 152.87405654296875;
this.realtimeurl = url;
this.transitionEffect = null;
},
destroy : function() {
OpenLayers.Layer.TileCache.prototype.destroy.apply(this,arguments);
this.destroyTimer();
},refresh: function () {
if (this.visibility) {
this.clearGrid();
this.redraw();}
},
createTimer : function() {
function time() {//获取图片路径与时间戳
OpenLayers.loadURL('http://eye.bjjtw.gov.cn/Web-T_bjjt_new/query.do', {
serviceType : 'traffic',
acode : '110000',
cls : 1,
type : 0,
timestamp : Math.random()
}, this, this.success, this.failure);
}
var _time = OpenLayers.Function.bind(time, this);
_time();
this.timer = window.setInterval(_time, 60 * 1000);},destroyTimer : function(){
if (this.timer) {
window.clearInterval(this.timer);
this.timer = null;
}
},success : function(resp){
var txt = resp.responseText;
if (txt === '') {
return;
}resp = eval('(' + txt + ')');
if (resp) {
var time = resp.sTime+"";
var times=time.substring(8,10) + ":" + time.substring(10,12);
if(this.visibility){
$('traffictime').innerHTML = times;
if($('traffictime').timestmp&&$('traffictime').timestmp!=times){
$('traffictime').timestmp = times;
this.refresh();}
if(!$('traffictime').timestmp){
$('traffictime').timestmp = times;
this.refresh();
}
}
}
},
failure : function(resp) {},/**
* 按地图引擎切图规则实现的拼接方式
*/
getURL: function (bounds) {
var res = this.map.getResolution();
var bbox = this.map.getMaxExtent();
var size = this.tileSize;
//计算列号 
var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
//计算行号
var tileY = Math.round((bbox.top - bounds.top) / (res * size.h));
//当前的等级 
var tileZ = this.map.zoom;
if (tileX < 0) tileX = tileX + Math.round(bbox.getWidth() / bounds.getWidth());
if (tileY < 0) tileY = tileY + Math.round(bbox.getHeight() / bounds.getHeight());
return this.getTilePic(tileX, tileY, tileZ);
},clone: function (obj) {if (obj == null) {
obj = new OpenLayers.Layer.LTTrafficLayer2(this.name, this.url, this.options);
}
obj = OpenLayers.Layer.LTTrafficLayer2.prototype.clone.apply(this, [obj]);
return obj;
},
//请求加随机数，解决ie6下图片缓存不更新问题
getTilePic: function (tileX, tileY, tileZ) {
var dir = '';
if (tileZ > 6) {
var delta = Math.pow(2, tileZ - 5);
var rowDir = 'R' + Math.floor(tileY / delta);
var colDir = 'C' + Math.floor(tileX / delta);
dir = tileZ + "/" + rowDir + "/" + colDir + "/";
} else {
dir = tileZ + '/';
}var tileNo = tileZ + "-" + tileX + "-" + tileY;
var sUrl = this.url + dir + tileNo + '.png?r=';
var d = Math.random();
sUrl += d;
//alert(sUrl);
return sUrl;
},
CLASS_NAME: "OpenLayers.Layer.LTTrafficLayer2"
});

二、在lib文件夹下的OpenLayers.js 中加载js文件的函数中添加"OpenLayers/Layer/LTTrafficLayer2.js"   
三、新建一个html页面
添加触发实时路况的checkbox的函数onDispTraffic
function onDispTraffic(obj)
   {
       if(trafficLayer.visibility){
     trafficLayer.setVisibility(false);
     trafficLayer.destroyTimer();
     
     $('traffictime').innerHTML="";
     if($('showTraCheck').checked)
      $('showTraCheck').checked = false;   
      }else{
     trafficLayer.setVisibility(true);
     trafficLayer.createTimer();
     
     
     
     }
   
   }


四、在map容器中添加实时路况控制的div层
<div style="position:absolute; right:5px; top:5px; color:#000; z-index:1000;">
   
              <input type="checkbox"  id="showTraCheck"  /><span id="spantra"><font style="font-weight:bold;color:#000000">显示实时路况</font></span>
     <font  class="traffictext" id="traffictime" ></font>
     </div>
整体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><title>OpenLayers TileCache Example</title><link rel="stylesheet" href="img/style.css" type="text/css">
<script src="lib/OpenLayers.js"></script><script type="text/javascript">
var map, layer,marker;
var layerOptions=null;
var trafficLayer;
OpenLayers.INCHES_PER_UNIT["千米"] = OpenLayers.INCHES_PER_UNIT["km"]; 
OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"]; 
OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"]; 
OpenLayers.INCHES_PER_UNIT["英寸"] = OpenLayers.INCHES_PER_UNIT["ft"]; 
function init(){map = new OpenLayers.Map( $('map'), {controls: [],
maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
maxResolution:156543.03125,
numZoomLevels:19,
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units:'m'});
var mapabc = new OpenLayers.Layer.MapABC(
"Mapabc",
["http://emap0.is.autonavi.com/appmaptile?","http://emap1.is.autonavi.com/appmaptile?","http://emap2.is.autonavi.com/appmaptile?","http://emap3.is.autonavi.com/appmaptile?"],
layerOptions
);
trafficLayer=new OpenLayers.Layer.LTTrafficLayer2("实时路况",
"http://219.232.196.52:8081/",
{isBaseLayer: false,visibility:false}
);
map.addLayers([mapabc,trafficLayer]); 
map.addControl( new OpenLayers.Control.ScaleLine({
topOutUnits:"千米",
topInUnits:"米",
bottomOutUnits:"英里",
bottomInUnits:"英寸" 
//如果底部单位为空 则不显示比例尺下部分
}));
map.addControl(new OpenLayers.Control.PanZoomBar({'zoomWorldIcon':true}));
map.addControl( new OpenLayers.Control.KeyboardDefaults());
map.setCenter(new OpenLayers.LonLat(116.397128, 39.916527).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 11
); $('showTraCheck').checked = false;
}
OpenLayers.Util.onImageLoadErrorColor = "transparent";
//OpenLayers.Util.onImageLoadErrorColor = "pink"function onDispTraffic(obj)
{
if(trafficLayer.visibility){
trafficLayer.setVisibility(false);
trafficLayer.destroyTimer();$('traffictime').innerHTML="";
if($('showTraCheck').checked)
$('showTraCheck').checked = false; 
}else{
trafficLayer.setVisibility(true); 
trafficLayer.createTimer();}}</script>
<body οnlοad="init()"><div id="map" style="position:relative;width: 100%;height: 100%;border: 1px solid #ccc;">
<div style="position:absolute; right:5px; top:5px; color:#000; z-index:1000;"><input type="checkbox" id="showTraCheck" οnclick="onDispTraffic(this);" /><span id="spantra"><font style="font-weight:bold;color:#000000">显示实时路况</font></span>
<font class="traffictext" id="traffictime" ></font>
</div>
</div>
</body></html>

效果如下

 

更多信息 请关注openlayers中文官方站  http://www.openlayers.cn

转载于:https://www.cnblogs.com/gisvip/archive/2012/11/24/2787141.html

这篇关于OpenLayers加载实时路况信息的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/320650。

相关文章

C#读取本地网络配置信息全攻略分享

C#读取本地网络配置信息全攻略分享

《C#读取本地网络配置信息全攻略分享》在当今数字化时代,网络已深度融入我们生活与工作的方方面面,对于软件开发而言,掌握本地计算机的网络配置信息显得尤为关键,而在C#编程的世界里,我们又该如何巧妙地读取... 目录一、引言二、C# 读取本地网络配置信息的基础准备2.1 引入关键命名空间2.2 理解核心类与方法
阅读更多...
最好用的WPF加载动画功能

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验（UX）是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时，提供良好的用户体验（UX）是至关重要
阅读更多...
使用Python检查CPU型号并弹出警告信息

使用Python检查CPU型号并弹出警告信息

《使用Python检查CPU型号并弹出警告信息》本教程将指导你如何编写一个Python程序,该程序能够在启动时检查计算机的CPU型号,如果检测到CPU型号包含“I3”,则会弹出一个警告窗口,感兴趣的小... 目录教程目标方法一所需库步骤一：安装所需库步骤二：编写python程序步骤三：运行程序注意事项方法二
阅读更多...
MyBatis延迟加载的处理方案

MyBatis延迟加载的处理方案

《MyBatis延迟加载的处理方案》MyBatis支持延迟加载（LazyLoading）,允许在需要数据时才从数据库加载,而不是在查询结果第一次返回时就立即加载所有数据,延迟加载的核心思想是,将关联对... 目录MyBATis如何处理延迟加载？延迟加载的原理1. 开启延迟加载2. 延迟加载的配置2.1 使用
阅读更多...
Android WebView的加载超时处理方案

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超
阅读更多...
PostgreSQL如何查询表结构和索引信息

PostgreSQL如何查询表结构和索引信息

《PostgreSQL如何查询表结构和索引信息》文章介绍了在PostgreSQL中查询表结构和索引信息的几种方法,包括使用`d`元命令、系统数据字典查询以及使用可视化工具DBeaver... 目录前言使用\d元命令查看表字段信息和索引信息通过系统数据字典查询表结构通过系统数据字典查询索引信息查询所有的表名可
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
业务中14个需要进行A/B测试的时刻[信息图]

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中，我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试，如何有效地规划和启动测试，如何评估测试是否成功，您应该关注哪些指标，多年来我们发现的常见错误等等。 什么是A/B测试？ A/B测试（有时称为“分割测试”）是一种实验类型，其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体，以查看哪一种效果最好。 本质上，A/B测
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2