Как вы изменяете свойства стиля response-map-gl программно? - PullRequest
Новая
       36

Как вы изменяете свойства стиля response-map-gl программно?

0 голосов
/ 06 апреля 2019

Я пытаюсь написать свой собственный модуль react-map-gl-draw-polygon для react-map-gl.Поиск по максимуму и минимуму и не может найти последовательный способ нарисовать область поиска.Кроме того, я больше «реагирую», чем CSS / UI / UX, поэтому очень быстро застреваю.В любом случае, мы идем.

Структура, с которой я поехал: 

map.js
  - <ReactmapGL>
     - <Geocoder />
     - <**Draw Polygon Here** />
     - <RendeMarkers />
  - </ReactmapGL>

Геокодер , например, принимает this.mapRef в качестве опоры + свою собственную React.createRef() / DOM также используется в качестве опоры - и затем имеет обработчики щелчков для перемещения карты / изменения состояния в зависимости от того, какую область вы искали (Чикаго, Лондон и т. Д.).

Если я использую тот же подходдля полигонов <DrawPolygon /> выглядит так: 

                        <DrawPolygon
                            ref={this.mapRef}
                            isDrawing={this.state.isDrawing}
                            onComplete={this.handleCompletePolygon}
                            mapboxApiAccessToken={REACT_APP_MAPBOX_KEY}
                            />

                        <Geocoder
                            mapRef={this.mapRef}
                            containerRef={this.geocoderContainerRef}
                            onResult={this.handleOnResult}
                            onViewportChange={this.handleGeocoderViewportChange}
                            mapboxApiAccessToken={REACT_APP_MAPBOX_KEY}
                        />

Все это выглядит хорошо для меня - но потом я застреваю при изменении курсора на карандаш.

Поток: пользователь щелкает btn => изменяет состояние на isDrawing: true =>, затем в зависимости от того, является ли isDrawing истинным => найти какой-либо способ программно изменить .mapboxgl-canvas-container {... или стиль его курсора.

Так что застряли на:

  • как бы вы программно изменили курсор на карандаш?

  • как бы вы наложили CSS, нарисованную линию поверхresponse-map-gl?

Пожалуйста, помогите!?

...