【mapbox for javascript】绘制多边形图层并可进行编辑图层

 // 初始化点线面source对象
const jsonLine = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: []
      }
    }
  ]
}
const jsonPoint = {
  type: 'FeatureCollection',
  features: []
}
const jsonFull = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          []
        ]
      }
    }
  ]
}

// 清除draw资源图层
export function clearLayerAndSource (map) {
  if (map.getSource('circlePlan')) {
    map.removeLayer('circlePlan')
    map.removeSource('circlePlan')
  } else if (map.getLayer('silmp')) {
    map.removeLayer('silmp')
    map.removeSource('silmp')
  }
  if (map.getLayer('line')) {
    map.removeLayer('line')
  }
  if (map.getLayer('line')) {
    map.removeLayer('line')
  }
  if (map.getSource('line')) {
    map.removeSource('line')
  }
  if (map.getLayer('points')) {
    map.removeLayer('points')
  }
  if (map.getSource('points')) {
    map.removeSource('points')
  }
  if (map.getLayer('polygon')) {
    map.removeLayer('polygon')
  }
  if (map.getSource('polygon')) {
    map.removeSource('polygon')
  }
  if (map.getLayer('line-move')) {
    map.removeLayer('line-move')
  }
  if (map.getSource('line-move')) {
    map.removeSource('line-move')
  }
  if (map.getLayer('points-area')) {
    map.removeLayer('points-area')
  }
  if (map.getSource('points-area')) {
    map.removeSource('points-area')
  }
  if (map.getLayer('line-area-stroke')) {
    map.removeLayer('line-area-stroke')
  }
  if (map.getSource('line-area-stroke')) {
    map.removeSource('line-area-stroke')
  }
  if (map.getLayer('urban-areas-fill')) {
    map.removeLayer('urban-areas-fill')
  }
  if (map.getSource('line-area')) {
    map.removeSource('line-area')
  }
}
// 绘制多边形
export function drawMy (map) {
  let num = 0 // 人造下标，用于辨识你在地图中点击的哪个点位，不可或缺
  let isDraw = true // 用于控制绘制状态
  map.addSource('line', {
    type: 'geojson',
    data: jsonLine
  })
  map.addSource('points', {
    type: 'geojson',
    data: jsonPoint
  })
  map.addSource('line-move', {
    type: 'geojson',
    data: jsonLine
  })
  map.addSource('silmp', {
    type: 'geojson',
    data: jsonFull
  })
  map.addLayer({
    id: 'line',
    type: 'line',
    source: 'line',
    paint: {
      'line-color': '#ff0000',
      'line-width': 2,
      'line-opacity': 0.65
    }
  })
  map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'points',
    paint: {
      'circle-color': '#ffffff',
      'circle-radius': 3,
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ff0000'
    }
  })
  map.addLayer({
    id: 'line-move',
    type: 'line',
    source: 'line-move',
    paint: {
      'line-color': '#ff0000',
      'line-width': 2,
      'line-opacity': 0.65
    }
  })
  map.addLayer({
    id: 'silmp',
    type: 'fill',
    source: 'silmp',
    paint: {
      'fill-color': '#e6205e',
      'fill-opacity': 0.6
    }
  })
  map.on('click', (_e) => {
    if (!isDraw) return
    const pointLngLat = [_e.lngLat.lng, _e.lngLat.lat]
    const point = {
      type: 'Feature',
      properties: {
        pointName: num
      },
      geometry: {
        type: 'Point',
        coordinates: pointLngLat
      }
    }
    jsonPoint.features.push(point)
    jsonLine.features[0].geometry.coordinates.push(pointLngLat)
    jsonFull.features[0].geometry.coordinates[0].push(pointLngLat)
    map.getSource('line').setData(jsonLine)
    map.getSource('points').setData(jsonPoint)
    num += 1
  })
  map.on('mousemove', (_e) => {
    if (!isDraw) return
    const pointLngLat = [_e.lngLat.lng, _e.lngLat.lat]
    if (jsonPoint.features.length > 0) {
      const prev = jsonLine.features[0].geometry.coordinates[jsonLine.features[0].geometry.coordinates.length - 1]
      const jsonLineTemp = {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [prev, pointLngLat]
        }
      }
      map.getSource('line-move').setData(jsonLineTemp)
    }
  })
  map.on('contextmenu', (_e) => {
    if (!isDraw) return
    const pointLngLat = [_e.lngLat.lng, _e.lngLat.lat]
    const point = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: pointLngLat
      },
      properties: {
        pointName: num
      }
    }
    jsonPoint.features.push(point)
    jsonLine.features[0].geometry.coordinates.push(pointLngLat)
    jsonLine.features[0].geometry.coordinates.push(jsonLine.features[0].geometry.coordinates[0])
    jsonFull.features[0].geometry.coordinates[0].push(pointLngLat)
    jsonFull.features[0].geometry.coordinates[0].push(jsonFull.features[0].geometry.coordinates[0][0])
	 // 你可以在这里直接拿到想要的geoJson数据 [jsonLine, jsonPoint, jsonFull]
    map.getSource('line').setData(jsonLine)
    map.getSource('points').setData(jsonPoint)
    map.getSource('silmp').setData(jsonFull)
    map.removeLayer('line-move')
    isDraw = false
  })
}
 // 编辑面
export function dragPointForSimple (map, that) {
  let temPoint = null
  // 鼠标移动
  function onMove (e) {
    const coords = e.lngLat
    map.getCanvasContainer().style.cursor = 'grabbing'
    jsonPoint.features[temPoint].geometry.coordinates = [coords.lng, coords.lat]

    jsonLine.features[0].geometry.coordinates[temPoint] = [coords.lng, coords.lat]
    jsonLine.features[0].geometry.coordinates[jsonLine.features[0].geometry.coordinates.length - 1] = jsonLine.features[0].geometry.coordinates[0]

    jsonFull.features[0].geometry.coordinates[0][temPoint] = [coords.lng, coords.lat]
    jsonFull.features[0].geometry.coordinates[0][jsonFull.features[0].geometry.coordinates[0].length - 1] = jsonFull.features[0].geometry.coordinates[0][0]
	// 你在这里可以拿到经过编辑以后的geoJson数据 【jsonPoint，jsonLine， jsonFull】
    map.getSource('points').setData(jsonPoint)
    map.getSource('line').setData(jsonLine)
    map.getSource('silmp').setData(jsonFull)
  }
  // 鼠标松开
  function onUp (e) {
    map.getCanvasContainer().style.cursor = ''
    map.off('mousemove', onMove)
    map.off('touchmove', onMove)
  }
  // 鼠标hover
  map.on('mouseenter', 'points', (e) => {
    map.setPaintProperty('points', 'circle-color', '#3bb2d0')
    map.getCanvasContainer().style.cursor = 'move'
  })
  // 鼠标离开
  map.on('mouseleave', 'points', () => {
    map.setPaintProperty('points', 'circle-color', '#3887be')
    map.getCanvasContainer().style.cursor = ''
  })
  // 鼠标按下
  map.on('mousedown', 'points', (e) => {
    temPoint = e.features[0].properties.pointName
    e.preventDefault()
    map.getCanvasContainer().style.cursor = 'grab'
    map.on('mousemove', onMove)
    map.once('mouseup', onUp)
  })

  map.on('touchstart', 'points', (e) => {
    if (e.points.length !== 1) return
    e.preventDefault()
    map.on('touchmove', onMove)
    map.once('touchend', onUp)
  })
}

这个工具直接放到工具文件可以传入所需参数即可使用