首先在官网下载qtip插件:http://craigsworks.com/projects/qtip/
1、导入插件
<link rel="stylesheet" href="jquery.qtip.min.css" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="jquery.qtip.min.js" type="text/javascript"></script>
2、编写js
(1)、在地图帮助类JS中加入:
//要素tip文字控件
var tooltipControl = new OpenLayers.Control.SelectFeature(com.nwd.map._vectorLayer_, {
hover: true,
highlightOnly: true,
eventListeners: {
beforefeaturehighlighted: showQtip,
}
});
this.map.addControl(tooltipControl);
//QTip文字显示==此方法也可以加入到JSP页面里
function showQtip(olEvent){
var elem = document.getElementById(olEvent.feature.geometry.id);
$(elem).qtip({
overwrite: false,
content: olEvent.feature.attributes.name,
position: {
at: 'right center',
my:'left center'
},
show: {
ready: true
},
style: {
classes: 'ui-tooltip-shadow ui-tooltip-blue'
}
}).qtip('show');
}
(2)、在页面JS中加入:
function carInfoPOI(geoPoint,img) {
var address=geoPoint.address+"",address1,address2;
if(address.length>23){
address1=address.substring(0,23);
address2=address.substring(23,address.length);
address=address1+"<br>"+address2;
}
var divContent="<div style='font-size:12px;width:280px;'>"
+getCarNumber(geoPoint.deviceId)+"<hr>设备编号:"
+geoPoint.deviceId+"<br/>"
+"速度:"+geoPoint.speed+"km/h<br/>"
+"方向:"+geoPoint.direction+"点方向<br/>"
+"告警数据:"+geoPoint.alarm+"<br/>"
+"地址:"+address+"</div>";
var attributes = {
'name': divContent,
'longitude': geoPoint.lon_,
'latitude': geoPoint.lat_
};
var feature= new OpenLayers.Feature.Vector(geoPoint, attributes, intCarStyle(img,geoPoint.deviceId));
feature.deviceId=deviceId;feature.geoPoint=geoPoint;
return feature;
}
分享到:
相关推荐
在OpenLayers中,"tooltip"(文字提示)是一种常见的功能,用于提供关于地图上特定要素的额外信息,当用户将鼠标悬停在要素上方时,会显示一个包含相关信息的小窗口。 在OpenLayers中实现地图要素的tooltip,通常...
我们可以创建一个新的`ol.Overlay`实例,设置其位置(基于鼠标位置或点要素的位置),内容(点要素的信息),以及显示和隐藏的逻辑。在鼠标进入和离开点要素时,显示或隐藏这个弹出框。 6. **信息显示**:点要素的...
本示例关注的是如何使用OpenLayers 5在天地图(China's TianDiTu map)上绘制线要素。 在OpenLayers中,线要素通常表示为`ol.geom.LineString`对象,它是由一系列坐标对组成的。首先,我们需要创建一个线要素,然后...
以上就是使用OpenLayers加载本地切片并实现高亮显示的基本流程。在实际应用中,你可能还需要处理各种边界情况,比如切片加载错误、地图缩放时的切片预加载策略等。此外,为了更好地管理切片,你可以考虑使用一个...
《基于Openlayers的水利信息在线分析服务系统》是一款利用Openlayers3、JQuery、.NET框架和SQLSERVER数据库技术构建的WebGIS应用。这个系统旨在提供一个交互式的平台,用于在线处理和分析水利信息,帮助决策者更好地...
OpenLayers提供了改变显示内容的功能,用户可以根据需要改变地图的显示内容,例如显示或隐藏要素、改变图层的顺序等。这种功能非常实用,例如在灾害监测、城市规划等领域。 七、 SLD OpenLayers支持SLD( Styled ...
在GIS(地理信息系统)领域,OpenLayers是一个广泛使用的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。本文将详细讲解如何利用OpenLayers加载本地离线地图瓦片,这在没有网络连接或者需要保障地图数据...
mapquery, 结合OpenLayers和jQuery的强大功能 MapQuery更多信息可以在 http://github.com/mapquery 获得。当前的文档是演示目录中的示例。 请随意为这个自述文件写些东西:)为了让演示工作正常,你需要获取所有依赖...
8. **测试与调试**:在不同设备和浏览器上测试应用,确保地图加载正确,无错乱或显示问题。使用开发者工具进行调试,优化性能。 通过以上步骤,你可以成功地使用OpenLayers加载离线地图,并通过mui将其打包成移动...
解析XML在OpenLayers中通常使用JavaScript的内置DOM解析器,例如`document.createElement`, `getElementsByTagName`, `getAttribute`等方法,或者使用jQuery等库简化操作。 关于OpenLayers的popup(弹窗),可以...
在OpenLayers 3中添加闪烁点是一项常见的需求,特别是在地理信息系统(GIS)应用中,用于突出显示特定位置或实时更新的数据。OpenLayers 是一个流行的JavaScript库,用于在Web浏览器中展示地图,支持多种数据源和...
OpenLayers是一个JavaScript库,用于在Web浏览器中显示地图,而GeoServer则是一个基于Java的服务,它允许用户发布、管理和操作地理空间数据。本资源主要针对初级学习者,介绍如何使用OpenLayers对GeoServer图层进行...
如果重合,就选择该要素并触发相应的操作,例如高亮显示或弹出信息窗口。点选通常适用于选择特定的点状要素,如标记、图标等。 2. **框选(Rectangle Selection)**: 框选允许用户通过拖动鼠标绘制一个矩形框,...
OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括全球知名的地图服务提供商——天地图。天地图是中国官方的地理信息公共服务平台,提供丰富的地形图、卫星...
在JavaScript中,你可以使用`setTimeout`或`setInterval`函数来定时更新地图上的标记位置,从而创建动画效果。 创建动画的关键步骤如下: 1. **加载地图和数据**:首先,你需要加载包含路线数据的地图图层。这通常...
结合jQuery,我们可以实现更加流畅的用户交互,比如在绘制或编辑树结构时提供拖放功能,或者在地图上选择节点时显示相关信息。同时,jQuery的动画效果也可以增强视觉体验,使得地图操作更加生动和吸引人。 在提供的...
这个压缩包文件包含了一系列JSON数据,很可能是用于OpenLayers中展示地理信息的配置或样例数据。 首先,我们来看一下这些文件的命名: - lishicaoqu.json:可能代表历史草区的数据,可能包含了地理坐标和相关属性...
- **图层操作**:`layer.setVisible(true/false)`切换图层显示状态,`source.addFeature(feature)`添加矢量要素。 - **样式设置**:通过Style和StyleMap对图层和特征进行样式定制。 - **瓦片服务**:通过...
在OpenLayers 3及以上版本中,地图右键功能的实现是一项关键操作,它允许用户与地图交互并执行特定任务,如获取地图上的坐标、测量距离、添加标记等。本篇文章将详细探讨如何在OpenLayers中自定义地图右键菜单,以...
此外,它还支持图层控制,允许用户动态加载、隐藏或显示特定的地图层。 OpenLayers 的核心组件包括: 1. 控件(Controls):如导航控件(ZoomIn/Out、Pan)、信息框(InfoBox)、全屏控件等,它们为用户提供直观的...