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日 (二) 13:40的修訂版本

示範程式: