我想用 Javascript API V3 创建一个甜甜圈(内部空白,像一个洞)

2023-11-22

我想在我的 Javascript Google API V3 中创建一个洞,所以我按照 Beginning Google Map API V3 进行操作。但代码正在渲染整个区域。这是我的 JavaScript 代码。

(function() {
    window.onload = function() {
        // Creating a map
        var options = {
            zoom: 6,
            center: new google.maps.LatLng(36.5, -79.8),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map'), options);

        // Creating an array with the points for the outer polygon
        var polyOuter = [
            new google.maps.LatLng(37.303, -81.256),
            new google.maps.LatLng(37.303, -78.333),
            new google.maps.LatLng(35.392, -78.333),
            new google.maps.LatLng(35.392, -81.256)
        ];

        // Creating an array with the points for the inner polygon
        var polyInner = [
            new google.maps.LatLng(36.705, -80.459),
            new google.maps.LatLng(36.705, -79),
            new google.maps.LatLng(35.9, -79),
            new google.maps.LatLng(35.9, -80.459)
        ];

        var points = [polyOuter, polyInner];

        // Creating the polygon
        var polygon = new google.maps.Polygon
        ({
            paths: points,
            map: map,
            strokeColor: '#ff0000',
            strokeOpacity: 0.6,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        }); 
    };
})();

其中一条路径必须恢复,以便在不同方向绘制多边形,例如:

var polyInner = [
    new google.maps.LatLng(35.9, -80.459),
    new google.maps.LatLng(35.9, -79),
    new google.maps.LatLng(36.705, -79),
    new google.maps.LatLng(36.705, -80.459)
];

我的假设是,原因是 SVG 或画布渲染闭环的方式。如果我没记错的话解释在于非零缠绕规则. 请参阅维基百科的解释.

外部路径是顺时针绘制的,内部路径是逆时针绘制的。

将计数器设置为零。在对象区域中选取一个点,并在对象空间外的方向上画一条线。如果该线与顺时针路径交叉,则加一。如果该线与逆时针路径段交叉,则减一。如果所选点的最终结果非零,则浏览器将填充该区域。如果最终结果为零,则浏览器不会填充它。

因此,如果您在“洞”中拾取点,结果将为零并且区域不会被填充。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我想用 Javascript API V3 创建一个甜甜圈(内部空白,像一个洞) 的相关文章

随机推荐