使用Leaflet和GeoJSON将同心圆添加到地图中标记周围的特定距离处

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<div id="map" style="width: 800px; height: 600px;"></div>

// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加地图图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 18,
}).addTo(map);

// 创建同心圆
var center = L.latLng(51.505, -0.09);
var radius = 1000; // 单位为米
var options = {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
};
var circle = L.circle(center, radius, options).addTo(map);

// 创建标记
var marker = L.marker(center).addTo(map);

// 添加标记的弹出窗口
marker.bindPopup("This is the center point").openPopup();