React 传单绘制 - 缺少标记图标和拖动处理程序
React leaflet draw - marker icon and drag handler is missing
我正在使用 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>
存在多个问题。
首先,您必须确保可以看到一个简单的标记,而在我的情况下则没有。
我的 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
我正在使用 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>
存在多个问题。
首先,您必须确保可以看到一个简单的标记,而在我的情况下则没有。 我的 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