mapbox-gl-draw-circle Input data given to 'mapbox-gl-draw-cold' is not a valid GeoJSON object

Input data given to 'mapbox-gl-draw-cold' is not a valid GeoJSON object

Open mohong opened this issue 4 years ago • 7 comments

when I change mode to 'drag_circle'……

dependents:

 "@mapbox/mapbox-gl-draw": "^1.1.2",
    "core-js": "^3.6.4",
    "gl-draw-foxgis": "github:wanyanyan/gl-draw-foxgis",
    "mapbox-gl": "^1.10.1",
    "mapbox-gl-draw-circle": "^1.1.1",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"

vue code:

<template>
  <div class="mapbox">
    <div id="map"></div>
    <button @click="drawCircle">画圆</button>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import Draw from '@mapbox/mapbox-gl-draw'
import { CircleMode, DragCircleMode, DirectMode, SimpleSelectMode } from 'mapbox-gl-draw-circle'

mapboxgl.accessToken = 'my token';

export default {
  name: 'mapbox',
  mounted () {
    this.map = null
    this.draw = null
    this.initMap()
  },
  methods: {
    initMap () {
      const map = new mapboxgl.Map({
          container: 'map',
          zoom: 10,
          style: 'mapbox://styles/mapbox/streets-v9'
      });
      map.on('load', () => {
        console.log('load')
        this.map = map
        this.initDraw(map)
      })
    },
    initDraw (map) {
      this.draw = new Draw({
        userProperties: true,
        displayControlsDefault: false,
        modes: {
          ...Draw.modes,
          draw_circle: CircleMode,
          drag_circle: DragCircleMode,
          direct_select: DirectMode,
          simple_select: SimpleSelectMode
        }
      })
      map.addControl(this.draw)
    },
    drawCircle () {
      this.draw.changeMode('drag_circle')
    }
  }
}
</script>

<style scoped lang="stylus">
#map
  height 500px
</style>