说明

本文使用的数据为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

SuperMap iClient for Leaflet实现拖动半径进行距离查询相关推荐

SuperMap iClient for JavaScript 实现拖动半径进行距离查询
作者:sniper 前一段时间有很多朋友问我,怎么用SuperMap iClient for JavaScript实现类似百度地图或高德地图那样拖动一个按钮选择半径,从而查询附近的地理要素.因此,我们 ...
SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...
SuperMap iClient for Leaflet对EPSG:4509图加载滑动查询
作者:John SuperMap iClient for Leaflet对EPSG:4509地图加载&滑动查询在WebGIS开发使用中,我们会遇到地图显示不了,以及查询到数据显示不出的问题, ...
LeafletJS 简单使用1 - 地图标点 L.marker()、清除标点 layerGroup.clearLayers() 【SuperMap iClient for Leaflet】超图的使用
目录一.业务需求二.参考文档三.实现思路四.参考代码 4.1 安装依赖 4.2 生成一张地图 4.3 标点_自定义标点图标 4.4 清除标点五.用到的 API 六.整体代码 + 页面展示七 ...
SuperMap iClient for Leaflet实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Leaflet客户端的示例,在此文章中将简单介绍iC ...
Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
作者:gaogy 文章目录背景一.使用Vite构建Vue3+JavaScript项目二.搭建iClient for Leaflet开发环境三.第三方可视化库Echarts的使用四.第三方可视 ...
聊聊iClient for Leaflet坐标转换问题
作者:张永利背景 SuperMap iClient for JavaScript 9D产品想必大伙都用了一段时间了,针对新推出的三款客户端产品,Leaflet,OpenLayaers,MapboxG ...
SuperMap iClient for JavaScript常见问题解答集锦（十二）
作者:皇皇问:如果您在OpenStack平台中创建虚拟机时出现以下错误信息Build of instance aborted: Flavor is disk is too small for req ...
iClient for Leaflet加载MVT矢量瓦片并注册鼠标事件
作者:刘大使用背景需要在前端动态更改地图样式,并高效进行鼠标交互获取要素的业务场景时,我们会采取MVT矢量瓦片来解决此类问题,但是web应用开发已经选用Leaflet地图框架的情况下怎么办呢,这时 ...

SuperMap iClient for Leaflet实现拖动半径进行距离查询

说明

1.初始圆绘制查询

2.拖动绘制

3.距离查询

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

SuperMap iClient for Leaflet实现拖动半径进行距离查询相关推荐

最新文章

热门文章