【python】绘制地图：folium实用功能进阶_folium库将excel表中的经纬度对应的点位标注在leaflet(网页)上

一、效果图

二、图层控制

上一篇博客讲的很基础，其实在folium官方还提供了一些更明确的方法供我们使用。就比如图层的控制。官方给方法名称是FeatureGroup，导入方式时from folium import FeatureGroup，或者folium.FeatureGroup()。具体原理我这里就不细说了，主要还是看示例：
import folium
def map2png(map_data,out_file='pdf.png'):
	# 1.直接构造，默认底图
	mo = folium.Map(location=[0, 0])
    # 2.图层1-高德底图+数据
    fg = folium.FeatureGroup()
    # 2.1 高德地图
    fg.add_child(folium.TileLayer(
        tiles='http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        attr="&copy; <a href=http://ditu.amap.com/>高德地图</a>",
        min_zoom=0,
        max_zoom=19,
        control=True,
        zoom_control=False,
        show=True))
    # 2.2添加一个点
    fg.add_child(folium.Marker(
							location=[45.3311, -121.7113],
							popup="Timberline Lodge",
							icon=folium.Icon(color="green")))
  	#  2.3添加一个线形   
	fg.add_child(folium.PolyLine(
		locations=[[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]],
		color='green', weight=2, opacity=1))
 	# 2.4添加一个面
	fg.add_child(folium.Polygon(
	    locations=[[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]], 
		color='green', weight=2, 
		fill=True,fill_color = 'red'))
	# 2.5将我们的图层加入map
	mo.add_child(fg)
	# 3.图层2-重点数据+最上层
	fg2 = folium.FeatureGroup()
	fg2.add_child(folium.Polygon(
	    locations=[[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]], 
		color='green', weight=2, 
		fill=True,fill_color = 'red'))
	mo.add_child(fg2)
	# 4.将图层fg2显示在最上层,keep_in_front的参数必须是FeatureGroup或TileLayer对象
	mo.keep_in_front(fg2)
	# 5.根据范围缩放地图
    mo.fit_bounds([[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]])  
    root = mo.get_root()
    html = root.render()  # 这个拿到的就是一个html的内容
    # mo.save('text.html')
三、指北针
 
指北针这个功能对于地图来说不一定是必须的，但是加上总是好的。从官方和源码分析来看没有相关介绍，但是FloatImage放法可以完成这个功能。这个方法是官方文档中的插件，其实官方给了很多插件，网上使用最多的是热力图也就是HeatMap方法。
 FloatImage方法实现的是将一张图片放到屏幕上，并指定图片的大小，和屏幕上的位置，参数为为整数（FloatImage方法实现了百分比转化）。我们在二代码的基础上，将图片加在了左下角。 
fg.add_child(FloatImage(os.path.join(base, 'map_png', 'image', 'compass.png'), left=5, bottom=10, width=5))
四、folium添加js和css
 
folium官方未提供添加js和css的相关方法，网上很多方法应该都是在解读源码的基础上进行的抽取，相对来说比较的单一，没有针对如何添加js和css进行相关说明。这里可以画一个folium里各种类的继承关系，方便我们更清晰的明白整个过程。
 官方链接：https://www.osgeo.cn/folium/plugins.html
 
 从源代码中可以知道，folium中实现地图功能是通过jinjia2实现数据和地图加载html的。
 源码中主要使用了三种添加数据和地图的方法。这些方法存在缺陷（只能加在最前面），这些方法可以使用大多数场景，如果不涉及对map对象的操作，此三种方法可以满足要求。
 1.header添加js和css 
    init_script = """
        var mapsPlaceholder = [];
        L.Map.addInitHook(function () {mapsPlaceholder.push(this);});
    # 加在header最上边
    mo.get_root().header.add_child(folium.Element(init_script))
2.body添加js和css 
    init_script = """
        var mapsPlaceholder = [];
        L.Map.addInitHook(function () {mapsPlaceholder.push(this);});
    # 加在body中
    mo.get_root().html.add_child(folium.Element(init_script))
