Skip to main content

範例總覽

mapPlus 的使用範例與教學

基本使用

地標

資料視覺化

資料層

支援 GeoJSON
在地圖上操作座標點、線條、多邊形及圓形四種地圖項目，使用 addGeoJson 增加地圖資料。
Feature 的彈跳視窗
在地圖上與座標點、線條、多邊形及圓形四種地圖項目的互動事件。範例內容為使用彈跳視窗，快速檢視指定屬性內容，取得 Feature 相關資訊。
Feature 的互動效果
在地圖上與座標點、線條、多邊形及圓形四種地圖項目的互動事件。範例內容為使用 overrideStyle 及 revertStyle 開發、覆蓋線條寬度及顏色、覆蓋多邊形及圓形外框線顏色、覆蓋座標點 icon 圖案。
Feature 調整樣式
在地圖上操作座標點、線條、多邊形及圓形四種地圖項目，使用 setStyle 條件變更外觀、清除樣式。
Feature 的顯示狀態
透過樣式設定，隱藏地圖上的幾何圖形。此範例中含有以下功能：使用 setStyle 隱藏所有 Feature、使用 toGeoJson 查看完整 Feature 內容。
Feature 的順序調整
在地圖上操作座標點、線條、多邊形及圓形四種地圖項目。此範例中含有以下功能：使用 setStyle 調整單個 Feature 上下層順序（相同類型的 Feature）、使用資料層群組移動 API（moveUp / moveDown）將線條圖層上下移動。
座標點的增刪
在地圖上使用Feature繪製座標點。此範例中含有以下功能：使用removeFeatureById刪除座標點、使用removeFeature刪除座標點、使用add新增座標點、使用toGeoJson檢查資料層內容
座標點的點擊事件
在地圖上使用 Feature 繪製座標點。此範例中含有以下功能：使用 click event 加上 setStyle 開發互動效果、使用 url 圖片變更 icon 圖案、變更 icon 大小、設定不可點擊 Feature
座標點的彈跳視窗
在地圖上與座標點地圖項目的互動事件。範例內容為使用彈跳視窗，快速檢視指定屬性內容，取得Feature相關資訊。
座標點的旋轉錨點位置
在地圖上使用 Feature 繪製座標點。此範例中含有以下功能：使用 setStyle 並調整 iconAnchor 屬性來變更座標點的旋轉錨點位置。
座標點的重疊顯示
在地圖上使用 Feature 繪製座標點。此範例中含有以下功能：使用 setGlobalStyle 來統一變更所有座標點之間是否可重疊，以及使用 revertGlobalStyle 恢復全局預設樣式。
座標點的互動效果
在地圖上使用Feature繪製座標點。此範例中含有以下功能：搭配html Element做出懸浮文字效果、使用overrideStyle及revertStyle開發互動效果、跟隨鼠標顯示懸浮文字、覆蓋文字大小及顏色、設定事件觸發時滑鼠游標樣式
座標點隨著指定方向旋轉
在地圖上使用Feature繪製座標點。此範例中含有以下功能：在加入圖元時設定旋轉角度、使用 setStyle 調整旋轉角度
座標點對齊地圖的方向
在地圖上使用 Feature 繪製座標點。此範例中含有以下功能：調整 rotationAlignmentMap 屬性以變更座標點對齊地圖的方向
座標點調整文字外觀
在地圖上使用 Feature 繪製座標點。此範例中含有以下功能：使用 getProperty 取得 id 並使用 setGeometry 變更座標點位置、變更座標點文字樣式（包括文字邊框、文字背景框等等）、變更座標點文字位置、變更座標點文字內容
座標點條件隱藏
透過 setStyle 設定樣式，能輕鬆對個別 Feature 的可視性做調整
座標點的顯示狀態
透過樣式設定，能快速對各個類別的圖層顯示或是隱藏。此範例中含有以下功能：使用 setStyle 隱藏所有座標點 Feature、使用 toGeoJson 查看整個資料層的內容
線條的增刪
在地圖上使用 Feature 繪製線條。此範例中含有以下功能：新增線條、刪除線條、查看線條資料
線條的點擊事件
在地圖上使用 Feature 繪製線條。此範例中含有以下功能：滑鼠游標在可點擊幾何圖案範圍內更改游標圖案、變更線條顏色、設定藍色線條為不可點擊圖形
線條的 Icon 隨著行徑方向旋轉
在地圖上使用 Feature 繪製線條，可以沿著線條增加 Icon 顯示。此範例中含有以下功能：使用 iconAlongLinestring 增加 Icon 至線條上、使用 setStyle 調整旋轉角度
線條增加 Icon 顯示
在地圖上使用 Feature 繪製線條，可以沿著線條增加 icon 顯示。此範例中含有以下功能：使用 iconAlongLinestring 增加 icon 至線條上並設定 icon 圖案、加載外部 url 圖片、使用 setStyle 調整旋轉角度
線條增加文字
使用 displayFeatureText 及 removeDisplayText，增加文字說明至線條上方，顯示線條資訊。此範例中含有以下功能：增加文字說明至線條 Feature 上方、變更顯示的文字來源、使用 setStyle 變更文字大小及顏色
線條的彈跳視窗
在地圖上與線條地圖項目的互動事件。範例內容為使用彈跳視窗，快速檢視指定屬性內容，取得 Feature 相關資訊。
線條的互動效果
在地圖上與線條 Feature 的互動事件。範例內容為以下：使用 overrideStyle 及 revertStyle 開發、覆蓋線條寬度、覆蓋線條透明度
線條調整外觀
在地圖上使用 Feature 繪製線條。此範例中含有以下功能：使用 getFeatureById 及 setGeometry 功能、變更棕色線條座標位置、變更棕色線條顏色
線條條件隱藏
透過 setStyle 設定樣式，能輕鬆對個別 Feature 的可視性做調整。
線條的顯示狀態
透過樣式設定，能快速對各個類別的圖層顯示或是隱藏。此範例中含有以下功能：使用 setStyle 隱藏所有線條 Feature、使用 toGeoJson 查看整個資料層的內容
多邊形的增刪
在地圖上使用 Feature 繪製多邊形。範例內容為使用 removeFeatureById 移除圖元、使用 removeFeature 移除圖元、使用 add 加入圖元、使用 toGeoJson 檢查資料層內容
多邊形的點擊事件
在地圖上與多邊形 Feature 的互動事件。範例內容為變更多邊形顏色、設定中間的多邊形為不可點擊 Feature、滑鼠游標在可點擊幾何圖案範圍內更改游標圖案
多邊形增加文字
使用 displayFeatureText 及 removeDisplayText，增加文字說明至多邊形中心，顯示多邊形資訊。此範例中含有以下功能：增加文字說明至多邊形 Feature 中心、變更顯示的文字來源、使用 setStyle 變更文字大小及顏色
多邊形的彈跳視窗
在地圖上與多邊形地圖項目的互動事件。範例內容為使用彈跳視窗，快速檢視指定屬性內容，取得 Feature 相關資訊。
多邊形的互動效果
在地圖上與多邊形 Feature 的互動事件。範例內容為以下：使用 overrideStyle 及 revertStyle 開發、覆蓋多邊形外框寬度、覆蓋多邊形外框顏色、覆蓋多邊形顏色
多邊形調整外觀
在地圖上使用 Feature 繪製多邊形。此範例中含有以下功能：變更多邊形位置、調整多邊形外框透明度、返回預設樣式
多邊形條件隱藏
透過 setStyle 設定樣式，能輕鬆對個別 Feature 的可視性做調整。
多邊形的顯示狀態
透過樣式設定，能快速控制多邊形類型圖層的顯示或隱藏，並搭配 toGeoJson 查看整個資料層內容。
圓形的增刪
在地圖上使用 Feature 繪製圓形。範例內容為使用 removeFeatureById 移除圖元、使用 removeFeature 移除圖元、使用 add 加入圖元、使用 toGeoJson 檢查資料層內容
圓形的點擊事件
在地圖上與圓形 Feature 的互動事件。範例內容為變更圓形顏色、設定中間的圓形為不可點擊 Feature、滑鼠游標在可點擊幾何圖案範圍內更改游標圖案
圓形增加文字
使用 displayFeatureText 及 removeDisplayText，增加文字說明至圓形中心，顯示圓形資訊。此範例中含有以下功能：增加文字說明至圓形 Feature 中心、變更顯示的文字來源、使用 setStyle 變更文字大小及顏色
圓形的彈跳視窗
在地圖上與圓形地圖項目的互動事件。範例內容為使用彈跳視窗，快速檢視指定屬性內容，取得 Feature 相關資訊。
圓形的互動效果
在地圖上與圓形 Feature 的互動事件。範例內容為使用 overrideStyle 及 revertStyle 開發、覆蓋圓形外框寬度、覆蓋圓形外框顏色、覆蓋圓形顏色
圓形調整外觀
在地圖上使用 Feature 繪製圓形。此範例中含有以下功能：變更圓形位置、調整圓形外框透明度、返回預設樣式
圓形條件隱藏
透過 setStyle 設定樣式，能輕鬆對個別 Feature 的可視性做調整。
圓形的顯示狀態
透過樣式設定，能快速控制圓形類型圖層的顯示或隱藏，並搭配 toGeoJson 查看整個資料層內容。

控制器

mapThree