Question

我正在尝试使用google形状API绘制多个多边形。我需要得到两个多边形的交集。

在这里，我可以通过给出每个多边形的路径数组来绘制背景多边形（黑色）。下面是我的代码，这里我给MVC数组作为多边形的路径。

我只是希望交叉区域是单独的颜色。请检查代码后附带的屏幕截图链接。

var bgAreaCoordinates = [];

var bgbounds = map.getBounds(); // Boundary coordinates of the visible area of map

var NE = bgbounds.getNorthEast();

var SW = bgbounds.getSouthWest();

var bgPathCoordinates = [NE, new google.maps.LatLng(NE.lat(),SW.lng()),
                                 SW, new google.maps.LatLng(SW.lat(),NE.lng())]; 
// Array of boundary coordinates of the visible part of the map

        bgAreaCoordinates.push(bgPathCoordinates);
        for (var key in flightPlanCoordinates) {
            for (var k in flightPlanCoordinates[key]) {
                bgAreaCoordinates.push(flightPlanCoordinates[key][k]);// Getting array of coordinates of each polygon
            }
        }
        if (bgPath['bg']) {
            bgPath['bg'].setMap(null); // remove the previous bg
        }
        console.info(bgAreaCoordinates);
        bgPath['bg'] = new google.maps.Polygon({
//            paths: [bgPathCoordinates, bgAreaCoordinates],
            paths:bgAreaCoordinates,
            geodesic: true,
            strokeColor: '',
            strokeOpacity: 0,
            strokeWeight: 0,
            fillColor: '#687472',
            fillOpacity: 0.7
        });
        bgPath['bg'].setMap(map); // Draw the bg polygon : Google shapes Api

http://i.stack.imgur.com/VjTZe.png

提前致谢！

Answer 1

这是一个做我想要做的事情的例子（在覆盖地球的多边形上打洞并用不同颜色的多边形覆盖那个洞）。示例多边形恰好是一个圆圈。

代码段

＆＃13;

// This example creates circles on the map, representing
// populations in the United States.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
};
var cityCircle;
var bounds = new google.maps.LatLngBounds();

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var earthsradius = 3963; // 3963 is the radius of the earth in miles
  var points = 32;

  // find the raidus in lat/lon 
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);

  var extp = new Array();
  if (dir == 1) {
    var start = 0;
    var end = points + 1
  } // one extra here makes sure we connect the ends
  else {
    var start = points + 1;
    var end = 0
  }
  for (var i = start;
    (dir == 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
  }
  return extp;
}

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var outerbounds = [
    new google.maps.LatLng(85, 180),
    new google.maps.LatLng(85, 90),
    new google.maps.LatLng(85, 0),
    new google.maps.LatLng(85, -90),
    new google.maps.LatLng(85, -180),
    new google.maps.LatLng(0, -180),
    new google.maps.LatLng(-85, -180),
    new google.maps.LatLng(-85, -90),
    new google.maps.LatLng(-85, 0),
    new google.maps.LatLng(-85, 90),
    new google.maps.LatLng(-85, 180),
    new google.maps.LatLng(0, 180),
    new google.maps.LatLng(85, 180)
  ];

  var populationOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    paths: [outerbounds, drawCircle(citymap['newyork'].center, 10, -1)]
  };
  // Add the circle for this city to the map.
  cityCircle = new google.maps.Polygon(populationOptions);
  map.fitBounds(bounds);
  var coverHole = new google.maps.Polygon({
    strokeColor: '#FFFF00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    map: map,
    paths: [drawCircle(citymap['newyork'].center, 10, -1)]
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

＆＃13;

谷歌地图中两个多边形的交点

1 个答案: