Leaflet: Нарисуйте круг всегда видимым и центрированным даже после перемещения или увеличения

Question

Я пытаюсь нарисовать круг на моей Листовой Карте, который должен быть всегда видимым и центрированным, даже когда пользователь перемещает или увеличивает карту. Следующий код работает хорошо, когда пользователь перемещает карту, но когда пользователь увеличивает или уменьшает изображение, размер круга не обновляется. Я хотел бы сохранить всегда одно и то же измерение для круга.

HTML

<div id="map" class="map" style="height:75vh;"></div>

JS

// Init Leaflet Map basically
this.map = L.map("map").setView([38.63, -90.23], 12);
window.map = this.map;
this.tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
   maxZoom: 20,
   maxNativeZoom: 18,
   attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
});

this.tileLayer.addTo(this.map);

// Create circle that will be always visible and will have alwaus the same width.
this.circle = L.circle([38.63, -90.23], 3000, {
  color: '#5d78ff',
  fillOpacity: 0
}).addTo(this.map);

// Set circle always centered when map is moved.
this.map.on("moveend", (s) => {
  this.circle.setLatLng(this.map.getCenter());
});

// todo: Set circle always centered when map is zoom in/out
this.map.on("zoomend", (s) => {
  this.circle.setLatLng(this.map.getCenter());
  console.log('test');
});

JSFIDDLE

https://jsfiddle.net/4uorasdn/

Answer 1

Вы можете использовать CircleMarker вместо использования Circle.

Соответствующая часть вашего кода, которую необходимо изменить, должна выглядеть примерно так:

this.circle = L.circleMarker([38.63, -90.23], {
  radius: 200,
  color: '#5d78ff',
  fillColor: '#f03',
  fillOpacity: 0.2,
  opacity: 1,
  title: "test"   
}).addTo(this.map);

И вы можете найти работающий jsfiddle здесь .