Отображать маркеры в радиусе с помощью листовки

Я хочу отображать маркеры местоположений, которые сериализованы в GeoJson в определенном радиусе моего текущего местоположения. Как я могу это сделать, используя функции буклета? Помогите пожалуйста !!! Я пробовал много вещей, но не нашел решения.Отображать маркеры в радиусе с помощью листовки

map.js

var map = L.map('map',{ 
    center: [5,28], 
    zoom: 3, 
    minZoom:2, 
    maxZoom: 18 
}); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map); 

map.locate({setView: true, maxZoom: 14}); 

L.geoJson(position).addTo(map); 

function onLocationFound(e) { 
    var radius = e.accuracy/2; 

    L.marker(e.latlng).addTo(map) 

    L.circle(e.latlng, radius).addTo(map); 
} 

map.on('locationfound', onLocationFound); 

function onLocationError(e) { 
    alert(e.message); 
} 

map.on('locationerror', onLocationError); 

var RADIUS = 1000; 

var filterCircle = L.circle(L.latLng(40, -75), RADIUS, { 
    opacity: 0.5, 
    weight: 1, 
    fillOpacity: 0.2 
}).addTo(map); 


map.on('locationfound', function(e) { 
    filterCircle.setLatLng(e.latlng); 
    position.setFilter(function showParking(feature) { 
     return e.latlng.distanceTo(L.latLng(
       feature.geometry.coordinates[1], 
       feature.geometry.coordinates[0])) < RADIUS; 
    }); 
});

position.js

var position = {"type": "FeatureCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"geometry": {"type": "Point", "coordinates": [77.23197697517938, 28.6125364004843]}, "type": "Feature", "properties": {"parking": 1, "capacity": "100", "name": "Vasantkunj,New Delhi", "locality": "Pocket B-C"}}]}

HTML файл

{% extends "base.html" %} 
{% load static %} 
{% block content %} 
<html> 
<head> 
    <!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />--> 
    <link rel="stylesheet" href="{% static "css/style.css" %}" type="text/css"/> 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 

<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' /> 

</head> 
<body> 
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> 
<div id="map"></div> 
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script> 
    <!--<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>--> 
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
    <script src="{% static "js/position.js" %}" type="text/javascript"></script> 
    <script src="{% static "js/map.js" %}" type="text/javascript"></script> 
</body> 
</html> 
{% endblock %}

источник

2015-07-20 Karun Madhok

Заканчивать метод featureLayer.setFilter и метод latlng.distanceTo(). Просто отфильтруйте все точки, которые находятся на расстоянии больше определенного радиуса.

MapBox даже имеет good example of this, с перемещением круга на основе mousemove - должно быть немного легче сделать это с фиксированной точкой.

источник

2015-07-21 16:33:03

Отображать маркеры в радиусе с помощью листовки

ответ

Смежные вопросы