iT邦幫忙

webgis相關文章
共有 49 則文章
鐵人賽 Modern Web DAY 30

技術 《你的地圖會說話? WebGIS與JavaScript的情感交織》結束,才是真正的開始。

一路走來 不知不覺已到了Day30了,這一天說長不長說短不短。 其實大概從Day5開始,就已經覺得很累很痛苦很想放棄了。 但凡事皆要有始有終,不到萬不得已絕不輕...

鐵人賽 Modern Web DAY 29

技術 [3D地圖-CesiumJS系列] 三、車輛廢氣排放地圖 - 以粒子系統(Particle system)實作

本篇文章請搭配 [3D地圖-CesiumJS系列] 一、快速上手 [3D地圖-CesiumJS系列] 二、建立飛航軌跡及動畫 今天要來介紹CesiumJS的粒...

鐵人賽 Modern Web DAY 28

技術 [3D地圖-CesiumJS系列] 二、建立飛航軌跡及動畫

本篇文章請搭配 [3D地圖-CesiumJS系列] 一、快速上手 不知道大家在飛機上時會不會好奇飛機行進到哪裡? 飛行高度多少?飛行軌跡如何? 身為好奇寶寶的...

鐵人賽 Modern Web DAY 27

技術 [3D地圖-CesiumJS系列] 一、快速上手

今天要來介紹3D地圖的一個API,CesiumJS。 CesiumJS為一個開源JavaScript函式庫, 在2011年由一群資料視覺化的團隊開發, 並致力於...

鐵人賽 Modern Web DAY 26

技術 [Vue2Leaflet系列二] Leaflet Plugins with Vue

本篇文章請參考 [Vue2Leaflet系列一] 從vue-cli安裝到建置地圖 之前介紹過Leaflet Plugins的許多擴充功能, 那麼用vue開發的...

鐵人賽 Modern Web DAY 25

技術 [Vue2Leaflet系列一] 從vue-cli安裝到建置地圖

Web前端瞬息萬變的今天, 相信大家都有聽過前端主流的三大框架:angular、react、vue, 如今也有許多前端工程,邁向模組化、系統化的開發模式, 並且...

鐵人賽 Modern Web DAY 30

技術 Day 30. 以WebGIS為主題的鐵人賽30天完賽心得

前言 終於到了最後一篇,話不多說,今天主要有3大主題: 首先先來回顧30天的文章內容 再來分享一些我原本想加進文章但沒時間加進去的內容 最後就是完賽心得拉!...

鐵人賽 Modern Web DAY 24

技術 [8-3] 讓Marker動起來! 實作Leaflet.MovingMarker與bouncemarker

本系列文章為Leaflet Plugins介紹: [8-1] 展點多到爆?那就試試看 Leaflet MarkerCluster吧! [8-2] heatmap...

鐵人賽 Modern Web DAY 29

技術 Day 29. WebGIS地圖列印

前言 最後一天的系統開發學習我們來說明如何輸出地圖資料,可以輸出為PNG、JPEG與PDF的格式。 地圖列印功能建置 新增 AdvanceTool/Export...

鐵人賽 Modern Web DAY 23

技術 [8-2] heatmap.js 熱區- 以Leaflet地圖實作

本系列文章為Leaflet Plugins介紹: [8-1] 展點多到爆?那就試試看 Leaflet MarkerCluster吧! 上篇文章介紹了Leafl...

鐵人賽 Modern Web DAY 28

技術 Day 28. 全台GPS三維形變時序資料查詢

前言 今天我們要學習如何 展示全台GPS三維形變的時序性資料 ,這個功能是把這28天以前學到的東西做一個統整,把整個流程串起來,跟以往比較不一樣的是這次的資料來...

鐵人賽 Modern Web DAY 22

技術 [8-1] 展點多到爆?那就試試看 Leaflet MarkerCluster吧!

展點,把一堆點資料展在地圖上。 如果今天點的數量很多很多,除了圖台效能受到影響外, 視覺上也不美觀,那要怎麼樣呈現才能解決點多到爆的問題呢? 那就用群聚吧!我們...

鐵人賽 Modern Web DAY 27

技術 Day 27. 今天不寫程式改來學知識 #5:前端RWD與圖表套件

前言 今天來討論前端RWD的套件、表格的套件、圖表的套件分別有哪些好用的、可以當作參考。 目前js相關的前端套件非常多,使用者可以依據自己的需求進行選擇,有些為...

鐵人賽 Modern Web DAY 26

技術 Day 26. 如何在地圖上畫Pokemon #3:還原使用者儲存之繪圖

昨天完成了儲存繪圖圖形,今天就是要將那些儲存的圖形列表撈出來,並讓使用者套疊和管理。 今天的大綱 撈出儲存列表之API建立 還原使用者儲存之繪圖小工具 前端建...

鐵人賽 Modern Web DAY 25

技術 Day 25. 如何在地圖上畫Pokemon #2:儲存繪圖API建立

接續昨天的繪圖,今天要將繪製的圖形存到使用者的個人繪圖當中。 今日的大綱 儲存頁面建立 資料庫建立 儲存繪圖API建立 前端圖形feature拆解 前端介接儲...

