我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标拖动进行距离查询。先来看一看是什么效果：

说明

  本文使用的数据为iserver自带的范例数据长春市区图；查询的圆点是给的一个随机点，在使用中需要根据实际情况相应改变；查询的目标是中心点周围的医院。
实现拖动查询的代码，主要由以下四部分组成。
1、初始圆绘制查询。
2、拖动绘制。
3、距离查询。
4、在地图移动的时候按钮位置随地图移动。

1.初始圆绘制查询

  在点击画图按钮后进行第一次默认绘制查询，查询半径为500米，查询设施为医院，查询点为(-3861.91,4503.62)

var X, Y;
			var queryDis = 500;//查询距离
			var facilityName = '[email protected]';//查询设施
            var iconPic = L.icon({
				iconUrl: "img/marker2.png",
				iconSize: [44, 30]
			});
			function drawCircle(lat, lng) {
				resultLayer.clearLayers();
				var marker = L.marker([lat, lng]).addTo(resultLayer);
				queryDis = 500;
				X = lat;
				Y = lng;
				var pixe = map.latLngToContainerPoint([X, parseInt(Y) + queryDis]);
				var circle = L.circle([X, Y], {
					color: 'blue',
					fillColor: '#69B4FD',
					fillOpacity: 0.5,
					radius: 500
				}).addTo(resultLayer);
				$("#dragButton").css({
					top: (pixe.y - 8),
					left: (pixe.x - 13)
				});
				$("#distance").val("500米");
				$("#dragButton").show();
				queryByDistance();
			}

2.拖动绘制

  点击拖动按钮松开后，通过鼠标移动来进行放大缩小，当移动到合适距离后，通过双击停止绘制，并进行距离查询,如下：

// An highlighted block
$('#dragButton').mousedown(
				function(ev) {
				//监听鼠标移动事件
					map.on('mousemove',
						function(ev) {
							queryDis = ev.latlng.lng - Y; //拖动时的半径
							var obj = $('#dragButton');
							var piexTemp = map.latLngToContainerPoint([X, parseInt(Y) + queryDis]);//坐标点转为屏幕点
							//控制拖动按钮向左不能超过圆心
							if(ev.latlng.lng > Y) {
								obj.css({
									'left': piexTemp.x - 13,
									'top': piexTemp.y - 8
								}); //拖动按钮的位置随鼠标移动改变
								$("#distance").val(queryDis.toFixed(0) + "米"); //显示半径文本框中的半径值
								//实时画圆
								resultLayer.clearLayers();
								var circle = L.circle([X, Y], {
									color: 'blue',
									fillColor: '#69B4FD',
									fillOpacity: 0.5,
									radius: queryDis
								}).addTo(resultLayer);
							}
						}
					)
                   //双击结束绘制开始查询
					map.on('dblclick', function(ev) {
						queryByDistance();
					});
				}
			);

3.距离查询

  通过调用queryByDistance接口实现距离查询

function queryByDistance(){			
						var marker = L.marker([X, Y]).addTo(resultLayer);
						//取消事件监听
						map.off('mousemove');
						map.off('dblclick');
						var param = new SuperMap.QueryByDistanceParameters({
							queryParams: {
								name: facilityName
							},
							distance: queryDis,
							geometry: marker
						});
						L.supermap
							.queryService(url)
							.queryByDistance(param, function(serviceResult) {
								 L.geoJSON(serviceResult.result.recordsets[0].features, {
									onEachFeature: function(feature, layer) {
										var marker = L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
												icon: iconPic
											}).addTo(resultLayer)
									}
								});
							});
					}

4.在地图移动的时候使按钮随地图移动

  由于我们的拖动按钮position设置的是absolute，它在屏幕上的位置是绝对的，他不会随着用户拖动地图而改变位置，所以我们就要对地图做一个监控，当地图移动时拖动按钮跟着移动。具体方法如下：

map.on('move', function move() {
				//在拖动地图的过程中，使拖动按钮随着地图移动
				if($('#dragButton').is(":visible") && X != null && Y != null) {
					var piexTemp = map.latLngToContainerPoint([X, parseInt(Y) + queryDis]);
					$('#dragButton').css({
						'left': piexTemp.x - 13,
						'top': piexTemp.y - 8
					});
				}
			});

  到目前为止，我们的功能已经全部实现了。如有需要改进的地方，欢迎大家多多批评指正。
完整代码如下：https://download.csdn.net/download/supermapsupport/11189950