react接入高德地图，并转换GeoHash值之（准确渲染出多边形内部所有的点）

上一期我们实现了多边形区域范围内的选中，但是是有局限性的，目前的计算方式是，最大经纬度到最小经纬度两个点定位出来的矩形范围。这不符合实际需求，所以进行优化.

首先我们用到 Turf.js 库，里面的polygon方法和booleanPointInPolygon方法

polygon方法是用来定线的

booleanPointInPolygon则是用来判断某一个点是否在线内

优化创建GeoHash文章中的代码

// 用户对多边形的编辑结束，创建多边形的范围的标注
const createpolyCLose = () => {
    polyEditorObj.on('end', function (event: any) {
      const coordinates = event.target._opts.path; 
      coordinates.forEach((item) => {
        createa(path(item, 6))
      })
    });
    polyEditorObj.close();
    // 只有通过add方法创建的覆盖物才能通过remove方法删除
    // 编辑完成移除多边形
    polygonObj && mapObj.remove(polygonObj);
}

import * as turf from '@turf/turf'
const path = (coordinates: Array<Array<number>>, numberType: number) => {
  let minlat = coordinates[0][1]; // 表示最小纬度，即该区域的南侧边界；
  let maxlat = coordinates[0][1]; // 表示最大纬度，即该区域的北侧边界；
  let minlon = coordinates[0][0]; // 表示最大经度，即该区域的东侧边界。
  let maxlon = coordinates[0][0]; // 表示最小经度，即该区域的西侧边界；

  for (let i = 1; i < coordinates.length; i++) {
    if (coordinates[i][1] < minlat) {
      minlat = coordinates[i][1];
    }
    if (coordinates[i][1] > maxlat) {
      maxlat = coordinates[i][1];
    }
    if (coordinates[i][0] < minlon) {
      minlon = coordinates[i][0];
    }
    if (coordinates[i][0] > maxlon) {
      maxlon = coordinates[i][0];
    }
  }
  // 获取到每一个点的边
  const polygon = turf.polygon([[...coordinates, coordinates[0]]]);

  let list: Array<any> = [];
  // 通过最大经纬度、最小经纬度获取所有的点
  geohash.bboxes(minlat, minlon, maxlat, maxlon, numberType).map((item) => {
    // 获取到每一个矩形的四个点
    const [lat_min=0, lon_min=0, lat_max=0, lon_max=0] = geohash.decode_bbox(item);
    // 通过四个点获取每一个矩形的圆心
    const center_lat = (lat_min + lat_max) / 2;
    const center_lon = (lon_min + lon_max) / 2;
    // 判断每一个圆心是否在当前的边内，如果在则创建。如果不在则过滤掉
    if (turf.booleanPointInPolygon([center_lon, center_lat], polygon)) {
      list.push(item);
    }
  })
  return list;
}