地图中的鼠标移动响应
概述：
假设如下场景：首先地图加载一个WMS或者切片，wms为POI或者切片上有POI，我们知道WMS或者切片是无法做到像Marker或者矢量的事件相应的，但是我们又需要对这些POI点进行响应，这就不太好办了。基于此想法，本文讲述此想法的实现思路以及OL2和Arcgis中的实现方式。
思路：
实现的关键是注册两个map的事件：1、四至发生变化的时候；2、鼠标移动的时候。
1、四至发生变化
当地图的四至发生变化时，我们需要将变化后四至内的POI点的数据返回到前台进行下一步处理，返回的逻辑可以采用一次性全部返回或者分区域返回，分区域返回的优势是减少数据的传输量，但是分区域返回时需要结合鼠标移动的同时响应的。
2、鼠标移动的时候
当获取到了当前区域的POI数据，当鼠标移动时，以鼠标点为中心，当前地图的分辨率*图标大小为长宽，创建一个正方形，去循环判断POI点是否落在的该正方形内，是，响应；否，返回。
效果：
1、OL2中
2、Arcgis for js
实现：
1、OL2中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<style>
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
}
.highlight-poi-label{
background-color: #ffffff;
color:#000000;
border: solid 1px #1E90F5;
border-radius: 3px;
font-size: 12px;
padding: 2px 5px;
white-space:nowrap;
position:absolute;
z-index: 999;
}
</style>
<script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
<script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script>
var map;
var tiled;
$(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);
tiled = new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
"http://localhost:8088/geoserver/lzugis/wms",
{
"LAYERS": 'capital',
"STYLES": '',
format: format
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayers([tiled]);
map.addControl(new OpenLayers.Control.Zoom());
map.addControl(new OpenLayers.Control.Navigation());
map.zoomToExtent(bounds);
var features =[];
$.ajax({
url: "data/capital.geojson",
async: false,
success:function(result){
result = eval("("+result+")");
var geojson_format = new OpenLayers.Format.GeoJSON();
features = geojson_format.read(result);
}
});
map.events.register("mousemove", map, function(e){
$(".highlight-poi-label").remove();
map.layerContainerDiv.style.cursor = "default";
var lonlat = map.getLonLatFromPixel(e.xy);
var offset = map.resolution*5;
var xmin = lonlat.lon-offset,
ymin = lonlat.lat-offset,
xmax = lonlat.lon+offset,
ymax = lonlat.lat+offset;
for(var i in features){
var feature = features[i];
var geom = feature.geometry;
var _ptx = geom.x,_pty = geom.y;
if(_ptx>=xmin&&_ptx<=xmax&_pty>=ymin&&_pty<=ymax){
map.layerContainerDiv.style.cursor = "pointer";
var scrPt = map.getViewPortPxFromLonLat(new OpenLayers.LonLat(_ptx, _pty));
var orgPx = map.layerContainerOriginPx;
var labelDiv = $("<div/>").addClass("highlight-poi-label").css("top",(scrPt.y-orgPx.y+15)+"px")
.css("left",(scrPt.x-orgPx.x+17)+"px").html(feature.attributes.name);
$(map.layerContainerDiv).append(labelDiv);
}
}
});
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>2、Arcgis for js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://localhost/arcgis_js_311/api/arcgis_js_api/library/3.11/3.11/esri/css/esri.css">
<style type="text/css">
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
font-size: 62.5%;
font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
overflow: hidden;
}
.highlight-poi-label{
background-color: #ffffff;
color:#000000;
border: solid 1px #1E90F5;
border-radius: 3px;
font-size: 12px;
padding: 2px 5px;
white-space:nowrap;
position:absolute;
z-index: 999;
}
</style>
<script src="http://localhost/arcgis_js_311/api/arcgis_js_api/library/3.11/3.11/init.js"></script>
<script src="../../plugin/jquery/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
var map;
require([
"esri/map",
"esri/layers/WMSLayer",
"esri/geometry/Point",
"esri/geometry/Extent",
"dojo/domReady!"],
function(Map,
WMSLayer,
Point,
Extent)
{
map = new Map("map",{logo:false});
var resourceInfo = {
extent: new Extent(-126.40869140625,31.025390625,-109.66552734375,41.5283203125,{wkid: 4326}),
layerInfos: [],
version : '1.1.1'
};
var geoWmsUrl = "http://localhost:8088/geoserver/wms";
var geoWmsLayer = new WMSLayer(geoWmsUrl,{resourceInfo: resourceInfo});
geoWmsLayer.setImageFormat("png");
geoWmsLayer.setVisibleLayers(["capital"]);
map.addLayer(geoWmsLayer);
var mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter,4);
var features =[];
$.ajax({
url: "data/capital.geojson",
async: false,
success:function(result){
features = eval("("+result+")");
features = features.features;
}
});
map.on("mouse-move", function(e){
$(".highlight-poi-label").remove();
map.setMapCursor("default");
var offset = map.getResolution()*5;
var mapPt = e.mapPoint;
var xmin = mapPt.x-offset,
ymin = mapPt.y-offset,
xmax = mapPt.x+offset,
ymax = mapPt.y+offset;
for(var i in features){
var feature = features[i];
var _ptx = feature.geometry.coordinates[0],
_pty = feature.geometry.coordinates[1];
if(_ptx>=xmin&&_ptx<=xmax&_pty>=ymin&&_pty<=ymax){
map.setMapCursor("pointer");
var scrPt = map.toScreen(new Point(_ptx, _pty, map.spatialReference))
var labelDiv = $("<div/>").addClass("highlight-poi-label").css("top",(scrPt.y+15)+"px")
.css("left",(scrPt.x+17)+"px").html(feature.properties.name);
$("#"+map.id).append(labelDiv);
}
}
});
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年01月21日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读