获取指定区域内的坐标点位，在线查看经纬坐标

项目介绍

基于 turfjs 库的很简单的封装，实现输入范围的多边形数据，返回指定坐标间隔的点位。
多边形数据可以从高德地图API获取，例如：（该key为方便大家测试使用，请不要滥用哦。）

https://restapi.amap.com/v3/config/district?keywords=鹤城区&subdistrict=0&key=需要自行前往高德地图申请一个&extensions=all

结果中的polyline则是我们的输入值。

使用方法

使用方法很简单，由于依赖于turfjs，所以先安装turf。

npm install @turf/turf

然后是一个简单的封装

import * as turf from '@turf/turf'

export default class PointsInArea {
  constructor(config) {
    const { pointGap, polylineArray, polyline, gapUnits } = config
    this.pointGap = pointGap || 3
    this.polylineArray = polylineArray // 经纬度坐标点的数组 [[[ 110.088289, 27.504098 ],[ 110.086623, 27.505559 ],...]]
    this.gapUnits = gapUnits || 'kilometers'
    if (polyline) {
      // 描绘多边形的经纬度字符串
      // 不同的点用;分割
      // 不同的多边形区域，通过|分割 
      // e.g. '109.466941,26.831946;109.469596,26.832381;109.471567,26.833027|109.471963,26.833175;109.472047,26.833207;109.472336,26.833345'
      this.polyline = polyline
      const multiPloy = polyline.split('|')
      this.polylineArray = multiPloy.map(v => {
        let nerArr = v.split(';')
        nerArr = nerArr.map(v => v.split(','))
        nerArr = nerArr.map(v => [Number(v[0]), Number(v[1])])
        return nerArr
      })
    }
  }

  generatePointsWithinGrid(singlePloy) {
    const longitude = singlePloy.map(v => v[0])   //所有经度的数组 [110.058288,110.0606,110.061639,...]
    const latitude = singlePloy.map(v => v[1]) // 所有纬度的数组 [27.73632, 27.731306, 27.727857, 27.726446,...]

    const minLongitude = Math.min.apply(Math, longitude) // 最西边
    const maxLongitude = Math.max.apply(Math, longitude) // 最东边
    const minLatitude = Math.min.apply(Math, latitude) // 最南边
    const maxLatitude = Math.max.apply(Math, latitude) // 最北边

    const myBbox = [minLongitude, minLatitude, maxLongitude, maxLatitude]
    var cellSide = this.pointGap; // 距离 几公里打一个点
    var options = { units: this.gapUnits }; // 距离单位
    var pointInGrid = turf.pointGrid(myBbox, cellSide, options);
    return pointInGrid
  }

  filterPointWithinPolygon(pointInGrid, singlePloy) {
    const polygon = turf.lineToPolygon(turf.lineString(singlePloy))
    const ptsWithin = turf.pointsWithinPolygon(pointInGrid, polygon);
    return ptsWithin.features.map(v => v.geometry.coordinates)
  }

  run() {
    let result = []
    this.polylineArray.forEach(v => {
      const pointInGrid = this.generatePointsWithinGrid(v)
      result = result.concat(this.filterPointWithinPolygon(pointInGrid, v))
    })
    return result
  }
}

使用起来就两行，入参主要有三个

如果是用的高德地图API拿到的多边形数据，那么就不用处理，直接传入即可。

const pta = new PointsInArea({ polyline: data, pointGap: '1' })
const result = pta.run()

这里ployline数据传入从高德地图api获得的数据即可。

获取的点位效果如图：

仓库地址

仓库地址 points-in-area 如果对你有帮助的话，还请各位不要吝啬您的star 😄

在线查看坐标标注：坐标点位预览 方便检查输出数据是否符合预期，右下角还可以直接查询城市的边界，方便判断。