iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

深入前端地圖框架技術探索 系列

探索如何使用各種前端地圖框架

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文 團隊NUTC imac
DAY 1

Day1:前言

經過一年的沉澱,我再次決定挑戰 iThome 鐵人賽,內心既期待又充滿複雜的情感。去年的比賽經歷至今依然歷歷在目,因為中途退賽,我讓團隊無法全員完賽,這份遺憾與...

2024-09-09 ‧ 由 y97213h53 分享
DAY 2

Day2:leaflet簡介

leaflet簡介 什麼是leaflet leaflet是一個開源的javascript函式庫,用於在網頁與手機上建立互動式的地圖、有許多好用的插件,官方文檔的...

2024-09-10 ‧ 由 y97213h53 分享
DAY 3

Day3:day3:Leaflet 地圖初始化與顯示地圖

一、概述 在使用 Leaflet 時,第一步是初始化地圖並將它顯示在頁面上。初始化的過程主要是設定地圖的中心點(經緯度)和縮放級別,這決定了地圖的視角以及展示的...

2024-09-11 ‧ 由 y97213h53 分享
DAY 4

Day4:使用 Leaflet 添加地圖標記

簡介 在 Leaflet 中,標記(Markers)是常見的互動元素之一,用來在地圖上標示特定的位置,並能夠綁定彈出視窗 (popup) 或工具提示 (tool...

2024-09-12 ‧ 由 y97213h53 分享
DAY 5

Day5:選擇與自訂地圖圖層

簡介 Leaflet 的 Tile Layer 是地圖的基礎組成部分,決定了地圖背景所顯示的內容樣式。Tile Layer 由一系列小的圖塊 (tile) 組成...

2024-09-13 ‧ 由 y97213h53 分享
DAY 6

Day6:繪製Polylines

簡介 在 Leaflet 中,多線段 (Polyline) 是用來表示多個連接點之間的路徑,通常用來描繪路徑、邊界或航線等。它由一組經緯度點連接而成,並且可以根...

2024-09-14 ‧ 由 y97213h53 分享
DAY 7

Day7:Leaflet Polygon

簡介 在 Leaflet 中,多邊形 (Polygon) 是用來表示封閉的區域,常用於劃定地理區域、區域邊界或表示特定區域的輪廓。Polygon 是由一組經緯度...

2024-09-15 ‧ 由 y97213h53 分享
DAY 8

Day8:GeoJson介紹

GeoJSON簡介 GeoJSON 是一種廣泛使用的格式,用於表示地理數據,例如點、線、多邊形等地理要素。它基於JSON格式,結構簡單且可讀性高,因此非常適合在...

2024-09-16 ‧ 由 y97213h53 分享
DAY 9

Day9:處理 Leaflet 中的事件與互動

在這篇文章中,我們將探討如何在 Leaflet 中處理事件與互動。Leaflet 提供了豐富的事件處理機制,讓開發者可以在地圖上輕鬆實現互動操作,例如點擊地圖、...

2024-09-17 ‧ 由 y97213h53 分享
DAY 10

Day10:使用 Leaflet 控制元件

什麼是控制元件(Controls)? 控制元件是 Leaflet 中讓使用者與地圖進行互動的重要部分。它們通常是一些位於地圖四個角落的小工具,例如縮放按鈕、圖層...

2024-09-18 ‧ 由 y97213h53 分享