admin 管理员组

文章数量: 1086864

地图中的鼠标移动响应

概述：

假设如下场景：首先地图加载一个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>

---------------------------------------------------------------------------------------------------------------

技术博客

.NET/gisshixisheng

在线教程

.Net/course/detail/799
Github

/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)
             337469080(Android)



本文标签： 地图中的鼠标移动响应

版权声明：本文标题：地图中的鼠标移动响应 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688322648a206060.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。