javascript 传单:Circle 的行为与 CircleMarker 不同

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11966866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:54:42  来源:igfitidea点击:

Leaflet: Circle behaving different from CircleMarker

javascriptgeojsonleaflet

提问by Agrajag

In the documentation for Leaflet here: http://leafletjs.com/reference-1.2.0.html#circlemarkerit says that CircleMaker extends Circle, and that it is the same thing, except the radius is specified in pixels rather than in meters, so that the circles stay constant size even if you zoom the map.

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

I do however need Circles, because I am trying to draw 100m radius circles on a map. To do this, I use the following code:

然而,我确实需要圆圈,因为我试图在地图上绘制半径为 100m 的圆圈。为此,我使用以下代码:

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

This works perfectly, however, if I change the code to use "Circle" instead of CircleMaker the entire map fails to load, and I get a javascript error:

这非常有效,但是,如果我将代码更改为使用“Circle”而不是 CircleMaker,则整个地图无法加载,并且出现 javascript 错误:

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

I can fix this by pre-filtering the geojson to remove those points which lack both latitude and longitude, but I'm confused: Circle and CircleMaker both specify that they take a LatLng-object as the specification of the center-point, I don't get how a certain LatLng object can be valid as centre-point for a CircleMarker, but invalid if used as the centerpoint for a Circle.

我可以通过预过滤 geojson 来解决这个问题,以删除那些既缺乏纬度又缺乏经度的点,但我很困惑:Circle 和 CircleMaker 都指定它们采用 LatLng 对象作为中心点的规范,我不不知道某个 LatLng 对象如何作为 CircleMarker 的中心点有效,但如果用作 Circle 的中心点则无效。

Am I overlooking something obvious, or is this just a weakness and/or bug in Leaflet that I'll just have to work around ?

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

采纳答案by Antonis Anastasiadis

I fixed this by changing the _getLngRadius() method of leaflet.js in L.circle. In leaflet version 0.4.4, it's around line 4913.

我通过更改 L.circle 中的 Leaflet.js 的 _getLngRadius() 方法解决了这个问题。在传单版本 0.4.4 中,它位于第 4913 行附近。

This method differs from the one in circleMarker, as it computes the radius of the circle dynamically. If you change the line that has

此方法与 circleMarker 中的方法不同,因为它动态计算圆的半径。如果您更改具有

this._mRadius/hLength

this._mRadius/hLength

to

this._mRadius.radius/hLength

this._mRadius.radius/hLength

it should be ok.

应该没问题。

回答by Marcel Pfeiffer

There is no problem with the code anymore. Though this same issue can arise easily because of the different constructors:

代码没有问题了。尽管由于构造函数不同,同样的问题很容易出现:

L.CircleMarker( <LatLng> latlng, <Path options> options? )

and

L.Circle( <LatLng> latlng, <Number> radius, <Path options> options? )

Be sure to pass the radius to your new circles.

请务必将半径传递给您的新圈子。

回答by JulienFr

You can add if(latlng && latlng.lat && latlng.lng) at the begining of your function (latlng)

您可以在函数的开头添加 if(latlng && latlng.lat && latlng.lng) (latlng)

that will ignore the faulty datas.

这将忽略错误的数据。