点图层叠加与事件响应
点图层叠加与事件响应
lzugis
发布于 2018-10-23 12:15:56
发布于 2018-10-23 12:15:56
概述：
用过百度地图的童鞋一定很羡慕百度地图POi的展示，地图切片+事件响应，以前一直在考虑这个问题，今天，将我的思考结果做一个汇报给大家。下面，将我的实现思路说明一下：1、当图层添加完成或者图层添加完毕并地图四至发生变化时候，从后台获取当前视野内的POI点数据；2、注册mousemove事件，根据鼠标的位置生成一个很小的矩形框，判断POI点数据是否落在了该小矩形框内，是，将其高亮。
实现效果：
实现代码：
前台代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8089/lzugis/plugin/OpenLayers-2.13.1/theme/default/style.css"/>
<style type="text/css">
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
font-size:12px;
}
.highlight-label{
position: absolute;
z-index: 999;
padding:3px 5px;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
}
</style>
<script type="text/javascript" src="http://localhost:8089/lzugis/plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
<script src="http://localhost:8089/lzugis/plugin/jquery/jquery-1.8.3.js"></script>
<script src="http://localhost:8089/lzugis/example/openlayers/ol2/extend/Grid.js"></script>
<script>
var map;
$(window).load(function() {
var format = 'image/png';
var bounds = new OpenLayers.Bounds(
73.45100463562233, 18.16324718764174,
134.97679764650596, 53.531943152223576
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.2403351289487642,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
var tiled = new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
"http://localhost:8088/geoserver/lzugis/wms",
{
"LAYERS": 'province',
"STYLES": '',
format: format
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
"http://localhost:8088/geoserver/lzugis/wms",
{
layers: "capital",
transparent: true
}, {
opacity: 1,
singleTile: true
});
map.addLayers([tiled,wms]);
map.addControl(new OpenLayers.Control.Zoom());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.MousePosition());
map.zoomToExtent(bounds);
addPoiInteraction();
map.events.register("moveend", map, function(){
addPoiInteraction();
});
});
function addPoiInteraction(){
var bbox = map.getExtent().toBBOX();
var url = "http://localhost:8081/lzugis/poi/getdata.do";
var para = {
bbox:bbox
};
var poidata=[];
$.get(url,para,function(data){
data = eval("(" + data + ")");
poidata = data;
map.events.register("mousemove", map, function(e){
$(".highlight-label").remove();
map.layerContainerDiv.style.cursor = "default";
var zoom = map.getZoom();
var offset = 0.5/(zoom+1);
var mousept = map.getLonLatFromPixel(e.xy);
var extent = new OpenLayers.Geometry.Polygon([new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(mousept.lon-offset,mousept.lat-offset),
new OpenLayers.Geometry.Point(mousept.lon+offset,mousept.lat-offset),
new OpenLayers.Geometry.Point(mousept.lon+offset,mousept.lat+offset),
new OpenLayers.Geometry.Point(mousept.lon-offset,mousept.lat+offset),
new OpenLayers.Geometry.Point(mousept.lon-offset,mousept.lat-offset)
])
]);
for(var i=0; i<poidata.length;i++){
var poid = poidata[i];
var poi = new OpenLayers.Geometry.Point(poid.lon, poid.lat);
if(extent.containsPoint(poi)){
map.layerContainerDiv.style.cursor = "pointer";
var lonlat = new OpenLayers.LonLat(poid.lon, poid.lat);
var scrPt = map.getLayerPxFromLonLat(lonlat);
var labelDiv = $("<div/>").addClass("highlight-label").css("top",(scrPt.y)+"px")
.css("left",(scrPt.x+10)+"px").html(poid.name);
$(map.div).append(labelDiv)
break;
}
}
});
});
}
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>后台代码：
public List getPoiData(String bbox){
StringBuffer sb = new StringBuffer();
String[] extent = bbox.split(",");
double xmin=Double.parseDouble(extent[0]),
ymin=Double.parseDouble(extent[1]),
xmax=Double.parseDouble(extent[2]),
ymax=Double.parseDouble(extent[3]);
sb.append("select name,lon,lat from capital where 1=1");
sb.append(" and lon>=?");
sb.append(" and lon<=?");
sb.append(" and lat>=?");
sb.append(" and lat<=?");
return this.jt.queryForList(sb.toString(),new Object[]{xmin, xmax, ymin, ymax});
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016年08月20日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读