Draw

Example

Example Source Code

import React, { useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap } from '@mapbox-react/core'
import MapboxDraw from '@mapbox-web/draw'
import type { ChangeEvent } from 'react'
import type { Map } from 'mapbox-gl'

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()
  const [mode, setMode] = useState('')

  const draw = useRef<MapboxDraw>()

  const createdHandler = (map: Map) => {
    draw.current = new MapboxDraw(map, {
      userProperties: true,
    })
  }

  const changeMode = (e: ChangeEvent<HTMLSelectElement>) => {
    const newMode = e.target.value

    setMode(newMode)
    if (newMode === 'draw_text') {
      draw.current?.changeMode(newMode, {
        text: 'Text',
        'text-color': 'white',
        'text-size': 20,
      })
    } else if (newMode === 'draw_image') {
      draw.current?.changeMode(newMode, {
        imageId: 'logo',
        imageUrl: 'https://mapbox-web.github.io/mapbox-react/images/snowDrop.png',
      })
    } else {
      draw.current?.changeMode(newMode)
    }
  }

  return (
    <div className="map-wrapper">
      <MbMap
        ref={mapInst}
        center={mapCenter}
        zoom={zoom}
        pitch={pitch}
        onCreated={createdHandler}
      >
        <div style={{ position: 'absolute', top: '10px', left: '10px' }}>
          <div className="actions" style={{ color: 'white' }}>
            Choose Mode：
            <select
              value={mode}
              style={{ width: '250px' }}
              onChange={changeMode}
            >
              <optgroup label="文本(Text)">
                <option value="draw_text">文本(Text)</option>
              </optgroup>
              <optgroup label="线状(Line)">
                <option value="draw_line_string">折线(Line)</option>
                <option value="draw_curve">曲线(Curve)</option>
                <option value="draw_arc">弧线(Arc)</option>
              </optgroup>
              <optgroup label="面状(Area)">
                <option value="draw_polygon">多边形(Polygon)</option>
                <option value="draw_circle">圆(Circle)</option>
                <option value="draw_ellipse">椭圆(Ellipse)</option>
                <option value="draw_rectangle">矩形(Rectange)</option>
                <option value="draw_sector">扇形(Sector)</option>
                <option value="draw_lune">弓形(Lune)</option>
                <option value="draw_closed_curve">
                  闭合曲面(Closed Curve)
                </option>
              </optgroup>
              <optgroup label="箭头(Arrow)">
                <option value="draw_fine_arrow">细直箭头(Fine Arrow)</option>
                <option value="draw_assault_direction">
                  突击方向(Assault Direction)
                </option>
                <option value="draw_double_arrow">钳击(Double Arrow)</option>
                <option value="draw_attack_arrow">
                  进攻箭头(Attack Arrow)
                </option>
                <option value="draw_tailed_attack_arrow">
                  燕尾进攻箭头(Tailed Attack Arrow)
                </option>
                <option value="draw_squad_combat">
                  战斗小队(Squad Combat)
                </option>
              </optgroup>
              <optgroup label="图片(Image)">
                <option value="draw_image">图片(Image)</option>
              </optgroup>
            </select>
          </div>
        </div>
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))