javascript - 如何使用 Google Maps Javascript API 数据层根据多边形的某些值显示多边形的颜色？

Question

任何人都可以提供一些指导，如何获取以下视频 (1:28) 中出现的范围栏和“按一个 json 属性着色”功能吗？

https://www.youtube.com/watch?v=cwpmvI4vxNQ

我设法使用map.data.loadGeoJson、map.data.setStyle、map.data.addListener在Google map 上显示多边形并显示它们的属性值。

Answer 1

您需要首先请求 geoJSON，因为您必须通过迭代功能来检索特定属性的最小值和最大值。

该栏可能是一个带有 CSS 渐变的简单 div。

然后在样式函数中计算当前属性值的百分比。

公式为:

var pct = ((propertyValue-min)/(max-min)); 

使用 hsl-colors 应该是最简单的方法。

对于条形(例如渐变绿色>黄色>红色):

    background: linear-gradient(to right, 
                                hsl(120, 90%, 50%),
                                hsl(60, 90%, 50%),
                                hsl(0, 90%, 50%)) ;

该功能的fillColor:

'hsl('+(120-(120*pct))+', 90%, 50%)'

演示:(对于点而不是多边形，但工作流程相同，计算出的 fillColor 将应用于标记符号)

http://jsfiddle.net/doktormolle/vxd0434s/