在图像上绘制 React 传单

【问题标题】：React leaflet draw on image在图像上绘制 React 传单
【发布时间】：2021-04-15 17:27:59
【问题描述】：

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

<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-leaflet react-leaflet-draw

【解决方案1】：

您必须使用 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>

【讨论】：