在已有坐标中过滤出在中国境内的坐标

1.场景如下图:大屏展示中国地图中,需要通过后端范围的经纬度数据标识出一些地理位置指向一个原点,然而这些数据不一定是国内的位置,线条会辐射出地图外,因此需要过滤
这个图的绘制可以参考https://www.makeapie.com/editor.html?c=xD4a1EBnvW

2.解决:Turf.js(一个空间计算的库) + china.json(中国地图)

Turf.js的pointsWithinPolygon是一个能找到落在(多个)多边形内的点的api。需要提供points(需要过滤的坐标)、polygons(封闭图形坐标)
注意:polygons一定要是能绘制出封闭图形、首尾相连(数组第一位和数组最后一位相同)的坐标数组,开始不知道这点一直去找整个中国边界的坐标数据,由于数据不符合要求的原因api一直报错
于是大佬提示:echarts能绘制出中国地图各省的边界那就直接用它的坐标就行啊,于是polygons的数据用了china.json的各省边界坐标数据

以下是取出china.json省份边界坐标的方法

let china = require('../../../../public/static/map/china.json') //我这用的是本地
let chinaCoordinates = [] //存放各个省份边界数组
china.features.forEach((item, index) => {
  if (index === 11) {
    chinaCoordinates.push([item.geometry.coordinates[0]])
    chinaCoordinates.push([item.geometry.coordinates[1]])
  } else if (index === 13) { 
    chinaCoordinates.push(item.geometry.coordinates[0])
    chinaCoordinates.push(item.geometry.coordinates[1])
  } else {
    chinaCoordinates.push(item.geometry.coordinates)
  }
})

拿到后端数据后,过滤出中国境内数据

finalPoint = [] //存放在中国境内的坐标点
let borderPoint = turf.points(data.map(item => [ item.supplierLongitude, item.supplierLatitude])) //data为后端获取的需要绘制的点坐标
chinaCoordinates.forEach((item, index) => { //各个省份遍历
  let ptsWithin = turf.pointsWithinPolygon(borderPoint, turf.polygon(item)) //ptsWithin为在该省份的点
  finalPoint = finalPoint.concat(ptsWithin.features)
})

这里要注意:仔细看pointsWithinPolygon中points、polygons传参格式

posted @ 2022-01-18 19:37  一bottle陈  阅读(270)  评论(2编辑  收藏  举报