Question

我正在使用react传单绘制来绘制多边形和圆形。

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

如果任何一个都相同，该如何解决？

这是代码

              <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 marker files not found

反应传单绘制-标记图标和拖动处理程序丢失

1 个答案: