时间戳

首页 > 解决方案 > 在图像上绘制 React 传单

react-leaflet - 在图像上绘制 React 传单

问题描述

我正在尝试使用react-leaflet的绘图功能在哪里不是绘制地图，而是在图片上绘制现在我必须使用里面的功能你有什么建议吗？或者如果无法完成

<Map center={center} zoom={ZOOM_LEVEL} ref={mapRef} >
            < Image />
          <FeatureGroup>
            <EditControl
              position="topright"
              onCreated={_onCreate}
              onEdited={_onEdited}
              onDeleted={_onDeleted}
              draw={{
                rectangle: false,
                polyline: false,
                circle: false,
                circlemarker: false,
                marker: false,
              }}
            />
          </FeatureGroup>
          </Map>

标签： react-leafletreact-leaflet-draw

解决方案

您必须使用 MapContainer 并且在其中您必须使用 ImageOverlay 并且对于 ImageOverlay 您必须提供图像 url 或 base64 图像。

 <MapContainer
      // ref={mapRef}
      className="markercluster-map"
      center={[-500, 550]}
      zoom={-2}
      minZoom={-18}
      maxZoom={18}
      style={{ height: "70vh", width: "70%" }}
      crs={CRS.Simple}
    >
      <ImageOverlay
        url={imageUrl}
        bounds={bounds}
        opacity={0.8}
        zIndex={10}
        scale={1}
        onClick={handleClick}
      >
        <FeatureGroup
          ref={(featureGroupRef) => {
            onFeatureGroupReady(featureGroupRef);
          }}
        >
          <EditControl onEdited={onEdited} onCreated={onCreated} />
        </FeatureGroup>
      </ImageOverlay>
    </MapContainer>

推荐阅读