Реагировать на рисование листовок - отсутствует значок маркера и обработчик перетаскивания - PullRequest
Новая
       55

Реагировать на рисование листовок - отсутствует значок маркера и обработчик перетаскивания

0 голосов
/ 19 сентября 2018

Я использую реактивную листовку для рисования многоугольников и окружностей.

Но когда я выбрал редактировать многоугольник, для перемещения и изменения размера нет обработчика перетаскивания.

enter image description here

Как решить эту проблему, если у кого-то есть такой же?

Это код 

              <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>

1 Ответ

0 голосов
/ 25 сентября 2018

Было несколько проблем.

Во-первых, вы должны быть уверены, что виден простой маркер, которого не было в моем случае.В моем 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 не найдены

...