iT邦幫忙

openlayers相關文章
共有 31 則文章
鐵人賽 Modern Web DAY 7

技術 Day 07. WebGIS基本 #1:底圖切換、地圖小工具

前言 昨天我們已經建立完地圖了,今天要來加一些每個WebGIS都會有的基本小功能,像是:底圖切換、導航工具、滑鼠坐標、比例尺、鷹眼圖,還有一些比較不常用但也可以...

鐵人賽 Modern Web DAY 6

技術 Day 06. 初訪WebGIS與本機網站架設

前言 前幾天先把資料庫、地圖服務都搞定了,現在就要來開始寫圖台了加緊腳步,今天就可以有一個像樣的畫面了! 今天的主要大綱: 先介紹一下預計的網頁架構 建立AS...

鐵人賽 Modern Web DAY 11

技術 Day 11. WebGIS多元數據載入與圖層列表WS

前言 今天回歸寫程式,發現寫文章的速度趕不上發文的速度,但我還是會努力把文章生出來的!平常太少寫文章了,文筆不是很好請見諒。 若有用過GIS相關系統的人應該都知...

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 9

技術 Day 09. WebGIS基本 #3:圖面量測小工具

前言 WebGIS基本功能系列來到第三天了,今天沒有什麼遠大的目標,就是把圖面量測小工具搞定而已! 圖面量測小工具 Openlayers的圖面量測官網範例基本上...

鐵人賽 Modern Web DAY 12

技術 Day 12. WebGIS加載自行發布之wms服務、圖層開關與定位

銜接昨天的圖層清單功能,今天略過前言,直接進入主題 今天的大綱 圖層資料庫建立 (Day 11) 1-1. 建立Database Schema (Day 1...

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 8

技術 Day 08. WebGIS基本 #2:地圖小工具統整、圖層探查

前言 昨天已經寫完了地圖小工具的所有功能function,今天就要要把這些funtion塞到介面上給使用者自由操作自由開關。另外再開發一個小功能,可以有一個框框...

鐵人賽 Modern Web DAY 1

技術 Day 01. 寫文章比寫程式難 (前言)

為什麼要寫這個題目 參加30天鐵人是為了要讓自己有壓力撰寫和系統性地統整技術文章,並加強自己的撰寫敘述技巧思考了很久要寫什麼題目,想來想去還是先從自己較為熟悉的...

技術 openlayers 4.5 計算兩點距離

使用的版本為 openlayers-v4.5.0 參考https://openlayers.org/en/v4.6.5/apidoc/ol.Sphere.htm...

鐵人賽 Modern Web DAY 29

技術 Day 29. WebGIS地圖列印

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

技術 【Day01】Openlayers從入門到微精通 - 創建屬於自己的地圖

在學習openlayers時首先要理解openlayers中的結構,想當初我自己也是模模糊糊地就撞了進去,搞了老半天也看不懂到底在幹嘛,最後才發現原來open...

技術 【Day05】Openlayers從入門到微精通 - 換上自己喜歡的底圖

在openlayers中我們可以使用API提供的OSM,也可以額外依照需求設定自己的圖磚路徑 下面是內政部國土測繪中心提供的wmts圖磚連結,我們可以更換sou...

技術 【Day13】Openlayers從入門到微精通 - View出想要的位置

Openlayers中有許多元件,這次來玩看看View元件,透過控制View的中心點位置來讓使用者移動到想要的位置 有幾種不同的做法如下 方法一: https:...

技術 【程式開發筆記05】實作React.js SPA搭配.NET Core API,新增一個Openlayers頁面

本來想加入Openlayers( https://openlayers.org/ ) (version 7.4.0 )已全面改用JavaScript ES6,還...

技術 【Day04】Openlayers從入門到微精通 - 放上自己的登山軌跡KML、GPX

大家好,恭喜你來到了Day04,今天要來了解如果我們有一個KML或GPX軌跡我們該如何放到地圖上呢? 首先,我們先要去取得我們的資料,這邊使用的範例是水利地理資...

技術 【Day09】Openlayers從入門到微精通 - 動動你的手來量測地球2

https://openlayers.org/en/latest/examples/measure-style.html 控制測量工具Day08是透過overl...

技術 【Day03】Openlayers從入門到微精通 - 新增線段

到了第三天,我想應該對於OL有一點點點點點的感覺了吧? 新增線段和新增點非常相似,咱們只需要把geometry中的物件換成LineString物件即可,同時記得...

技術 【Day02】Openlayers從入門到微精通 - 新增座標點

如果你還沒有完成Day01的內容,請先去了解喔!! 階層 在我們新增座標點在地圖上之前,我們需要了解到openlayers中的階層問題如下 map vect...

技術 【Day07】Openlayers從入門到微精通 - 比例尺

官網的範例參考https://openlayers.org/en/latest/examples/scaleline-indiana-east.html 方案一...

技術 【Day06】Openlayers從入門到微精通 - 顯示滑鼠座標位置

Control openlayers中control是用來控制地圖的元件https://openlayers.org/en/latest/apidoc/modu...

技術 【Day08】Openlayers從入門到微精通 - 動動你的手來量測地球1

參考文章https://openlayers.org/en/latest/examples/measure.html 跟官網的範例比較,我有把一些我認為比較會會...

技術 【Day12】Openlayers從入門到微精通 - Show出咖啡廳的資訊(Overlay)

記得先去嘗試Day11,先把咖啡廳的位置顯示在地圖上面 今天要是昨天的延伸,要來顯示feature中的資訊 注意,顯示資料前需要確保feature內是有資料的,...

技術 【Day11】Openlayers從入門到微精通 - Show出你喜愛的咖啡廳位置

如果上一篇有了解的話,此篇只是單純加上取得額外json後再進行地圖點標註,未來可以依照需求更換想要的展示圖案。 上一篇是用新增的方式慢慢加入style和laye...