Question

我正在尝试在Folium中制作一个具有多个图层的地图，每个图层都由阴影区域（使用GeoJSON）组成，颜色区域由颜色图指定。我想在图例中添加图例。我找到了第一个解决方案here，但是该解决方案的问题在于，图例固定在右上角，更重要的是，它始终存在。取而代之的是，我希望仅在显示相应图层时才显示图例。

这是我尝试过的一些示例代码（其中m是我的Folium贴图，cm1和cm2是彩色贴图）：

folium.GeoJson(data['Temp'],
    name='Temp',
    style_function=lambda x: {
            'fillColor': cm1(x['properties']['Temp']),
            'fillOpacity': 0.2,
            'color' : None
                            },
    highlight_function=lambda x: {'weight':3, 'color':'black'},
    tooltip=folium.features.GeoJsonTooltip(fields=['Temp', 'Rain'],
                                            labels=True,
                                            sticky=True
                                            ), show=False).add_to(m)

folium.GeoJson(data['Rain'],
    name='Rain',
    style_function=lambda x: {
            'fillColor': cm2(x['properties']['Rain']),
            'fillOpacity': 0.2,
            'color' : None
                            },
    highlight_function=lambda x: {'weight':3, 'color':'black'},
    tooltip=folium.features.GeoJsonTooltip(fields=['Temp', 'Rain'],
                                            labels=True,
                                            sticky=True
                                            ), show=False).add_to(m)

cm1.caption = 'Temp scale'
cm2.caption = 'Rain scale'
m.add_child(cm1)
m.add_child(cm2)

folium.LayerControl().add_to(m)

如何更改代码，以便仅在显示相应图层时才显示图例？（如果可能的话，如何将图例移到左下角？）

Answer 1

如果只想更改LayerControl的位置：

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <p v-if="vidLarge">A Vue Tutorial</p> <!-- moved above iframe -->
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>

    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>

   or.....

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>
      <div> <!-- separate from iframe with another element -->
        <p v-if="vidLarge">A Vue Tutorial</p>
      </div>
    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>

如果您了解一些JavaScript，则可以进行更改/操作，例如： legend

将颜色图例添加到Folium地图

1 个答案: