gpt4 book ai didi

javascript - 使用传单显示半径内的标记

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:59:11 24 4
gpt4 key购买 nike

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

定位.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 %}

最佳答案

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

MapBox 甚至有一个 good example of this ,圆圈基于 mousemove 移动——使用固定点执行此操作应该更容易一些。

关于javascript - 使用传单显示半径内的标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31511971/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com