如何解决如何在react-leaflet中使用leaflet.bezier插件?
我想使用一个名为leaflet-geotiff(https://github.com/lifeeka/leaflet.bezier)的传单插件,但我正在使用传单React。我可以将这个插件转换为单张反应版本吗?
解决方法
安装并导入leaflet.bezier
和snapsvg
,这是第一个依赖项:
import "snapsvg";
import "leaflet.bezier";
使用本机小叶代码创建一个定制的react-leaflet组件,并将其放置在组件安装的位置。还可以使用导入的平面图像来重现示例演示:
function LeafletBezier() {
const { map } = useLeaflet();
useEffect(() => {
const dash_straight = {
color: "rgb(145,146,150)",fillColor: "rgb(145,dashArray: 8,opacity: 0.8,weight: "1",iconTravelLength: 1,iconMaxWidth: 50,iconMaxHeight: 50,fullAnimatedTime: 7000,easeOutPiece: 4,easeOutTime: 2500
};
L.bezier(
{
path: [
[
{ lat: 7.8731,lng: 80.7718,slide: "RIGHT_ROUND" },//Sri Lanka
{ lat: -25.2744,lng: 133.7751,slide: "LEFT_ROUND" },//Australia
{ lat: 36.2048,lng: 138.2529 } //Japan
],[
{ lat: 7.8731,//Sri Lanka
{ lat: 3.139,lng: 101.6869 }
],slide: "RIGHT_ROUND",deep: "8" },//Sri Lanka
{ lat: 41.8719,lng: 12.5674 }
],[
{ lat: -25.2744,lng: 133.7751 },//Australia
{ lat: -40.9006,lng: 174.886 } //Japan
],{ lat: -18.7669,lng: 46.8691 }
]
],icon: {
path: plane
}
},dash_straight
).addTo(map);
},[]);
return null;
}
在react-leaflet的<Map />
中使用它:
<Map ...>
<LeafletBezier />
</Map>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。