iT邦幫忙

openlayers相關文章
共有 36 則文章
0 Like 0 留言 818 瀏覽

技術 【Day18】Openlayers從入門到微精通 - Geolocation顯示你的位置

咱們是使用Geolocaion API，可以依照範例程式碼1-5來設定，要注意的是放到正式機的時候chrome限制要用https加密過後的才會正常運行，這個在l...

weijung0923 ‧ 2024-06-04
0 Like 0 留言 336 瀏覽

技術 【Day17】Openlayers從入門到微精通 - 地震效果

因為最近地震很多，想說來玩玩看製作一個地震效果的特效，這次是使用ol-ext提供的function來玩，我把一些會影響理解的地方刪除了，這樣應該可以快速使用吧?...

weijung0923 ‧ 2024-05-14
0 Like 0 留言 459 瀏覽

技術 【Day16】Openlayers從入門到微精通 - 塗鴉(點、線、面)

塗鴉 官網範例：https://openlayers.org/en/latest/examples/draw-features.html在openlayers中...

weijung0923 ‧ 2024-05-07
1 Like 0 留言 761 瀏覽

技術 【Day15】Openlayers從入門到微精通 - Cluster

Cluster稍微複雜一點，但是依照1-4步驟應該可以順利的完成並顯示Cluster在地圖上面。要注意的是層級結構，也就是誰包含誰，我記得我一開始學習的時候都搞...

weijung0923 ‧ 2024-04-20
0 Like 0 留言 723 瀏覽

技術 【Day14】Openlayers從入門到微精通 - Heatmap熱區圖

基本上熱區圖是換到對應的API即可使用ol.layer.Heatmap以下是官網的範例，我只是抽出來我認為重要的部分，其他參數的調整或設定就依照專案需求調整控制...

weijung0923 ‧ 2024-04-20
0 Like 0 留言 784 瀏覽

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

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

weijung0923 ‧ 2024-03-28
0 Like 0 留言 537 瀏覽

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

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

weijung0923 ‧ 2024-03-18
0 Like 0 留言 439 瀏覽

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

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

weijung0923 ‧ 2024-03-15
1 Like 0 留言 480 瀏覽

技術 【Day10】Openlayers從入門到微精通 - 換上喜歡的樣式(點)

官網範例https://openlayers.org/en/latest/examples/icon.html 範例中我們可以很清楚的看到openlayers的...

weijung0923 ‧ 2024-03-11
0 Like 0 留言 632 瀏覽

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

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

weijung0923 ‧ 2024-03-08
0 Like 0 留言 524 瀏覽

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

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

weijung0923 ‧ 2024-03-04
0 Like 0 留言 517 瀏覽

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

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

weijung0923 ‧ 2024-02-29
0 Like 0 留言 610 瀏覽

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

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

weijung0923 ‧ 2024-02-29
0 Like 0 留言 859 瀏覽

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

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

weijung0923 ‧ 2024-02-21
0 Like 0 留言 588 瀏覽

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

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

weijung0923 ‧ 2024-02-21
0 Like 0 留言 501 瀏覽

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

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

weijung0923 ‧ 2024-02-21
0 Like 0 留言 723 瀏覽

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

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

weijung0923 ‧ 2024-02-20
1 Like 0 留言 808 瀏覽

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

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

weijung0923 ‧ 2024-02-20
0 Like 0 留言 628 瀏覽

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

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

PinShengs ‧ 2023-07-26
0 Like 0 留言 1925 瀏覽
鐵人賽 Modern Web DAY 29
WebGIS入門學習 - 以Openlayers實作 系列 第 29 篇

技術 Day 29. WebGIS地圖列印

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

JYHsu ‧ 2020-10-09
0 Like 0 留言 1867 瀏覽
鐵人賽 Modern Web DAY 28
WebGIS入門學習 - 以Openlayers實作 系列 第 28 篇

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

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

JYHsu ‧ 2020-10-08
1 Like 0 留言 1428 瀏覽
鐵人賽 Modern Web DAY 26
WebGIS入門學習 - 以Openlayers實作 系列 第 26 篇

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

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

JYHsu ‧ 2020-10-06
1 Like 0 留言 1640 瀏覽
鐵人賽 Modern Web DAY 30
WebGIS入門學習 - 以Openlayers實作 系列 第 30 篇

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

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

JYHsu ‧ 2020-10-10
0 Like 0 留言 1137 瀏覽
鐵人賽 Modern Web DAY 25
WebGIS入門學習 - 以Openlayers實作 系列 第 25 篇

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

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

JYHsu ‧ 2020-10-05
0 Like 0 留言 1443 瀏覽
鐵人賽 Modern Web DAY 24
WebGIS入門學習 - 以Openlayers實作 系列 第 24 篇

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

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

JYHsu ‧ 2020-10-04
0 Like 0 留言 1516 瀏覽
鐵人賽 Modern Web DAY 17
WebGIS入門學習 - 以Openlayers實作 系列 第 17 篇

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

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

JYHsu ‧ 2020-09-27
1 Like 0 留言 2862 瀏覽
鐵人賽 Modern Web DAY 16
WebGIS入門學習 - 以Openlayers實作 系列 第 16 篇

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

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

JYHsu ‧ 2020-09-26
0 Like 0 留言 2307 瀏覽
鐵人賽 Modern Web DAY 14
WebGIS入門學習 - 以Openlayers實作 系列 第 14 篇

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

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

JYHsu ‧ 2020-09-24
0 Like 0 留言 2266 瀏覽
鐵人賽 Modern Web DAY 12
WebGIS入門學習 - 以Openlayers實作 系列 第 12 篇

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

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

JYHsu ‧ 2020-09-22
1 Like 0 留言 3091 瀏覽
鐵人賽 Modern Web DAY 11
WebGIS入門學習 - 以Openlayers實作 系列 第 11 篇

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

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

JYHsu ‧ 2020-09-21
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22207 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