帶你剖析WebGis的世界奧秘點和線的世界

前言

昨天寫了好久的博文我沒儲存，今天在來想繼續寫居然沒了，氣死人啊這種情況你們見到過沒，所以今天重新寫，我還是切換到了html格式的書寫上大笑。廢話不多說了，我們現在就進入主題，上週我仔細研究了webgis基於openlayers的顯示問題，同事也略微的實現了地圖上的點選事件當然啦，這周我們將細分為點和線的點選事件，如果讀者有興趣也可以自己研究區域的點選事件，說白了就是我們初中時候學的那個三維立體的思想，或者讀者也可以私下找我交流。

邏輯思想

（點）在處理這些點選事件中我突然想到乙個很常見的思路，就是我通過點選來獲取螢幕的座標，然後在將螢幕的座標轉換成對應地圖上的經緯度，拿到經緯度之後去和資料庫裡面一條一條匹配，最後從資料查到這個點了我就將這個點的資訊給輸出，如果我沒有查到這個點就說明我沒有點選到這個點上。但是值得注意的一點就是我們地圖在螢幕上是很小的，是存在點選誤差的，什麼叫點選誤差就是我們點選地圖上的點我們肉眼上覺得是點選了點，但是實際上我們點選的那個點的座標和地圖上的那個點的座標是存在一定的誤差的，所以我為了實現肉眼上的點選點的事件，我在查詢資料庫的時候給定了乙個我們肉眼預設的誤差範圍的，也就是說我在資料中並不是真正去查這個點，而是查詢資料庫中的點到我這個店的距離的，只要這個距離小於我指定的誤差值，我就預設為這兩個點是同乙個點，這也就是我實現點的思路；那麼問題來了如果我在地圖上點選的時候出現了兩個點都和我這個點的距離在我的誤差範圍之內呢，答案是肯定會的，那麼有的讀者會問，這個該怎麼辦呢。不用擔心我有解決方法。在取到不止兩個的情況下我們去距離最小的那乙個，離的最近的我們預設選擇這個點的

（線）處理完點自然就是線了，在處理線的時候我一開始的思路就是拿角度去比對，如果是統一角度的就說明我們點選的點在這條線上面，如果不是統一角度就不在這條線上，這個方法後來我實行了，當然這個也是存在誤差的，我指定好了誤差之後就可行的，但是在效能上不好，沒有在距離的方法有效，因為如果我們用角度的話，角度會根據大小的不同誤差級別，也就是說角度本身就有誤差，在加上我們的肉眼的誤差這樣就相當於放大了誤差，所以最後在專案裡我放棄了角度的方法，後來我換了一種思路，我可以求點到直線的距離啊，這樣我就成功的將角度的問題轉換成了上面的距離的問題了，而且高中我們都會用點到直線的距離公式，而且倆個點確定直線的方程我們也都會使用最後整理了一下就是下面的**來實現球點到直線的距離，拿到了距離了就回歸了我們上面的點的處理中了，我們只要指定誤差範圍就可以了。

（總結）理論呢就是這麼多，估計有的同學已經開始著急了，怎麼還沒有**啊，個人覺得！授人以漁不如授人以漁。所以我在上面才嘮叨半天，只要你們理解我的思路，下面的**只需要有初中的水平就可以看得懂了。

/續上/

**實現

1、在map地圖上我們註冊點選事件，唯一不同的是我們在這裡自行區分點線

map.events.register("click", map, function(e) 
var dis = getdis(fx, fy, tx, ty, lonlat.lon, lonlat.lat);
if(dis=min)else
}else

4、這裡提到的getdis 和 judgediswc 還有searrailline這幾個方法都是自己去寫的，他們的作用是分別計算點到直線的距離、點到直線距離和誤差的比較、去真實資料庫查詢線的方法。下面進行這三個方法的講解

4-1、獲得點到直線的距離，這個就是我們初高中經常用到的點到直線距離公式，自己稍加推到就可以看得懂了，這個沒有什麼技術含量，只有別把座標位置放錯了，就可以了，這個返回的dis就是我們需要的距離。這個演算法我在資料裡也封裝好了，待會最後我會帖進來的。

function getdis(fx,fy,tx,ty,lon,lat)

4-2、誤差的大小（由於地圖的縮放級別不同，我們的誤差也不同，這個在前面的理論中我已經解釋過了，這個就不多說了）這個就返回我們肉眼能夠接受的誤差最大值

function judgediswc(level)else if(level==14)else if(level==13)else if(level==12)else if(level==11)else if(level==10)else if(level==9)else if(level==8)else if(level==7)else if(level==6)else if(level==5)else if(level==4)else if(level==3)else if(level==2)else if(level==1)
return angle;
}

4-3、下面的方法我們就是真正去資料庫查詢的，上面的方法沒有實際用處，只是為了掩飾給讀者的快捷方法（注意我ajax的傳參很重要）

function searrailline(lon,lat);
ajaxutil.ajaxcon(path + "/echartmap/selectlinenamestr.json", ,
sus);
}

5、具體的三層架構實現我就不寫了，相信能看到這裡的孩子們三層架構一定都了解。我直接貼sql語句（x，y，z分別是經度、緯度、地圖的顯示級別）方法中返回的是點到直線的最小距離（有可能有很多個直線都是符合的我們取最小的那個）

select
line_name,
station_name,
station_x,
station_y,
next_name,
next_x,
next_y,
tfrom
(select
line_name,
station_name,
station_x,
station_y,
next_name,
next_x,
next_y,
637800.138 * (
abs(
((station_y - next_y) * #
) + (
(next_x -
station_x) *
#) + station_x * next_y - station_y * next_x
)) / (
power(
(station_y
- next_y) * (station_y - next_y) + (next_x -
station_x) * (next_x -
station_x),
0.5)
) as t
from
rail_line
) as t
where
t< #
and station_y >= #
and next_y <= #
order by t asc limit 0,1

6、有的讀者會問了，說好的點和線呢，你的點呢，別著急啊，我先把難的講完簡單，點呢我就把sql語句貼出來，返回了距離的值，在後台你想怎麼辦就怎麼辦，那就看你自己了。對吧

效果貼圖

1、途中高亮顯示的是模擬的js中的資料，點選高亮部分就會在指令碼中查詢我模擬的資料

2、點選高亮線路（北京--》北京南--》豐台）跳出相應的線路資訊

研究了openlayers也有兩周了，這兩周學到的東西很多。學東西一定要從底層學，才可以學到真正的東西。openlayers的幾個基本功能我都已經實現了（地圖顯示+點線點選事件+定位點+定位線+居中顯示墨點+手型顯示），其他一些實時定位並隨地理位置變動而變動的這個功能沒有去實現，因為就兩周時間，也就這樣了，之間走了很多的彎路，所以發出博文希望對學習webgis的新同學有點幫助

加入戰隊

帶你剖析WebGis的世界奧秘點和線的世界

帶你剖析WebGis的世界奧秘點和線的世界

Python帶你走進鍊錶的世界

帶你走進設計模式內部類的世界

帶你剖析WebGis的世界奧秘 點和線的世界

帶你剖析WebGis的世界奧秘 點和線的世界

Python帶你走進鍊錶的世界

帶你走進設計模式 內部類的世界

相關推薦

帶你剖析WebGis的世界奧秘點和線的世界

帶你剖析WebGis的世界奧秘點和線的世界

帶你走進設計模式內部類的世界