不同颜色的重叠多边形答案

【问题标题】：Overlapping polygons of different colors不同颜色的重叠多边形
【发布时间】：2018-03-26 19:32:49
【问题描述】：

是否可以防止重叠的多边形在它们的交点处变暗？

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>

【问题讨论】：

你希望交叉点是什么颜色？您可能必须创建代码才能做到这一点，它不会“自动”使用不同的多边形（它们需要是不同的颜色）
感谢地理编码。我的目标是使交叉点成为红色或蓝色，具体取决于它们的绘制顺序。听起来确实必须在代码中完成。

标签： google-maps colors polygon opacity overlap

【解决方案1】：

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

【讨论】：