如何将传单多边形框放大 5%？答案

【问题标题】：How to enlarge a leaflet polygon box by 5%?如何将传单多边形框放大 5%？
【发布时间】：2020-05-19 02:45:53
【问题描述】：

我通过使用传入数据的最远点的纬度和经度的最小值和最大值来创建一个正方形多边形。

$poly = " $maxLng $maxLat , $minLng $maxLat , $minLng $minLat , $maxLng $minLat , $maxLng $maxLat ";

但这意味着至少有两个标记总是这个框的边界。我怎样才能推出这些点并将盒子的整体尺寸在各个方向上扩大 5%，但我仍然需要每个角落的纬度/经度？

【问题讨论】：

您使用什么语言工作？您添加了 leaflet 标记，但它看起来不像 Javascript。
@IvanSanchez 糟糕，我错误地将创建 javascript 变量的 PHP 放入了其中。重要的是我从表格中使用的变量被表示出来，这更像是一个例子而不是确切的东西。
我认为您应该澄清您是否希望在 PHP 端或 JS 端（或任何）处理此问题，以及 5% 的增加是否与可见（屏幕）大小有关，大小以度为单位，或以米为单位的大小（因为这三件事是不同的）。
@IvanSanchez 好的，让我请你帮我把它变成一个更好的问题。现在，我通过将距西北最远、距东南最远的点作为我的边界来创建 4 个角。也许我应该使用其他东西，我应该使用什么？并且将其作为 javascript 答案将起作用，因为无论如何它都会被移到那个位置。
我已根据每个最小/最大纬度和经度添加或减去 0̷.2。这是一个不错的权宜之计，但使用传单实现此目的的一些方法会更好，并且可以使地图的外观和感觉更加一致。

标签： php leaflet

【解决方案1】：

一个如何使用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: '&copy; <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/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>


<div id="mapid"></div>

【讨论】：

@Grzegorz_T。这看起来棒极了。我知道一定有人知道比我做的更清洁的方法。我现在就试一试。