在 Google Maps 內多邊形取點 Point in Polygon 這是項個人開發的工具,而且需要前後端配合一起弄的作品,主要目的是撈出藉由不規則多邊形範圍內的點座標。 前端 主要是 Google Maps JavaScript API v3 的地圖服務應用,利用 Google Maps Marker、Google Maps Polyline 去畫出一個不規則多邊形,並且利用 Ajax 去後端撈取…

在 Google Maps 內多邊形取點 Point in Polygon

這是項個人開發的工具,而且需要前後端配合一起弄的作品,主要目的是撈出藉由不規則多邊形範圍內的點座標。

Demo 動畫

前端

主要是 Google Maps JavaScript API v3 的地圖服務應用,利用 Google Maps MarkerGoogle Maps Polyline 去畫出一個不規則多邊形,並且利用 Ajax 去後端撈取範圍內的 Marker,當 Ajax 傳回後端之前,先將該多邊形角的座標點利用 Google Maps LatLngBounds 物件計算出多邊形的範圍(東北-西南)座標,然後將範圍座標以及多邊形的角座標一併回傳給後端。

後端

使用 CodeIgniter 最簡單的寫法,當接收到 Ajax 的 Request 之後,便開始撈資料。撈取資料的步驟拆成兩個步驟,首先利用範圍座標的東北-西南座標進 MySQL 撈出範圍內的點,此時的點是一個矩形範圍,所以需要再進入第二項的 filter 利用公式將多邊形外的點過濾掉,最後 Output 回去給前端即可。

小結

此包專案使用原生 CodeIgniter 所撰寫,所以有基礎的 CodeIgniter framework know how 即可看懂。

  • 前端 JavaScript 位置在:assets/js/main.js
  • 後端 controller 位置在:application/controllers/main.php
  • 後端撈出範圍座標的作法:application/models/marker_model.php
  • 後端計算多邊形範圍內的 function:application/helpers/main_helper.php

※ 因系統維護關係,所以目前已暫時先將 Live Demo 網址關閉囉,請大家先參考 GitHub 的原始碼吧!

相關參考

全景相簿 Theta S 360 - OA Wu's Blog
全景相簿 Theta S 360
全景相簿 Theta S 360 這是一項特別的作品,由於近幾年全景攝影器材的進步,所以全景影片、全景照片漸漸的流行起來,而最近剛好也入購了 RICOH Theta S 全景攝影機,所以我便實作了一下 360度全景相簿,這作品我特意分成兩個專案,分別是純前端、純後端的角度切入,所以在 GitHub 上會有兩包 code,以下會大略的說明! 由…
雙北市行政區域範圍座標 - OA Wu's Blog
雙北市行政區域範圍座標
雙北市行政區域範圍座標 雙北市行政區域範圍座標,藉由大家一起來維護劃分出雙北市甚至於全台灣的行政區域、鄉鎮區域的範圍座標。 會實作出此專案主要目的是為了取得雙北市行政區域範圍座標,但因為 Google Maps JavaScript API 找不到可以取得行政區的範圍座標,故才自己畫完雙北市的範圍座標,並且藉此分享出來給大家使…
2016 白沙屯媽祖南下進香 GPS 系統 - OA Wu's Blog
2016 白沙屯媽祖南下進香 GPS 系統
2016 白沙屯媽祖南下進香 GPS 系統 白沙屯媽祖南下北港遶境 GPS 定位實作,是我目前 Google Analytics(GA) 即時流量 最高也是 Server Loading 最大的任務之一,實作過成功嘗試多樣的系統架構,以達成最低成本、最高效率的方式服務信徒。 此項任務難點會在活動期間會有大量的 Request 打進 Server,所以勢必會對伺服器造成…
VG 鉅臣 - OA Wu's Blog
VG 鉅臣
VG 鉅臣 這是一個前端技術的外包案實作,其網站名稱為 VG 鉅臣,此專案主要負責前端刻板部份,版型設計則由宙思設計所製作。 此專案為純前端的實作,有鑒於網站架構的特性,於是將網頁命名以中文顯示,一方面增強 SEO,另一方面方便素材人員配合更換素材(命名規則)。而網站前台可以發現都有固定幾項規則,所以就使用 jQuer…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
在 Google Maps 內多邊形取點 Point in Polygon