鐵人賽 Modern Web DAY 24

技術 Day 24. 如何在地圖上畫Pokemon #1:繪圖工具的建立

前言 結束了API和權限的部分,今天要回歸WebGIS繪圖功能的部分,讓大家都可以在地圖上畫一隻或更多隻的Pokemon。 還記得以前有大學生研究生來參訪,...

鐵人賽 Modern Web DAY 18

技術 [7-1] 3D地圖初探 - ArcGIS API for JavaScript

原本這篇預定要介紹ArcGIS API for JavaScript, 但是想想如果繼續介紹點、線、面、圖層套疊等等, 只是換個圖台API,換個寫法,未免無趣。...

鐵人賽 Modern Web DAY 23

技術 Day 23. API登入權限控管機制 #4:前端套用帳號驗證與API權限管控

前言 今天是 API登入權限控管機制 系列最後一天,昨天已經建立好帶有權限的API了,今天我們就要來修改前端的功能!! 將登入機制導入並且修改介接的API,最後...

鐵人賽 Modern Web DAY 17

技術 [6-2] KML & GeoJSON - 以Leaflet KML layer plugin實現

今天要來繼續介紹WebGIS常用的資料格式。KML及GeoJSON。 KML及GeoJSON都是地理空間資料交換格式的一種, KML為xml格式資料,GeoJS...

鐵人賽 Modern Web DAY 16

技術 [6-1] 圖層套疊 - WMS & WMTS

之前介紹了一輪的點線面圖徵、展點及環域等等的向量資料後, 今天終於要來介紹網格資料啦! 今天要來介紹的有WMS以及WMTS, 是WebGIS常用於底圖、圖層套疊...

鐵人賽 Modern Web DAY 15

技術 [5-4] 環域查詢 - 完結篇

本篇文章請搭配 [5-1] 環域與繪圖工具 - 以Leaflet Draw實現 [5-2] Callback & Promise - 解決request...

鐵人賽 Modern Web DAY 18

技術 Day 18. 今天不寫程式改來學知識 #4:好用的OpenData與WebGIS網站

前言 今天我們來看一些OpenData的來源網站與相關的WebGIS系統,可以透過觀察別人的功能和資料,思考自己要開發的系統想要有哪些展示的資料與分析功能。 今...

鐵人賽 Modern Web DAY 17

技術 Day 17. WebGIS 的 Popup 點選圖面屬性顯示

前言 昨天我們完成了全台即時水位與水位站基本資料介接的功能,從圖面上可以一目了然看出哪些地方的水位站有超過警戒值、哪些沒有,但由於圖面上沒有顯示測站的名稱 (若...

鐵人賽 Modern Web DAY 16

技術 Day 16. 全台河川水位即時資料介接

前言 今天來進行河川水位站的介接,回歸寫程式囉~ 水位站資料API介接 水位站資料: 民生公共物聯網:水利署河川水位站API 水利署:WRA API 水...

鐵人賽 Modern Web DAY 10

技術 [番外篇] MSSQL Spatial 地理空間資訊查詢

今天邁入鐵人賽第十篇啦!(撒花~ 接著還有二十篇要與大家繼續努力! 寫了那麼多JavaScript想必大家也有點倦了, 今天就來講WebGIS不可或缺的SQL好...

鐵人賽 Modern Web DAY 15

技術 Day 15. 今天不寫程式改來學知識 #3:Local坐標系之正形與仿射轉換

前言 寫到Day15只有一個感想:恩...我的文章怎麼寫得越來越長 其實這次鐵人賽的每一篇都差不多是我一個晚上下班後寫的量,原本覺得還好,但文章打起來怎麼落落...

鐵人賽 Modern Web DAY 9

技術 [4-2] prototype chain 原型鏈、建構子與繼承 - 以Here Maps API為例

本篇文章請搭配 [4-1] 線、面資料圖徵 - 以行政區定位及導航為例 今天要來寫很頭痛的程式,準備好了嗎?跟著我~深呼吸~ 吸氣~吐氣~ 吸氣~吐氣~ Le...

鐵人賽 Modern Web DAY 14

技術 Day 14. 定位查詢功能建置、OpenData API介接

前言 昨天我們學會了坐標系統的相關知識,並利用proj4進行坐標轉換,而今天我們就要把坐標轉換這個用於定位功能開發上。 我們的圖台底圖是介接OpenStreet...

鐵人賽 Modern Web DAY 8

技術 [4-1] 線、面資料圖徵 - 以行政區定位及導航為例

線、面資料圖徵 繼之前介紹向量模式的點資料圖徵後,今天要來介紹線資料圖徵及面資料圖徵。線及面資料圖徵其實都是一群點所組成,並且有方向性,唯一的差別在於面資料的頭...

鐵人賽 Modern Web DAY 7

技術 [3-2] Scope Chain & IIFE 問題與解法 - 以Here Maps API展點為例

本篇文章請搭配 [3-1] 打造你的美食地圖!用Here Maps API 秀出Google API餐廳資訊 什麼是Scope Chain? 講到Scope...