Project2: Webmaps

Webmaps

（1）可从红黄绿的点中得到美国西部火山的海拔信息等；
（2）可从每个国家的地图颜色得到人口多少；
（3）可在地图右上角调整图层显示，关闭火山显示或人口显示；

使用的工具
（1）pandas（调用数据narray）
（2）folium（制作地图）

导入地图+保存地图

import folium
fg=folium.Map(location=[80, -100],zoom_start=6)   
fg.save("Map3.html")  #保存地图

folium.Map可以得到一个世界地图，location设置进入页面时开始的位置，zoom_start为进入时的大小；
fg.save即可保存该地图为html格式；

如何往地图中加入标记点marker

#加入marker
import folium
map=folium.Map(location=[38.58,-99.09],zoom_start=6, tiles = "Stamen Terrain")  #改版背景
#加入object
#add_child  加入object
map.add_child(folium.Marker(location=[38.2,-99.1],popup="Hi I am a Marker", icon = folium.Icon(color='green')))

map.save("Map1.html")

tiles设置地图的样式；
map.add_child()用于往map中添加内容（图层或者标记）；

创建特征层，防止层数过多

fg = folium.FeatureGroup(name="My Map")  #特征层
fg.add_child(folium.Marker(location=[38.2,-99.1],popup="Hi I am a Marker", icon = folium.Icon(color='green')))

先建立特征层folium.FeatureGroup()，并起名；
然后在特征层中加入标记点；

录入volcanoes信息，并添加至地图

#录入美国volcano的信息，并加入标记
import pandas
import folium

#传入volcano数据
data = pandas.read_csv("Volcanoes.txt")
lat=list(data['LAT'])  #转化成list操作更快
lon=list(data['LON'])


map=folium.Map(location=[38.58,-99.09],zoom_start=6, tiles = "Stamen Terrain")  #改版背景
#加入object
#add_child  加入object
fg = folium.FeatureGroup(name="My Map")  #特征层,在该层addchild

for lt,ln in zip(lat,lon):  #同时遍历两个列表——zip   i进入lat， j进入lon
    fg.add_child(folium.Marker(location=[lt,ln],popup="Hi I am a Marker", icon = folium.Icon(color='orange')))
    
map.add_child(fg)  #将特征层add入map中
map.save("Map1.html")

lat存放data中’LAT‘标签下的数据；
lon存放dta中’LON’标签下的数据；
用zip（list）来遍历多个数组，作为marker的位置添加进fg中，并通过icon=folium.Icon(color=)设置颜色；

设置marker

（1）在marker中设置popup参数，点击后得到该火山的elevation参数；

lat=list(data['LAT'])  #转化成list操作更快
lon=list(data['LON'])
elev = list(data["ELEV"])    #类型为float类型

map=folium.Map(location=[38.58,-99.09],zoom_start=6, tiles = "Stamen Terrain") 

fg = folium.FeatureGroup(name="My Map")  #特征层,在该层addchild

for lt,ln,el in zip(lat,lon,elev):  #同时遍历两个列表——zip   i进入
    fg.add_child(folium.Marker(location=[lt,ln],popup=str(el), icon = folium.Icon(color='orange')))

（2）在marker中添加html设置，对popup的字体和内容进行设置；

设置字体大小和方块长宽

html="""<h4>Volcano information:</h4>
Height: %s m
"""

for lt,ln,el in zip(lat,lon,elev):  #同时遍历两个列表——zip   i进入lat， j进入lon
    iframe=folium.IFrame(html=html % str(el), width=200, height=100)
    fg.add_child(folium.Marker(location=[lt,ln],popup=folium.Popup(iframe), icon = folium.Icon(color='orange')))
                                            #需要传入str类型  popup=folium.Popup(str(el),parse_html=True)

设置链接——搜索该火山

html="""Volcano name:<br><a href="http://www.google.com/search?q=%%22%s%%22" rarget="_blank">%s</a><br>
Height: %s m
"""
for lt,ln,el,name in zip(lat,lon,elev,name):  #同时遍历两个列表——zip   i进入lat， j进入lon
    iframe=folium.IFrame(html=html % (name,name,el), width=200, height=100)
    fg.add_child(folium.Marker(location=[lt,ln],popup=folium.Popup(iframe), icon = folium.Icon(color='orange')))

