javascript 如何使用多种颜色显示circleMarker数据？

30byixjq 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(175)

如何根据星等值使用几种颜色显示circleMarker数据。例如这个Map（https://cartonumerique.blogspot.com/2023/02/seismes-en-Turquie-et-Syrie.html）？这是我的Map函数和Map脚本。

#views.py
def data(request):
   all_evens = Even.objects.all()
   _data = [[obj.name, obj.date, obj.latitude, obj.longitude, obj.magnitude] for obj in all_evens]
   return JsonResponse (_data, safe=False)


#evenmap.html
<!DOCTYPE html>
{% load static %}
<html lang ="en">
    <body>

    </body>

    {% block js %}
        <script>
            var even = L.layerGroup()
            $.ajax({
                url:"{% url 'even:data' %}",
                type:"GET"
                success: function(response){
                    response.forEach(obj =>{
                        L.circleMarker([obj[2], obj[3]], {
                            radius: obj[4] * 3,
                            fillColor: "#ff7800",
                            color: "#000",
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 0.6
                            }).bindPopup('Name: ' + obj[0] + '</br>' + 'Date: ' + 
                            obj[1] + '</br>' + 'Latitude: ' + obj[2] + '</br>' + 
                            'Longitude: ' + obj[3] + '</br>' + 'Magnitude: ' + obj[4] 
                            ).addTo(even)
                           });
                          },
                        error: function(response){
                            alert(response.statusText);
                        }
                   });
               </script>
           {% end block js %}
    </html>

JavaScript

来源：https://stackoverflow.com/questions/75636865/how-display-circlemarker-data-using-several-colors

1条答案

按热度按时间

e4yzc0pl1#

要根据模值数据以不同颜色显示圆形标记，需要先定义一个色标。您可以定义一个色带，如下所示：

var color_scale = d3.scaleLinear()
  .domain([2, 5, 8])
  .range(['green', 'yellow', 'red']);

注意：此色标将2到5之间的模值Map为绿色，将5到8之间的值Map为黄色，将大于8的值Map为红色。您可以根据需要进行修改。*

现在，您可以使用这些色标值来设置每个圆标记的填充颜色在您的JavaScript代码如下：

L.circleMarker([obj[2], obj[3]], {
  radius: obj[4] * 3,
  fillColor: color_scale(obj[4]),
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.6
}).bindPopup('Name: ' + obj[0] + '</br>' + 'Date: ' + 
  obj[1] + '</br>' + 'Latitude: ' + obj[2] + '</br>' + 
  'Longitude: ' + obj[3] + '</br>' + 'Magnitude: ' + obj[4] 
).addTo(even);

要使用d3.scaleLinear（）函数，请确保在HTML文件中包含D3库。
您可以查看我创建的codepen链接作为示例：https://codepen.io/gd17/pen/rNZwWPv
此外，要使用逻辑添加颜色，可以使用if/else语句，如下所示：

L.circleMarker([obj[2], obj[3]], {
                            radius: obj[4] * 3,
                            fillColor: (function() {
                                if (obj[4] >= 7) {
                                    return "#ff0000";
                                } else if (obj[4] >= 5 && obj[4] < 7) {
                                    return "#ffa500";
                                } else if (obj[4] >= 3 && obj[4] < 5) {
                                    return "#ffff00";
                                } else {
                                    return "#00ff00";
                                }
                            })(),
color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.6
}).bindPopup('Name: ' + obj[0] + '</br>' + 'Date: ' + 
  obj[1] + '</br>' + 'Latitude: ' + obj[2] + '</br>' + 
  'Longitude: ' + obj[3] + '</br>' + 'Magnitude: ' + obj[4] 
).addTo(even);

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 如何使用多种颜色显示circleMarker数据？

1条答案

相关问题

热门标签

最新问答