我使用传入数据最远点的纬度和经度的最小值和最大值创建一个正方形多边形。
$poly = " $maxLng $maxLat , $minLng $maxLat , $minLng $minLat , $maxLng $minLat , $maxLng $maxLat ";
但是这意味着至少两个标记始终是此框的边界。我该如何在各个方向上将点推开并将框的整体大小扩大5%,但仍然需要每个角的纬度/经度?
关于如何使用turfjs
库和transformScale
方法的小例子
const map = L.map('mapid').setView([52.308478623663355, 19.281005859375004], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const test = [
[54.80068486732236, 18.292236328125004],
[53.89786522246521, 14.611816406250002],
[51.055207338584964, 15.281982421875002],
[49.57510247172322, 19.138183593750004],
[50.57626025689928, 23.642578125000004],
[52.214338608258224, 23.148193359375004],
[52.86912972768522, 23.741455078125],
[54.29729354239267, 22.928466796875004],
[54.29729354239267, 19.489746093750004],
[54.80068486732236, 18.292236328125004]
];
L.polygon(test, {
color: 'red'
}).addTo(map);
var poly = turf.polygon([test]);
var scaledPoly = turf.transformScale(poly, 1.05);
const {
coordinates
} = scaledPoly.geometry;
L.polygon(coordinates, {
color: 'white'
}).addTo(map);
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
#mapid {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<div id="mapid"></div>