作者:lly
我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标拖动进行距离查询。先来看一看是什么效果:
说明
本文使用的数据为iserver自带的范例数据长春市区图;查询的圆点是给的一个随机点,在使用中需要根据实际情况相应改变;查询的目标是中心点周围的医院。
实现拖动查询的代码,主要由以下四部分组成。
1、初始圆绘制查询。
2、拖动绘制。
3、距离查询。
4、在地图移动的时候按钮位置随地图移动。
1.初始圆绘制查询
在点击画图按钮后进行第一次默认绘制查询,查询半径为500米,查询设施为医院,查询点为(-3861.91,4503.62)
var X, Y;
var queryDis = 500;//查询距离
var facilityName = 'Hospital@Changchun';//查询设施
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