Leaflet.js：修訂版本之間的差異

出自福留子孫
跳轉到： 導覽、 搜尋
（新頁面: 分類:OpenStreetMap）
 
第 1 行： 第 1 行：
 
[[分類:OpenStreetMap]]
 
[[分類:OpenStreetMap]]
 +
 +
===安裝 jupyter ===
 +
*打開終端機，安裝jupyter指令：'''!pip install folium'''。（MAC 使用者不用加「!」）
 +
*打開終端機，安裝jupyter指令：'''!pip install notebook'''。（MAC 使用者不用加「!」）
 +
*打開終端機，執行jupyter指令：'''jupyter notebook'''，安裝完成 jupyter 將會開啟瀏覽器。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_初始介面.png' width='600px' />
 +
 +
===使用方式：===
 +
*如何新增 python 檔案。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_新增py.png' width='600px' />
 +
*程式碼編輯介面。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_程式碼編輯介面.png' width='600px' />
 +
 +
===我的地圖===
 +
*應用 Python 讀取 csv<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_顯示地標.png' width='600px' />
 +
<pre>
 +
import folium
 +
import pandas as pd
 +
 +
# 讀取 CSV 檔案
 +
data = pd.read_csv("data.csv")
 +
 +
# 連接 map
 +
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=14)
 +
 +
# 增加 markers
 +
for i in range(0, len(data)):
 +
    folium.Marker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']], popup=data.iloc [i]['Name']).add_to (m)
 +
 +
# 展示在 map
 +
m
 +
</pre>
 +
*如何變化標記：將標記改變成紅色圈。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_改變標記01.png' width='600px' />
 +
<pre>
 +
import folium
 +
import pandas as pd
 +
 +
# 讀取 CSV 檔案
 +
data = pd.read_csv("data.csv")
 +
 +
# 連接 map
 +
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)
 +
 +
# 增加 markers
 +
for i in range(0, len(data)):
 +
   
 +
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
 +
    radius=5,
 +
    color='red',
 +
    fill=True,
 +
    fi11_color='red',
 +
    popup=data.iloc [i]['Name']).add_to (m)
 +
 +
# 展示在 map
 +
m
 +
</pre>
 +
*如何變化標記：將標記改變成藍色圈且放大。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_改變標記02.png' width='600px' />
 +
<pre>
 +
import folium
 +
import pandas as pd
 +
 +
# 讀取 CSV 檔案
 +
data = pd.read_csv("data.csv")
 +
 +
# 連接 map
 +
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)
 +
 +
# 增加 markers
 +
for i in range(0, len(data)):
 +
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
 +
    radius=8,
 +
    color='blue',
 +
    fill=True,
 +
    fi11_color='blue',
 +
    popup=data.iloc [i]['Name']).add_to (m)
 +
 +
# 展示在 map
 +
m
 +
</pre>
 +
*將程式轉換成網頁<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_網頁儲存.png' width='600px' /><br/><br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_網頁.png' width='600px' />
 +
<pre>
 +
import folium
 +
import pandas as pd
 +
 +
# 讀取 CSV 檔案
 +
data = pd.read_csv("data.csv")
 +
 +
# 連接 map
 +
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)
 +
 +
# 增加 markers
 +
for i in range(0, len(data)):
 +
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
 +
    radius=8,
 +
    color='blue',
 +
    fill=True,
 +
    fi11_color='blue',
 +
    popup=data.iloc [i]['Name']).add_to (m)
 +
 +
# 展示在 map
 +
m
 +
 +
# 將 map 轉換成 網頁
 +
m.save("index.html")
 +
</pre>

2023年2月21日 (二) 09:32的修訂版本


安裝 jupyter

  • 打開終端機，安裝jupyter指令：!pip install folium。（MAC 使用者不用加「!」）
  • 打開終端機，安裝jupyter指令：!pip install notebook。（MAC 使用者不用加「!」）
  • 打開終端機，執行jupyter指令：jupyter notebook，安裝完成 jupyter 將會開啟瀏覽器。

使用方式：

  • 如何新增 python 檔案。
  • 程式碼編輯介面。

我的地圖

  • 應用 Python 讀取 csv
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=14)

# 增加 markers
for i in range(0, len(data)):
    folium.Marker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']], popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m
  • 如何變化標記：將標記改變成紅色圈。
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)

# 增加 markers
for i in range(0, len(data)):
    
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
    radius=5,
    color='red',
    fill=True,
    fi11_color='red',
    popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m
  • 如何變化標記：將標記改變成藍色圈且放大。
import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)

# 增加 markers
for i in range(0, len(data)):
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
    radius=8,
    color='blue',
    fill=True,
    fi11_color='blue',
    popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m
  • 將程式轉換成網頁


import folium
import pandas as pd

# 讀取 CSV 檔案
data = pd.read_csv("data.csv")

# 連接 map
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)

# 增加 markers
for i in range(0, len(data)):
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
    radius=8,
    color='blue',
    fill=True,
    fi11_color='blue',
    popup=data.iloc [i]['Name']).add_to (m)

# 展示在 map
m

# 將 map 轉換成 網頁
m.save("index.html")
取自「http://well-being-ng.net/wellBeingNg/index.php?title=Leaflet.js&oldid=13102」