Javascript：用纬度和经度减去多边形答案

【问题标题】：Javascript: Subtract polygons with Latitude and LongitudeJavascript：用纬度和经度减去多边形
【发布时间】：2015-01-30 09:41:05
【问题描述】：

我在使用 Javascript 和 Google Maps API 进行此操作时遇到问题。

我有一个带有边界（纬度和经度）的矩形。另外，我有一个多边形及其边界（每个点的纬度和经度）。

我需要得到一个新的多边形，第一个矩形没有多边形，所以我需要将多边形减去矩形并得到新多边形的边界。

我该怎么做？

提前致谢！

【问题讨论】：

您要切饼干吗？那么我的意思是您希望在范围（矩形）内减去的多边形？
我要减去的三角形在主矩形内
所以你想创建一个孔效果？
是的，我想用多边形的形状去掉这部分，得到第一个没有多边形的矩形。
请分享您目前拥有的代码。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

给你：

// Create a rectangle
var rectangle = new google.maps.Rectangle({
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#FF0000',
    fillOpacity: .6,
    bounds: new google.maps.LatLngBounds(
        new google.maps.LatLng(33, 3),
        new google.maps.LatLng(44, 25)
    ),
    zIndex: 0
});

// Get the rectangle bounds
var rb = rectangle.getBounds();

// Create a triangle
var triangle = new google.maps.Polygon({
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#00FF00',
    fillOpacity: .6,
    paths: [
        new google.maps.LatLng(39, 4),
        new google.maps.LatLng(34, 24),
        new google.maps.LatLng(43, 24),
        new google.maps.LatLng(39, 4)
    ],
    zIndex: 1
});

// Get rectangle points coordinates (path)
var rectangleCoords = [
    new google.maps.LatLng(rb.getNorthEast().lat(), rb.getSouthWest().lng()),
    new google.maps.LatLng(rb.getNorthEast().lat(), rb.getNorthEast().lng()),
    new google.maps.LatLng(rb.getSouthWest().lat(), rb.getNorthEast().lng()),
    new google.maps.LatLng(rb.getSouthWest().lat(), rb.getSouthWest().lng()),
    new google.maps.LatLng(rb.getNorthEast().lat(), rb.getSouthWest().lng())
];

// Create polygon from rectangle coords and triangle path
var polygon = new google.maps.Polygon({
    paths: [rectangleCoords, triangle.getPath()],
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#FF0000',
    fillOpacity: .6,
    map: map
});

注意：一个更简单的解决方案是创建像三角形一样的矩形（多边形而不是矩形），这样你就可以直接调用getPath()。

希望这会有所帮助。下面是一个工作演示。

JSFiddle demo

【讨论】：

谢谢，工作正常。我正在测试 turf.js 库来减去多边形，但这对我来说很好。另外，我将使用 Adammck Mask 来绘制蒙版。非常感谢！！！
不客气。只需将链接粘贴到您提到的库以供进一步参考：Turfjs - adammck gmaps-v3-mask。