不同颜色的多边形重叠
问题描述:
是否可以防止重叠的多边形在其交叉处变暗?不同颜色的多边形重叠
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>
答
最后我用广场砖是没有重叠。
你想要交叉点是什么颜色?您可能必须创建代码才能做到这一点,但不会自动使用不同的多边形(它们需要成为不同的颜色) – geocodezip
感谢地理编码。我的目标是将交叉点设为红色或蓝色,具体取决于它们以何种顺序排列。听起来好像它必须在代码中完成。 – Fidel