3.script添加js和css 
    init_script = """
        var mapsPlaceholder = [];
        L.Map.addInitHook(function () {mapsPlaceholder.push(this);});
    # 加在script中
    mo.get_root().script.add_child(folium.Element(init_script))
五、经纬网格线
 
上一步实现了在html文件不同位置添加js和css的方法，如果涉及到对map对象的操作，可能存在不满足的情况，比如添加经纬网格线。实现经纬网格线这个功能比较麻烦，主要存在以下困难：
 1.官方没有相关的方法和插件(目前没有)；
 2.folium是依赖leadlet.js实现的第三方库，想实现经纬线需要熟悉leaflet(在网上只找到一篇相关文章)；
 3.上边的文章是前端完成，没有直接后端实现的方法。
 4.前端实现的方法是直接构建的地图，我们这里是地图创建对象不可获取（地图对象随机生成）。 
如何才能事项经纬网格线呢？
 这里我们需要在map对象创建时将对象存储，在map对象创建后获取map对象并依据缩放实现网格线。这里有一个重点工作就是如何将js代码在map对象创建前后加入到html中。
 其中map对象创建时将对象存储在四中已经实现，通过学习folium源码，重写了添加js的方法实现map对象创建后添加js。
  
1.html页面实现经纬度网格
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <title>leaflet-经纬网格</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      .leaflet-div-icon {
        background: none;
        border: none;
    </style>
  </head>
    <div id="map" style="height: 100%; width: 100%"></div>
    <script>
      let map = L.map("map", { renderer: L.canvas({ padding: 0.5 }) }).setView(
        [25.127879288597576, 118.37905883789064],
      // 添加背景图层
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);
      // 创建图层
      let lonLatGridLineLayer = L.featureGroup().addTo(map);
      // 经纬网格生成方法
      let addLonLatLine = () => {
        let zoom = map.getZoom();
        let bounds = map.getBounds();
        let north = bounds.getNorth();
        let east = bounds.getEast();
        // 经纬度间隔
        let d = 90 / Math.pow(2, zoom - 1);
        // 经线网格
        for (let index = -180; index <= 360; index += d) {
          // 判断当前视野内
          if (bounds.contains([north, index])) {
            // 绘制经线
            let lonLine = L.polyline(
                [-90, index],
                [90, index],
              { weight: 1, color: "blue" }
            lonLatGridLineLayer.addLayer(lonLine);
            // 标注
            let text = index.toFixed(1) + "°";
            // 动态计算小数位数
            if (zoom > 10) {
              text = index.toFixed((zoom - 8) / 2) + "°";
            let divIcon = L.divIcon({
              html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
              iconAnchor: [0, -5],
            });
            let textMarker = L.marker([north, index], { icon: divIcon });
            lonLatGridLineLayer.addLayer(textMarker);
		if(d>90)d=90;
        // 纬线网格
        for (let index = -90; index <= 90; index += d) {
          if (bounds.contains([index, east])) {
            let lonLine = L.polyline(
                [index, -180],
                [index, 360],
              { weight: 1, color: "blue" }
            lonLatGridLineLayer.addLayer(lonLine);
            // 标注
            let text = index.toFixed(1) + "°";
            if (zoom > 10) {
              text = index.toFixed((zoom - 8) / 2) + "°";
            let divIcon = L.divIcon({
              html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
              iconAnchor: [(text.length + 1) * 6, 0],
            });
            let textMarker = L.marker([index, east], { icon: divIcon });
            lonLatGridLineLayer.addLayer(textMarker);
      addLonLatLine();
      map.on("zoomend move", () => {
        lonLatGridLineLayer.clearLayers();
        addLonLatLine();
      });
    </script>
  </body>
</html>
2.自定义网格线的类
 
通过源码的类继承关系，我采取继承MacroElement类。




    
 
from branca.element import MacroElement,
from jinja2 import Template
from folium.vector_layers import path_options
class Jwwg(MacroElement):
    """自定义经纬线网格"""
    _template = Template("""
        {% macro script(this, kwargs) %}
                    var map = mapsPlaceholder.pop();
                    // 创建图层
                    let lonLatGridLineLayer = L.featureGroup().addTo(map);
                    // 经纬网格生成方法
                    let addLonLatLine = () => {
                        let zoom = map.getZoom();
                        let bounds = map.getBounds();
                        let north = bounds.getNorth();
                        let east = bounds.getEast();
                        // 经纬度间隔
                        let d = 90 / Math.pow(2, zoom - 1);
                        // 经线网格
                        for (let index = -180; index <= 360; index += d) {
                            // 判断当前视野内
                            if (bounds.contains([north, index])) {
                                // 绘制经线
                                let lonLine = L.polyline(
                                        [-90, index],
                                        [90, index],
                                    {weight: 1, color: "blue"}
                                lonLatGridLineLayer.addLayer(lonLine);
                                // 标注
                                let text = index.toFixed(1) + "°";
                                // 动态计算小数位数
                                if (zoom > 10) {
                                    text = index.toFixed((zoom - 8) / 2) + "°";
                                let divIcon = L.divIcon({
                                    html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
                                    iconAnchor: [0, -5],
                                let textMarker = L.marker([north, index], {icon: divIcon});
                                lonLatGridLineLayer.addLayer(textMarker);
                        if (d > 90) d = 90;
                        // 纬线网格
                        for (let index = -90; index <= 90; index += d) {
                            if (bounds.contains([index, east])) {
                                let lonLine = L.polyline(
                                        [index, -180],
                                        [index, 360],
                                    {weight: 1, color: "blue"}
                                lonLatGridLineLayer.addLayer(lonLine);
                                // 标注
                                let text = index.toFixed(1) + "°";
                                if (zoom > 10) {
                                    text = index.toFixed((zoom - 8) / 2) + "°";
                                let divIcon = L.divIcon({
                                    html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
                                    iconAnchor: [(text.length + 1) * 6, 0],
                                let textMarker = L.marker([index, east], {icon: divIcon});
                                lonLatGridLineLayer.addLayer(textMarker);
                    addLonLatLine();
                    map.on("zoomend move", () => {
                        lonLatGridLineLayer.clearLayers();
                        addLonLatLine();
                   {% endmacro %}
                """)
    def __init__(self, **kwargs):
        super(Jwwg, self).__init__()
        self._name = 'Jwwg'
        self.options = path_options(line=True, **kwargs)
3.实现网格线
 
import folium
def map2png(map_data,out_file='pdf.png'):
	# 1.直接构造，默认底图
	mo = folium.Map(location=[0, 0])
    # 2.图层1-高德底图+数据
    fg = folium.FeatureGroup()
    # 2.1 高德地图
    fg.add_child(folium.TileLayer(
        tiles='http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        attr="&copy; <a href=http://ditu.amap.com/>高德地图</a>",
        min_zoom=0,
        max_zoom=19,
        control=True,
        zoom_control=False,
        show=True))
    # 2.2添加一个点
    fg.add_child(folium.Marker(
							location=[45.3311, -121.7113],
							popup="Timberline Lodge",
							icon=folium.Icon(color="green")))
  	#  2.3添加一个线形   
	fg.add_child(folium.PolyLine(
		locations=[[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]],
		color='green', weight=2, opacity=1))
 	# 2.4添加一个面
	fg.add_child(folium.Polygon(
	    locations=[[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]], 
		color='green', weight=2, 
		fill=True,fill_color = 'red'))
	# 2.5将我们的图层加入map
	mo.add_child(fg)
	# 5.根据范围缩放地图
    mo.fit_bounds([[38.68,115.67],
					[38.85,115.48],
					[38.65,115.37],
					[38.68,115.67]])  
    # 网格线
    init_script = """
        var mapsPlaceholder = [];
        L.Map.addInitHook(function () {mapsPlaceholder.push(this);});
    mo.get_root().script.add_child(folium.Element(init_script))
   	Jwwg().add_to(mo)
    root = mo.get_root()
    html = root.render()  # 这个拿到的就是一个html的内容
    # mo.save('text.html')
提示：这里对文章进行总结： 
本博客是以使用的优先级来讲解这个库。<我们靠所得来谋生，但靠给予来创造生活>
                                    1. folium库在标记经纬度时要先写纬度后写经度，这点在5.6.7三个部分上均有体现，一定要注意。2. 本文各部分代码可以根据实际需求选择性参考，有些也可以连起来实现一些其他的功能。例1：excel中获取到的地点名称列表可以再导入到2中进行批量查询经纬度，再用6批量标记。例2：手中的excel数据集中的经纬度采用的是百度坐标系，可以将其导出为list后再导入进3中转为高德坐标系经纬度，最后再用6进行批量标记。Folium — Folium unknown 文档。
def marker(trajectory_df):
    trajectory = folium.map.FeatureGroup()
    for index,row in trajectory_df.iterrows():
        trajectory.add_child(
            folium.CircleMarker(
            [row['lat'],row['lon']],
  ra = 6378140 # 赤道半径
  rb = 6356755 # 极半径
  flatten = (ra - rb) / ra # Partial rate of the earth
  # change angle
                                    一个本地化的 folium 地图资源，包括了js，css 等文档，配合python脚本将对应资源的引用本地化，避免了引入url资源时跨境加载js/css资源网络慢的问题，提升本地folium地图的加载速度，速度提升 800 倍，让地图打开真正的飞起来。
如果是在线地图，也可以能本服务器代理 js/css 资源来避免跨地域远程访问，提升地图打开速度，优化网页使用体验。
                                    我讲一下我这个需求的来源，做的项目是一个地理空间查询和使用的系统，通过在前端调用高德地图api创建了一个查询区域，获取区域内的地理数据(数据库)。具体的需求就是，将查询区域和地理数据制作成一个覆盖率分析报告，报告中的其他内容都已完成，但报告中需要展示高德地图、查询区域、地理数据的完整图片这个功能卡了2个星期，主要原因是我对地理空间数据不熟悉，很多python相关库也不清楚，在构建图形的过程中走了很多弯路。
                                    js中的百度地图使用
html中的控件
	<div class="console" id="map" style="border:1px solid #fff;width:100%;float:left;min-height:400px;">
		<fieldset class="demo_content"></fieldset>  
js中的代码
/** 地图展示 **/		
	oldBaseLocation=data[0].mer
                                    导航网格或 navmesh是一种用于虚拟环境中路线规划的数据结构，在游戏开发中特别有用。它由一组代表地图区域的凸多边形组成，多边形的边用额外的连接信息进行了注释，显示了游戏角色可以穿越的区域。正如你在下图中看到的，导航网格提供了世界上障碍物的简化表示，允许路线规划算法快速有效地计算出最佳路径。我不会在这篇文章中过多地谈论导航网格背后的理论，网络上有很多很好的资源；维基百科条目是一个很好的起点。相反，我将专注于构建导航网格的技术。
                                    数据可视化-Python中的folium的图层层级控制
Folium是一个基于leaflet.js的python地图库，本文简单介绍下folium的图层的结构设计和多个图层控制的实现：
Folium的元素架构
Folium官方文档中写的比较散，我这里画了个元素的架构示意图。
https://python-visualization.github.io/folium/
Map属性是Folium的基本属性。
三类（Vector_Layer、Raster_Layer、EtraFeatures）图层元素可以通过