javascript - React 传单绘制 - 缺少标记图标和拖动处理程序

Question

我正在使用 React leaflet draw 来绘制多边形和圆形。

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

如果有人遇到同样的问题，如何解决？

这是代码

              <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 中有一些完全隐藏标记的样式。

因此请确保您可以在 map 上显示标记。

强制样式都是 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 marker files not found