首先在官网下载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[文字提示],对要素进行动态提示
openlayers3中,显示点要素。当鼠标移动到要素上,高亮显示要素,并弹出要素信息。
geoserver+postgis+openlayers 空间要素的增删改功能,具体还可参考https://blog.csdn.net/rrrrroy_Ha/article/details/90904465
采用openlayers5,在天地图上画直线,此代码可供参考。
花费了很久整理的ol2的代码直接可用附带3级切片
mapquery, 结合OpenLayers和jQuery的强大功能 MapQuery更多信息可以在 http://github.com/mapquery 获得。当前的文档是演示目录中的示例。 请随意为这个自述文件写些东西:)为了让演示工作正常,你需要获取所有依赖...
本资源引用了openlayers5,jQuery。popup是openlayers的经常使用的功能。
openlayers使用imageCanvas加载矢量元素
基于Openlayers3+JQuery+.NET+SQLSERVER实现,此代码为《WebGIS之OpenLayers全面解析》中示例所附的源代码。
用JavaScript为OpenLayers.Marker的加上单击显示详细信息的功能 21 改良OpenLayers的MousePostion 25 使用OpenLayers实现一个在鼠标点击处添加标记的效果 27 openlayers 利用google maps的卫星地图 29 openLayers...
目录ol.interaction.Select概述鼠标选定矢量要素突出显示 OpenLayers提供ol.interaction.Select类,来实现对矢量图层的交互。 也是通过监听地图、窗口事件,触发交互,使对应矢量要素产生动态变化。 ol.interaction....
使用openlayers加载离线地图实例,可通过mui打包成app。简单,易上手
使用openlayers展示对象的移动轨迹
openlayers3以上版本,地图中选择要素后自定义右键功能
在ol(openlayers)中进行两个几何要素的拟合,即通过动画的形式从一个几何对象过渡到另一个几何对象,支持点、线、面: /** * @description 动态拟合两个多边形 * @param {object} map ol.Map * @param {object} ...
openlayers3点选、框选、多边形选择点要素,供代码参考吧
openlayers加载静态图片作为底图,操作图片流畅,可控显示范围和等级
OpenLayers OpenLayers Beginner's Guide
OpenLayers作为业内使用*为广泛的地图引擎之一,已被各大GIS厂商和广大WebGIS二次开发者采用。借助OpenLayers强大的扩展功能,可以实现与各个不同的WebGIS平台产品相结合,开发出各具特色的WebGIS应用系统。 本书...
本课程旨在快速搭建地理信息展示系统。主要目的在于让学员了解OpenLayers的基本概念及关键API、掌握内网离线地图优化项目实战技巧以及结合地理信息系统展示的特点使用OpenLayers实战解决实际问题。