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

获取指定区域内的坐标点

项目介绍
使用方法
仓库地址

项目介绍

基于 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 } = configthis.pointGap = pointGap || 3this.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 = polylineconst 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}
}

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

参数	介绍
pointGap	每个点之间的距离
gapUnits	每个点距离的单位，可选为’degrees’
polyline	区域范围形成的一个多边形数据，经度和纬度以 , 隔开，每组经纬度以 ; 隔开，不同的多边形区域，以 **

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

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

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

获取的点位效果如图：

仓库地址

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

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

高德地图获取可视区域内四角坐标（东北，东南，西南，西北）
高德地图获取可视区域内四角坐标(东北,东南,西南,西北) 场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端.获取方法如下: // 初始化地图m ...
java图像处理－（指定区域内）灰度化、透明化（alpha通道）处理
java图像处理-(指定区域内)灰度化.透明化(alpha通道)处理 2016年07月25日 21:23:16 阅读数:3944 近日在一家小公司实习,老板要求我写一个图形编辑器,其中涉及到用java ...
iOS-自定义相机拍照获取指定区域图片
功能并不难,之所以被难住是因为把问题想复杂了,记录一下. 自定义的相机拍照使用AVCaptureSession,获取指定区域图片使用图片裁切功能,重点在于不能直接使用AVCaptureSession获 ...
oracle获取指定日期内工作日的天数或节假日天数
oracle 获取指定日期内工作日的天数不必拘泥,可以反向思考获取这段时期内周六日的天数,再用总天数减去周六日的天数,得到我们想要的获取时间段内所有日期 select to_date('202 ...
【JavaScript】如何获取指定范围内的随机数
如何获取指定范围内的随机数,要知道,JavaScript中用Math.random()生成随机小数,可以利用这一点,加上指定范围的处理,就可以做成自己想要的随机数文章目录 1. 函数介绍 2. 使用 ...
Python项目实践（一）去除PDF指定区域内的水印
目录前言对比图(水印去除前后) 一.原理二.代码实现三.使用教程 1. 文件夹目录(pic和res文件夹需提前创建好) 2. 执行第一步代码(注释掉其他代码,以下同理) 3. 执行第二步代码 ...
【教程】Spire.PDF教程：C# 从 PDF 页面的指定区域内提取文本
Spire.PDF是一个专业的PDF组件,能够独立地创建.编写.编辑.操作和阅读PDF文件,支持 .NET.Java.WPF和Silverlight. [下载Spire.PDF最新试用版] 有时我们可 ...
Python获取指定时间范围内的工作日、假日日、法定节假日
1 导库 import chinese_calendar import datetime import pandas as pd 2 指定时间范围 start_time = datetime.date ...
python获取图片某像素点位置_如何在python中获取图像中指定区域内的所有像素坐标？...
假设是矩形,可以使用^{}为左上角和右下角之间的点生成坐标矩阵.在X, Y = np.mgrid[xmin:xmax, ymin:ymax] 并用 ^{pr2}$ 编辑:任意形状正如马克·塞切尔指出 ...