logo标签列表

在 Leaflet 中使用半径显示标记

javascriptleaflet
4
我想在我的当前位置周围特定半径内序列化为GeoJson的位置显示标记。我该如何使用leaflet函数实现呢？ 请帮忙！ 我尝试了很多方法，但没有找到解决方案。
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 %}
1个回答
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接