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);

您可以find a working jsfiddle here。

传单：绘制的圆圈即使移动或缩放也始终可见并居中

1 个答案: