Question

我想显示在当前位置的特定半径内在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 %}

Answer 1

查看featureLayer.setFilter方法和latlng.distanceTo()方法。只需过滤掉距离大于某个特定半径的所有点。

MapBox甚至有good example of this，基于鼠标移动的圆圈移动 - 使用固定点应该更容易做到这一点。

使用小叶在半径内显示标记

1 个答案: