다른 색상의 겹치는 다각형

겹치는 다각형이 교차점에서 더 어두워지는 것을 방지 할 수 있습니까? 같은 불투명도에서 중복 다각형 그리기에다른 색상의 겹치는 다각형

은 같은 색깔의 다각형 잘 작동하지만, 여러 다각형이있다하지 않을 때.

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

다른 색상의 겹치는 다각형

답변

관련 문제