React leaflet draw - 标记图标和拖动处理程序缺失

Question

我正在使用反应传单绘制来绘制多边形和圆形.

但是当我选择编辑多边形时,没有移动的拖动处理程序和调整大小.

如果有任何人有同样的问题,如何解决这个问题？

这是代码

              <Map
                 style={this.leafletMapService.getMapStyle()}
                 selectArea={true}
                 onAreaSelected={(event) => this.handleAreaSelection(event)}
                 boxZoom={false}
                 ref={map => {this.map = map}}
                 center={this.props.center}
                 zoom={this.props.zoom}
                 minZoom={this.props.minZoom}
                 maxZoom={this.props.maxZoom}
                 attributionControl={false}
                 doubleClickZoom={false}
                 zoomControl={false}
                 editable={true}
                 onZoomEnd={this.handleZoomEnd}
                 bounceAtZoomLimits={false}
                 crs={this.leafletMapService.getNonGeographicMapCRS()}
                 dragging={!!this.props.selectedSection}
                 scrollWheelZoom={false}>
                <FeatureGroup>
                    <EditControl
                        position='topright'
                        onCreated={(event) => this.onCreatedHandler(event)}
                    />
                    {this.props.children}
                </FeatureGroup>
            </Map>

Answer 1

存在多个问题。

首先，您必须确保有一个简单的标记可见，但在我的情况下不可见。我的 CSS 中有一些隐藏标记的样式。

因此，请确保您可以在地图上显示标记。

强制样式都是两者leaflet.css，leaflet.draw.css因此在组件中添加这些行：

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css'

然后，如果您有标记图标错误，只需通过在下面添加以下行来替换图标

delete L.Icon.Default.prototype._getIconUrl;

        L.Icon.Default.mergeOptions({
            iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-icon.png',
            iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-icon.png',
            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-shadow.png',
        });

或如这个问题的答案中所述

未找到 React-Leaflet 标记文件