不同颜色的多边形重叠

是否可以防止重叠的多边形在其交叉处变暗？不同颜色的多边形重叠

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>

来源

2017-10-15 Fidel

你想要交叉点是什么颜色？您可能必须创建代码才能做到这一点，但不会自动使用不同的多边形（它们需要成为不同的颜色） – geocodezip

感谢地理编码。我的目标是将交叉点设为红色或蓝色，具体取决于它们以何种顺序排列。听起来好像它必须在代码中完成。 – Fidel

-1

最后我用广场砖是没有重叠。

来源

2017-10-27 09:46:41 Fidel

不同颜色的多边形重叠

回答

相关问题