如何沿线放置正方形? (Geojson+地图框)
How to place squares along the line? (Geojson+mapbox)
我有一个矩形,需要用正方形填充它。
我找到中心线并想沿着该线放置方块。
但是有没有什么简单的方法可以在 mapboxgl 中与任何其他库(如 turfjs)一起绘制正方形?
就像设置正方形的中心和边长并获得正方形的坐标?
有任何想法吗?
因为用 geojson 放置圆圈不是问题,但对我来说用正方形看起来像个问题,因为我必须计算 4 个坐标。
有了 turf,您就有了解决此任务的合适工具。
一种方法是这样的:
获取直线距离
用你想要的矩形数量除以线的距离
使用 turf.along() 沿着你的线得到一个点
使用turf.buffer、turf.bbox和turf.bboxPolygon在点位置得到一个矩形
通过 mapbox-gl-js 将所有内容绘制到地图上
这是一个代码示例。您可以点击 "run code snippet" 来显示结果。
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>
我有一个矩形,需要用正方形填充它。 我找到中心线并想沿着该线放置方块。 但是有没有什么简单的方法可以在 mapboxgl 中与任何其他库(如 turfjs)一起绘制正方形? 就像设置正方形的中心和边长并获得正方形的坐标? 有任何想法吗? 因为用 geojson 放置圆圈不是问题,但对我来说用正方形看起来像个问题,因为我必须计算 4 个坐标。
有了 turf,您就有了解决此任务的合适工具。
一种方法是这样的:
获取直线距离
用你想要的矩形数量除以线的距离
使用 turf.along() 沿着你的线得到一个点
使用turf.buffer、turf.bbox和turf.bboxPolygon在点位置得到一个矩形
通过 mapbox-gl-js 将所有内容绘制到地图上
这是一个代码示例。您可以点击 "run code snippet" 来显示结果。
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>