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

Я использую отрисовку листовок 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>

person Stevan Tosic    schedule 19.09.2018    source источник
comment
Пожалуйста, создайте фрагмент кода, который демонстрирует вашу проблему   -  person streletss    schedule 21.09.2018
comment
Есть много зависимостей, и я не могу создать фрагмент кода. Мне нужно включить листовку, буклет-буклет, рисунок-буклет, рисунок-буклет. Я не смог этого сделать. Вы можете помочь мне, отредактировав мой вопрос?   -  person Stevan Tosic    schedule 21.09.2018


Ответы (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 не найдены

person Stevan Tosic    schedule 25.09.2018