标签: react-leaflet

遵循高级组件工厂的官方参考来更新控制组件的道具

核心 API 导出可以以类似方式使用的其他高级组件工厂。

我模仿了这个例子 - 但我收到以下语法错误：

import L from "leaflet";
import "leaflet-routing-machine";
import { createControlComponent } from "@react-leaflet/core";
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'

function setWaypoints(props)
{
    return { 
        waypoints: [
        L.latLng(props.startLat, props.startLng),
        L.latLng(props.endLat, props.endLng)
        ],
        lineOptions: {
            styles: [{ color: "#0500EE", weight: 4 }]
        },
        show: false,
        addWaypoints: false,
        routeWhileDragging: true,
        draggableWaypoints: true,
        fitSelectedRoutes: true,
        showAlternatives: false,
        createMarker: function() { return null; },

    }
}


function createRoutingMachine(props, context) 
{
    const instance =  new L.Routing.control(setWaypoints(props))
    return 
    { 
        instance, context: { ...context, …

因此，我运行此代码来渲染传单，尝试在 colorMode 更改时替换 url 是这里的挑战。

useEffect 被触发，显示正确的变量，但我无法以任何方式更新该 TileLayer。

export const Map = () => {
    const { colorMode } = useColorMode();

    let state = { center: { lat: 51.505, lng: -0.09 }, zoom: 13 };

    const colorModeUrl = ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png']
    useEffect(() => {
      console.log(colorMode);
    }, [colorMode]);

    return (
        <MapContainer
            center={state.center}
            zoom={state.zoom}
            style={{ height: '100%' }}>
            <TileLayer url={colorMode === 'light' ? colorModeUrl[0] : colorModeUrl[1]} />
        </MapContainer>
    )
}

我正在使用 react-leaflet 来显示非地理地图。我还添加了一些用于缩放更改的事件。( onZoomEnd())

我想知道如何访问地图对象或地图组件并获取当前缩放级别。还是其他地图道具？

  <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                onZoomEnd={this.mapService.handleZoomstart(/* map.object */)}


               >
</Map

我需要在处理程序方法中访问地图对象

handleZoomstart = (map) => {
        // TODO handle move event
    };

是否可以使用 Leaflet 检查一个点是否在视口内？

我有center视口和zoom水平仪。是否可以计算仅具有这些值的边界？

我想创建一个按钮，其功能与传单地图中的工具栏相同。按下时，用户可以在 onCreate 函数上在地图上绘制图形，但我不知道如何使用此选项制作一个按钮来绘制多边形。

这是我初始化传单地图的组件代码：

export class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filenames: [],
      downloadURLs: [],
      lat: 42.696295,
      lng: 23.303643,
      zoom: 10,
      image: null,
      url: "",
      progress: 0,
      files: [],
      uploadValue: 0,
      filesMetadata: [],
      rows: [],
    };
  }
  //Set location when the map is visualized

  mapRef = createRef();



  onCreate = (e) => {
    var layer = e.layer;
    console.log("Polygon Cordinates", layer.getLatLngs());
    console.log("Log_Create_Shape: ", e);

    var drawedCord = layer.toGeoJSON().geometry.coordinates;
    for (const result of drawedCord) this.props.saveData(result);

    console.log("shape1", drawedCord);

    var …

我正在尝试订阅缩放更改事件，但无法获取每个缩放更改的更新。

我的目标是在缩放级别上实现标记缩放。像本例中的React-Leaflet：缩放后的​​刻度标记

但是v3中的react-leaflet没有MapContainer的onZoomChange事件。所以我无法获得缩放 DivIcon 的缩放更新

我试图获取鼠标在地图上单击的位置的坐标，但 .locate() 仅返回地图的中心坐标。有办法吗？附：我没有使用基于类的反应。谢谢

 <MapContainer
          center={[ 33.8735578, 35.86379]}
        zoom={9}
        scrollWheelZoom={true}
  
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
</MapContainer>

试图让 Leaflet.markercluster 与 react-leaflet 2 一起工作。

https://github.com/OpenGov/react-leaflet-cluster-layer似乎与 2.x 不兼容。

感谢任何让我入门的示例代码！