標籤: WebGIS 頁1

教學

leaflet.js 設定 geoJson 樣式與綁定互動事件

説明設定 leaflet.js geoJson 樣式與綁定互動事件的方法。

教學

設定 leaflet.js 的地圖不要因為滑鼠捲動而縮放(Zoom)

要避免 leaflet.js 的地圖因為滑鼠捲動而縮放(Zoom)的話,在初始化的時候設置 scrollWheelZoom 即可。

教學

leaflet.js 透過 geoJson 將台灣行政區資訊繪製至地圖上

說明 leaflet.js 透過 geoJson 將台灣行政區資訊繪製至地圖上的方法。

網路資源

OpenLayers- 開源的 WebGIS 服務

OpenLayers 是一個開源的 WebGIS 服務,可以利用他做出類似 Bing Maps 或 Google Maps 的服務。支援GeoRSS、KML(Keyhole標記式語言)、地理標記式語言(GML)、GeoJSON和任何來源的地圖資料,這些資料都使用OGC標準作為Web地圖服務(WMS)或Web要素服務(WFS)。

教學

[Google Maps API] 關閉所有開啟的 infowindow

使用迴圈去設定 infoWindows[i].close() 就好。

教學

[Google Maps API] 一次只開一個 infowindow

在開啟的時候把其他的 infowindow 移除就好了。

教學

[Google Maps API] 更改地圖樣式

Google Maps API 可以輕鬆自定自己想要的地圖樣式,覺得地標太多太雜,或想要自定一個喜歡的色系,用這個就可以了。

教學

[Google Maps API] 更新地圖上的 marker

如果要在不刷新頁面的狀況下更新地圖上的標記,可以使用這個方式。

教學

[Google Maps API] 從地址取得座標位置

說明在 google maps api 從地址取得座標的方法。

教學

透過 Google Map API 取得目前位置

如果要透過 Google Maps API自動定位到目前的位置,可以參考本文寫法。

教學

Google Maps API- 使用圖層資料

Google Maps API 的圖層使用說明。

網路資源

eeGeo- 結合 leaflet.js 的 3D 圖資服務

eeGeo 是一個結合 leaflet.js 圖資的 3D 地圖服務,只要透過簡單的安裝就能夠在地圖上顯示 3D 的建築物,不過 3D 模型的部分好像還沒有全世界都很完善,要使用的時候要注意一下。

教學

[Vue.js] vue leaflet 基本設置與地圖樣式

在 vue leaflet 裡有確實安裝 component 後,只要使用 l-map 就可以把地圖顯示出來了,一樣透過 props 把參數傳進去後就能生成地圖了。

教學

[Vue.js] 使用 vue leaflet 來製作互動地圖- 基本安裝

之前我們提過用 leaflet.js 來取代 google maps製作互動地圖,這邊來用 vue 建立 web app,剛好有人弄好方便的工具 vue leaflet,測試一下還滿方便的,有興趣的可以用看看。

網路資源

使用 leaflet.js 來製作互動地圖

使用 leaflet.js 來製作互動地圖,內含套用 mapbox 的樣式。

網路資源

Snazzy Maps- 讓你的 Google Maps 套上不一樣的樣式

Google Maps 有提供使用者可以自訂地圖樣式,但如果要自己調可能得花上不少時間,而 Snazzy Maps 就是一個有存放著非常多已經設定好的 Google Maps 樣式的網站,只要點選喜歡的樣式,再將樣式的 json 檔案複製後貼到 Google Maps API 就可以了。