Question

是否可以防止重叠多边形在交叉处变暗？

Geocode's solution以相同的不透明度绘制重叠多边形，对于相同颜色的多边形效果很好，但在有多个多边形时则不行。

我试图在opposite directions中缠绕多边形，但它没有效果。我也尝试调整多边形的zIndex，但这只影响了交叉点中哪种颜色占主导地位。

这是jsfiddle，我尝试向相反方向缠绕。

完整代码：

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      // This example creates circles on the map, representing populations in North
      // America.

      // First, create an object containing LatLng and population for each city.
      var pointList = [{
        center: {
          lat: 40.514,
          lng: -74.205
        },
        population: 2714856,
        color: 'red'
      }, {
        center: {
          lat: 40.714,
          lng: -78.005
        },
        population: 8405837,
        color: 'blue'
      }, {
        center: {
          lat: 34.052,
          lng: -118.243
        },
        population: 3857799,
        color: 'yellow'
      }, ];

      function initMap() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {
            lat: 40.714,
            lng: -78.005
          },
          mapTypeId: 'terrain'
        });

        var uniqueColours = [...new Set(pointList.map(point => point.color))];

        var direction = 1;
        uniqueColours.forEach(c => {
          var paths = [];

          if (direction == 1) direction = -1;
          else direction = 1;

          var pointsForColour = pointList.filter(p => p.color == c);

          pointsForColour.forEach(p => paths.push(drawCircle(p.center, Math.sqrt(p.population) * 100, direction)));

          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Polygon({
            strokeColor: c,
            strokeOpacity: 0.5,
            strokeWeight: 0,
            fillColor: c,
            fillOpacity: 0.5,
            map: map,
            paths: paths,
            //center: citymap[city].center,
            //radius: Math.sqrt(citymap[city].population) * 100
          });
        });
      }

      function drawCircle(point, radius, dir) {
        var d2r = Math.PI / 180; // degrees to radians 
        var r2d = 180 / Math.PI; // radians to degrees 
        var earthsradius = 6378137.0; // 6378137.0 is the radius of the earth in meters
        var points = 32;
        if (typeof point.lat != "function") {
          if (typeof point.lat != "number") {
            alert("drawCircle: point.lat not function or number");
            return;
          }
          point = new google.maps.LatLng(point.lat, point.lng);
        }

        // 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));
        }
        return extp;
      }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">


    </script>
  </body>

</html>

Answer 1

最后我使用了没有重叠的方形瓷砖。

重叠不同颜色的多边形

1 个答案: