標籤: Map 頁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)。

網路資源

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

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

網路資源

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

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

網路資源

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

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

教學

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

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

教學

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

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