Reactjs 如何使用带有react传单的多段线计算器
我已经使用react传单创建了多段线,我想使用polylinedacorator显示多段线上的方向。但我不知道如何使用react传单。我在传单中找到了多个示例,但在react传单中没有Reactjs 如何使用带有react传单的多段线计算器,reactjs,leaflet,react-leaflet,Reactjs,Leaflet,React Leaflet,我已经使用react传单创建了多段线,我想使用polylinedacorator显示多段线上的方向。但我不知道如何使用react传单。我在传单中找到了多个示例,但在react传单中没有 const polyline = [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]] export default class VectorLayersExample extends Component<{}> { render() { re
const polyline = [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]]
export default class VectorLayersExample extends Component<{}> {
render() {
return (
<Map center={center} zoom={13}>
<TileLayer
attribution='&copy <a
href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Polyline color="lime" positions={polyline} />
</Map>
)
}
有谁能告诉我如何使用具有上述代码的多段线计算器吗
安装传单和传单多段线装饰程序包:npm i传单多段线装饰程序
b一旦安装,以下组件将演示如何使用带L.polylineDecorator的多段线组件:
用法
可与React传单集成,如下所示:
安装传单和传单多段线装饰程序包:npm i传单多段线装饰程序
b一旦安装,以下组件将演示如何使用带L.polylineDecorator的多段线组件:
用法
有什么解决方案吗?有什么解决方案吗?如果不使用钩子,有什么建议吗?我在这方面遇到了一些问题。我对此提出了一个单独的问题:。如有任何帮助,我们将不胜感激:如果您不使用钩子,您对如何进行此操作有何建议?我在这方面遇到了一些问题。我对此提出了一个单独的问题:。如有任何帮助,将不胜感激:
import React, { useRef, useEffect } from "react";
import { Map, TileLayer, Polyline, withLeaflet } from "react-leaflet";
import L from "leaflet";
import "leaflet-polylinedecorator";
const PolylineDecorator = withLeaflet(props => {
const polyRef = useRef();
useEffect(() => {
const polyline = polyRef.current.leafletElement; //get native Leaflet polyline
const { map } = polyRef.current.props.leaflet; //get native Leaflet map
L.polylineDecorator(polyline, {
patterns : props.patterns
}).addTo(map);
}, []);
return <Polyline ref={polyRef} {...props} />;
});
function MyMap(props) {
const { center, zoom } = props;
const polyline = [[57, -19], [60, -12]];
const arrow = [
{
offset: "100%",
repeat: 0,
symbol: L.Symbol.arrowHead({
pixelSize: 15,
polygon: false,
pathOptions: { stroke: true }
})
}
];
return (
<Map center={center} zoom={zoom}>
<TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
<PolylineDecorator patterns={arrow} positions={polyline} />
</Map>
);
}