小编And*_*vey的帖子

在这里的Leaflet文档中:http://leafletjs.com/reference-1.2.0.html#circlemarker它说CircleMaker扩展了Circle,并且它是相同的,除了半径以像素而不是以米为单位指定,即使缩放地图,圆圈也保持不变.

但我需要Circles,因为我试图在地图上绘制100米半径的圆圈.为此,我使用以下代码:

var geojsonLayer = new L.GeoJSON(null,{
pointToLayer: function (latlng){
    return new L.CircleMarker(latlng, {
        radius: 5,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8,
    });
}});

map.addLayer(osm);
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(jsonExample);

这很好用,但是,如果我将代码更改为使用"Circle"而不是CircleMaker,则整个地图无法加载,并且我收到一个javascript错误:

Error: Error: Invalid LatLng object: (56.229917, NaN)

我可以通过预过滤geojson来解决这个问题,去掉那些缺乏纬度和经度的点,但我很困惑:Circle和CircleMaker都指定他们将LatLng对象作为中心点的规格,我不要不知道某个LatLng对象如何作为CircleMarker的中心点有效,但如果用作Circle的中心点则无效.

我是否忽视了一些明显的东西,或者这只是Leaflet中的一个弱点和/或错误,我只需要解决这个问题？

似乎有两种方法可以向支持它的浏览器显示 WebP 图像。

1. 使用 HTML 图片元素

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

2. 在 HTTP 服务器上检测。因此，请求 /image ，服务器通过 http 请求标头检测客户端是否支持 webp、是否提供 webp 图像、是否不提供 jpg 图像。

哪种方法更好，每种方法都有哪些优缺点？