OpenLayers地图要素tooltip[文字提示]_openlayerstooltip资源-CSDN文库

共6个文件

js：2个

html：1个

png：1个

openLayers

tooltip

4星 · 超过85%的资源需积分: 50 135 浏览量 2013-01-24 21:13:31 上传评论 3 收藏 94KB ZIP 举报

OpenLayers是一个开源JavaScript库，专为构建交互式地图应用而设计。它允许开发者在Web页面上集成各种地图数据，包括WMS、WFS等服务，同时也支持多种地图投影。在OpenLayers中，"tooltip"（文字提示）是一种常见的功能，用于提供关于地图上特定要素的额外信息，当用户将鼠标悬停在要素上方时，会显示一个包含相关信息的小窗口。在OpenLayers中实现地图要素的tooltip，通常需要以下步骤： 1. **创建地图实例**：你需要创建一个OpenLayers地图实例，指定地图的容器元素、中心点、分辨率和投影等参数。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); ``` 2. **添加图层**：然后，向地图添加你需要展示的图层，如瓦片图层、WMS服务图层等。 ```javascript var layer = new ol.layer.Tile({ source: new ol.source.OSM() }); map.addLayer(layer); ``` 3. **创建Feature和Vector Layer**：如果你的要素是动态的，可能需要创建一个Vector Layer，并添加自定义Feature。 ```javascript var vectorSource = new ol.source.Vector(); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); ``` 4. **添加Feature并设置Tooltip**：为每个Feature设置一个`ol.Feature`对象，可以包含几何形状（如点、线、多边形）以及属性数据。你可以监听`pointermove`事件来处理tooltip的显示和隐藏。 ```javascript var feature = new ol.Feature({ geometry: new ol.geom.Point([0, 0]), name: 'My Feature' }); // 添加Feature到源 vectorSource.addFeature(feature); map.on('pointermove', function(event) { if (event.dragging) { return; } var hit = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) { return feature; }); if (hit) { // 显示tooltip } else { // 隐藏tooltip } }); ``` 5. **使用第三方库QTip**：为了实现更丰富的样式和交互，你可以使用jQuery插件QTip。在本例中，`jquery.qtip.min.css`和`jquery.qtip.min.js`提供了样式和功能。确保引入jQuery库（`jquery.js`），然后加载QTip的CSS和JS文件。 ```html <link rel="stylesheet" href="jquery.qtip.min.css"> <script src="jquery.js"></script> <script src="jquery.qtip.min.js"></script> ``` 6. **配置和应用QTip**：在`pointermove`事件处理函数中，你可以创建QTip实例并设置其内容和样式。`car_mini.png`可能是用来作为tooltip图标或者背景的资源。 ```javascript if (hit === feature) { $('#tooltip').qtip({ content: feature.get('name'), // 提示内容取自Feature的属性 position: { my: 'bottom center', // 提示框位置相对于鼠标 at: 'top center' }, style: { classes: 'qtip-bootstrap' // 设置样式类 } }, 'api').show(); // 显示QTip } else { $('#tooltip').qtip('hide'); // 隐藏QTip } ``` 7. **HTML结构**：别忘了在HTML中为QTip创建一个容器元素。 ```html <div id="tooltip"></div> ``` 通过以上步骤，你可以实现OpenLayers地图上的动态tooltip，提供丰富且互动的地图体验。QTip库的使用增强了提示信息的视觉效果，使得用户更容易理解和探索地图上的信息。记得根据实际需求调整代码，比如添加更多样式选项、处理不同类型的Feature，或者从服务器获取提示信息。

资源推荐

资源详情

资源评论

收起资源包目录

地图要素tooltip.zip （6个子文件）

jquery.js 247KB

jquery.qtip.min.css 9KB

index4.html 5KB

jquery.qtip.min.js 39KB

bg.gif 150B

car_mini.png 3KB

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #map { width: 100%; height: 99%; border: 1px solid black; } body { padding:0px; margin:2px } </style> <link rel="stylesheet" href="jquery.qtip.min.css" type="text/css"> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.qtip.min.js" type="text/javascript"></script> <script type="text/javascript"> function poi(item, lat, long ) { var formatOpt={ internalProjection:new OpenLayers.Projection("EPSG:900913"), externalProjection:new OpenLayers.Projection("EPSG:4326") }; var fpoint = new OpenLayers.Geometry.Point(long,lat).transform(formatOpt.externalProjection,formatOpt.internalProjection); var attributes = { 'name': item, 'longitude': long, 'latitude': lat }; var styles = { 'externalGraphic': 'car_mini.png', 'graphicWidth':39, 'label':'dddddd', 'backgroundGraphic':'bg.gif', 'backgroundXOffset':20, 'labelXOffset':40, 'graphicHeight':22 }; var feature = new OpenLayers.Feature.Vector(fpoint, attributes,styles); feature.id = "POI_" + item; return feature; } 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'); }  </script> </head> <body onload="init()"> <div id="map"> </div> </body> </html>

评论收藏

内容反馈