传单位置过滤器示例和可拖动调整大小的矩形区域 - 在地图上选择 [英] leaflet location-filter example and draggable-resizeable rectangular area-select on a map

查看:161
本文介绍了传单位置过滤器示例和可拖动调整大小的矩形区域 - 在地图上选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要在地图上选择一个矩形区域,并确定属于该区域的标记。
理想情况下,矩形应该可以拖动和调整大小。
我对映射并不太在意,Google或Mapbox或Leaflet都可以正常工作。



我发现Leaflet的位置过滤器( https://github.com/kajic/leaflet-locationfilter/ ),这似乎确实做了这项工作。但是,我找不到显示如何使用它的简单示例代码。它已在tripcode.com上使用过,但很难做出任何事情。
有没有人有使用位置过滤器的经验?如果是这样,你能指点我如何使用它的简单例子吗?

其他地图服务有相似的例子,特别是谷歌地图吗?



谢谢。

解决方案

对于我 bbox页面我已经抓取了两个文件: SimpleShape ,来自 Leaflet.draw 插件的矩形并修复它们以获得更好的可用性。矩形的代码很简单:

  var rect = L.rectangle([[59.9,29.9],[60.1,30.1 ]]); 
map.addLayer(rect);
rect.editing.enable();
$ b rect.on('edit',function(){console.log(rect.getBounds()。getBBoxString());});

对于在屏幕上居中矩形之类的高级内容,请参阅页面的源代码。


I need to select an rectangular area on a map and identify markers that fall within that area. Ideally, rectangle should be draggable and resizeable. I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.

I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on. Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?

Are there similar examples for other mapping services particularly google maps?

Thanks.

解决方案

For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:

var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();

rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });

For advanced things like centering the rectangle on screen, see source code for the page.

这篇关于传单位置过滤器示例和可拖动调整大小的矩形区域 - 在地图上选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