重叠不同颜色的多边形 [英] Overlapping polygons of different colors
本文介绍了重叠不同颜色的多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有可能防止重叠的多边形在它们的交叉处变暗？
Geocode的解决方案在相同的不透明度下绘制重叠的多边形对于相同的多边形颜色，但不是当有多个多边形时。
我尝试将多边形缠绕在相反的方向，但它没有效果。我也尝试调整多边形的 zIndex ，但那只有真正影响了交叉点中哪种颜色占统治地位。
以下是 jsfiddle ，我尝试在相反的方向上缠绕。
完整代码：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>圈子< / title>
< style>
/ *总是显式设置地图高度来定义包含地图的div
*元素的大小。 * /
#map {
height：100％;
}
/ *可选：使样本页面填满窗口。 * /
html，
body {
height：100％;
保证金：0;
padding：0;
}
< / style>
< / head>
< body>
< div id =map>< / div>
< script>
//此示例在地图上创建圆圈，表示北美
美国的人口。
//首先，为每个城市创建一个包含LatLng和人口的对象。
var pointList = [{
center：{
lat：40.514，
lng：-74.205
}，
人口：2714856，
颜色：'红'
}，{
中：{
lat：40.714，
lng：-78.005
}，
人口：8405837，
color：'blue'
}，{
center：{
lat：34.052，
lng：-118.243
}，
人口： 3857799，
颜色：'黄色'
}，];
函数initMap（）{
//创建地图。
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）））;
//将此城市的圈子添加到地图
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
}）;
}）;
}
函数drawCircle（point，radius，dir）{
var d2r = Math.PI / 180; //度数为弧度
var r2d = 180 / Math.PI; //弧度到度
var earthsradius = 6378137.0; // 6378137.0是以米为单位的地球半径
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）;
}
//在纬度/经度上找到raidus
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
} //另外一个确保我们连接两端
else {
var start = points + 1; （var i = start;
（dir == 1？i< end：i> end）; i = i + dir（
var end = 0
）
）{
var theta = Math.PI *（i /（points / 2））;
ey = point.lng（）+（rlng * Math.cos（theta））; //中心a +半径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>
解决方案
最后我用方砖重叠。
Is it possible to prevent overlapping polygons from being darker at their intersection?
Geocode's solution to drawing overlapping polygons at the same opacity works well for polygons of the same color, but not when there are multiple polygons.
I've tried to wind the polygons in opposite directions but it had no effect. I also tried adjusting the polygon's zIndex, but that only really affected which color was dominant in the intersection.
Here is the jsfiddle with my attempt at winding in opposite directions.
Full code:
<!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>
解决方案
In the end I used square tiles that didn't overlap.
这篇关于重叠不同颜色的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