设置函数——让marker随火山海拔的变化而变化

def color_producer(height):  #函数要写在调用之前
    if height<1000:
        return "green"
    elif height<2000:
        return "pink"
    elif height<4000:
        return "lightred"
    else:
        return "red"
for lt,ln,el,name in zip(lat,lon,elev,name):  #同时遍历两个列表——zip   i进入lat， j进入lon
    iframe=folium.IFrame(html=html % (name,name,el), width=177, height=77)
    fg.add_child(folium.Marker(location=[lt,ln],popup=folium.Popup(iframe), icon = folium.Icon(color=color_producer(el))))

注意点：函数写在调用之前即可；

CircleMarker将标记点变为圆点

fg.add_child(folium.CircleMarker(location=[lt,ln],popup=folium.Popup(iframe),tooltip="Click to get more information",radius=6,fill=True,fill_opacity=0.7,color=color_producer(el)))

tooltip设置鼠标掠过时呈现的信息；
radius设置点的像素大小；
fill设置原点是否需要填充；
fill_opacity设置填充透明度；
color设置边框颜色（填充颜色默认与边框颜色相同）；

为地图中每个国家绘制多边形

调用GeoJson，读入Json文件，.read()转为str格式；
注意encoding需要写明"utf-8-sig", open格式为"r"只读；

#加入地图边框
#得到一个GeoJson object
fg.add_child(folium.GeoJson(data=(open("world.json","r",encoding="utf-8-sig").read())))  #.read()转换为string，
    
#没有分层导致上一层的点失效

设置多边形颜色——反应国家人口数量

fg.add_child(folium.GeoJson(data=open("world.json","r",encoding="utf-8-sig").read(),style_function=lambda x:{"fillColor":"green" if x["properties"]["POP2005"]<10000000 else "orange" if x["properties"]["POP2005"]<20000000 else "red"}))  #.read()转换为string，

lambda函数设置多边形的填充颜色；

---

最终代码

# -*- coding: utf-8 -*-
"""
"""
import pandas
import folium

#传入volcano数据
data = pandas.read_csv("Volcanoes.txt")
lat=list(data['LAT'])  #转化成list操作更快
lon=list(data['LON'])
elev = list(data["ELEV"])    #类型为float类型
name = list(data["NAME"])

#设置字体等html参数
html="""Volcano name:<br><a href="http://www.google.com/search?q=%%22%s%%22" rarget="_blank">%s</a><br>
Height: %s m
"""

map=folium.Map(location=[38.58,-99.09],zoom_start=6, tiles = "Stamen Terrain")  #改版背景
#加入object
#add_child  加入object
fgv = folium.FeatureGroup(name="Volcanoes")  #特征层,在该层addchild

def color_producer(height):
    if height<1000:
        return "green"
    elif height<3000:
        return "orange"
    else:
        return "red"
    

for lt,ln,el,name in zip(lat,lon,elev,name):  #同时遍历两个列表——zip   i进入lat， j进入lon
    iframe=folium.IFrame(html=html % (name,name,el), width=177, height=77)
    fgv.add_child(folium.CircleMarker(location=[lt,ln],popup=folium.Popup(iframe),tooltip="Click to get more information",radius=6,fill=True,fill_opacity=0.7,color=color_producer(el)))
#如果火山不放在featuregroup层里，则添加几次就有几个层

fgp = folium.FeatureGroup(name="Population",overlay=False)                                            #需要传入str类型  popup=folium.Popup(str(el),parse_html=True)
#加入polygamy层
#得到一个GeoJson object
fgp.add_child(folium.GeoJson(data=open("world.json","r",encoding="utf-8-sig").read(),style_function=lambda x:{"fillColor":"green" if x["properties"]["POP2005"]<10000000 else "orange" if x["properties"]["POP2005"]<20000000 else "red"}))  #.read()转换为string，
                                            
map.add_child(fgv)  #将特征层add入map中
map.add_child(fgp)
map.add_child(folium.LayerControl())      #加入layer管理,需要在layer已经加入的情况下（fg）
                                        
                                            
map.save("Map1.html")

注意图层的管理，每次执行map.add_child，就会增加一个图层；

图层管理需要在最后加入map.add_child(folium.LayerControl())；