mapbox - 如何沿线放置正方形？(Geojson+地图框)

Question

我有一个矩形，需要用正方形填充它。我找到了中心线，并想沿着这条线放置正方形。但是有没有什么简单的方法可以在 mapboxgl 中用任何其他库（如 turfjs）绘制一个正方形？比如设置正方形的中心和边长并获得正方形的坐标？有任何想法吗？因为用 geojson 放置圆圈不是问题，但对我来说，正方形似乎是个问题，因为我必须计算 4 个坐标。

Answer 1

有了草皮，您就有了解决此任务的正确工具。

一种方法是这样的：

1. 获取线距

2. 将线距离除以您想要的矩形数量

3. 使用 turf.along() 沿着你的线得到一个点

4. 使用 turf.buffer、turf.bbox 和 turf.bboxPolygon 在点位置上得到一个矩形

5. 通过 mapbox-gl-js 将所有内容绘制到地图上

这是一个代码示例。您可以点击“运行代码片段”来显示结果。

https://jsfiddle.net/andi_lo/3rc6vca3/

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-74.10931699675322, 4.61336863727521],
  zoom: 11,
});

map.on('load', () => {
  map.addSource('line', {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': [],
    },
  });

  map.addSource('rect', {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': [],
    },
  });

  map.addLayer({
    id: 'line_layer',
    source: 'line',
    type: 'line',
    paint: {
      'line-width': 3,
      'line-color': '#333',
    },
  });

  map.addLayer({
    id: 'rect_layer',
    source: 'rect',
    type: 'fill',
    paint: {
      'fill-color': '#00b7bf',
    },
  });

  const line = turf.lineString([[-74.07, 4.66], [-74.17, 4.56]]);
  const lineCollection = turf.featureCollection([line]);
  const lineDistance = turf.lineDistance(line);
  const rectCollection = turf.featureCollection([]);

  const RECT_COUNT = 7;
  const RECT_SIZE = 0.6;
  const BUFFER_STEPS = 32;
  const SEGMENTS = lineDistance / RECT_COUNT;
  const UNITS = 'kilometers';
  for(let i = 0; i <= RECT_COUNT; i++) {
    const point = turf.along(line, (SEGMENTS * i), UNITS);
    const buffered = turf.buffer(point, RECT_SIZE, UNITS, BUFFER_STEPS);
    const bbox = turf.bbox(buffered);
    const bboxPolygon = turf.bboxPolygon(bbox);
    rectCollection.features.push(bboxPolygon);
  }

  map.getSource('line').setData(lineCollection);
  map.getSource('rect').setData(rectCollection);
});

#map {
  height: 500px;
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<script src="https://npmcdn.com/@turf/turf@4.7.3/turf.min.js"></script>

<div id="map"></div>