Import/Export Data

Example

Example Source Code

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

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 savedData = useRef('')
  const features = useRef<Record<string, any>>({})

  const createdHandler = (map: any) => {
    draw.current = new MapboxDraw(map, {
      userProperties: true,
    })
    map.on('draw.create', (e) => {
      features.current[e.features[0].id] = e.features[0]
    })
  }

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

  const clearData = () => {
    draw.current?.changeMode('simple_select')
    for (const featureId of Object.keys(features.current)) {
      draw.current?.delete([featureId])
    }
  }
  const exportData = () => {
    const data = JSON.stringify(Object.values(features.current))
    savedData.current = data
    // eslint-disable-next-line no-alert
    window.alert(data)
  }
  const importData = () => {
    JSON.parse(savedData.current).forEach((d) => draw.current?.add(d))
  }

  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>
            &nbsp;&nbsp;
            <a
              href="javascript:;"
              style={{ color: 'white' }}
              onClick={clearData}
            >
              Clear
            </a>
            &nbsp;&nbsp;
            <a
              href="javascript:;"
              style={{ color: 'white' }}
              onClick={exportData}
            >
              Export Data
            </a>
            &nbsp;&nbsp;
            <a
              href="javascript:;"
              style={{ color: 'white' }}
              onClick={importData}
            >
              Import Data
            </a>
            &nbsp;&nbsp;
          </div>
        </div>
      </MbMap>
    </div>
  )
}

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