更改点圈外的传单地图不透明度答案

【问题标题】：Change leaflet map opacity outside circle of point更改点圈外的传单地图不透明度
【发布时间】：2021-12-13 07:03:41
【问题描述】：

Geoapify search nearby places 功能突出显示位于给定结果内的区域，我需要知道如何将此功能添加到传单地图，以便从其他区域突出显示包含附近地点的给定半径区域，有什么解决办法吗？这在反应传单地图中？

 useEffect(() => {
         const map = useMap();
         L.circle([lat, lng], { radius: 200 }).addTo(map);
      }, []);

    const Map = () => {
      return (
        <MapContainer 
          center={center} 
          minZoom={1} 
          zoomControl={false}
        >
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright"></a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          /> 
          
        </MapContainer>
      );
    };

【问题讨论】：

肯定不是内置的，但你也许可以在插件中找到一些东西。

标签： javascript leaflet react-leaflet

【解决方案1】：

一种方法是使用L.Donut 并在标记周围画一个带孔的圆圈：

L.marker(map.getCenter()).addTo(map);
var donut = L.donut(map.getCenter(),{
    radius: 20000000000000,
    innerRadius: 100,
    innerRadiusAsPercent: false,
    color: '#000',
    weight: 2,
}).addTo(map);

https://plnkr.co/edit/JX3VdzxnGXGoOerr

【讨论】：