前言

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

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

（線）處理完點自然就是線了，在處理線的時候我一開始的思路就是拿角度去比對，如果是統一角度的就說明我們點選的點在這條線上面，如果不是統一角度就不在這條線上，這個方法後來我實行了，當然這個也是存在誤差的，我指定好了誤差之後就可行的，但是在效能上不好，沒有在距離的方法有效，因為如果我們用角度的話，角度會根據大小的不同誤差級別，也就是說角度本身就有誤差，在加上我們的肉眼的誤差這樣就相當於放大了誤差，所以最後在專案裡我放棄了角度的方法，後來我換了一種思路，我可以求點到直線的距離啊，這樣我就成功的將角度的問題轉換成了上面的距離的問題了，而且高中我們都會用點到直線的距離公式，而且倆個點確定直線的方程我們也都會使用最後整理了一下就是下面的程式碼來實現球點到直線的距離，拿到了距離了就回歸了我們上面的點的處理中了，我們只要指定誤差範圍就可以了。
（總結）理論呢就是這麼多，估計有的同學已經開始著急了，怎麼還沒有程式碼啊，個人覺得！授人以漁不如授人以漁。所以我在上面才嘮叨半天，只要你們理解我的思路，下面的程式碼只需要有初中的水平就可以看得懂了。
/續上/
程式碼實現

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

}

map.events.register("click", map, function(e) {
//編寫點選事件

2、獲取螢幕座標從而轉向地理座標
var lonlat = map.getLonLatFromPixel(e.xy);
3、通過地理座標去和已有的資料進行匹配查詢，這裡說的已有資料是說資料庫中已經存在的點和線的資料，我現在js模擬一下資料庫的寫法（data就是資料裡的資料）

if(data.length>1){
    var min=getDis(data[0].x, data[0].y, data[1].x, data[1].y, lonlat.lon, lonlat.lat);
    var index=0;
    for(var i=0;i<data.length;i++){
    <span style="font-family:SimHei;">    </span>if(i<data.length-1){
        var fx = data[i].x;
        var fy = data[i].y;
        var tx = data[i+1].x;
        var ty = data[i+1].y;
    <span style="font-family:SimHei;">    </span>}
    var dis = getDis(fx, fy, tx, ty, lonlat.lon, lonlat.lat);
        if(dis<min){
                min=dis;
                index=i;
          }
    }
    var wc = judgediswc(map.getZoom());
        if(wc>=min){
                
        //在誤差範圍內，可以認為是同一線
        var lineName = data[index].site_name+">"+data[index+1].site_name;
        //alert(lineName);
        $("#qds").val(lineName);
        }else{
          searRailLine(lonlat.lon, lonlat.lat);
        }
    }else{
        searRailLine(lonlat.lon, lonlat.lat);
    }

4、這裡提到的getDis 和 judgediswc 還有searRailLine這幾個方法都是自己去寫的，他們的作用是分別計算點到直線的距離、點到直線距離和誤差的比較、去真實資料庫查詢線的方法。下面進行這三個方法的講解
4-1、獲得點到直線的距離，這個就是我們初高中經常用到的點到直線距離公式，自己稍加推到就可以看得懂了，這個沒有什麼技術含量，只有別把座標位置放錯了，就可以了，這個返回的dis就是我們需要的距離。這個演算法我在資料裡也封裝好了，待會最後我會帖進來的。

function getDis(fx,fy,tx,ty,lon,lat){
    var dis = 637800.138 * (
            Math.abs(
            (
            (ty - fy) * lon
            ) + (
            (fx -
                    tx) *
            lat
            ) + tx * fy - ty * fx
            )
            ) / (
                    Math.pow(
            (ty
            - fy) * (ty - fy) + (fx -
                    tx) * (fx -
                            tx),
            0.5
            )
            );
    return dis;
}

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

function judgediswc(level){
    var dis=0;
    var angle=0;
    if(level==15){
        dis=12;
        angle=42;
    }else if(level==14){
        dis=16;
        angle=94;
    }else if(level==13){
        dis=52;
        angle=149;
    }else if(level==12){
        dis=69;
        angle=403;
    }else if(level==11){
        dis=178;
        angle=479;
    }else if(level==10){
        dis=294;
        angle=1093;
    }else if(level==9){
        dis=682;
        angle=1449;
    }else if(level==8){
        dis=1488;
        angle=4143;
    }else if(level==7){
        dis=3521;
        angle=4617;
    }else if(level==6){
        dis=6636;
        angle=5265;
    }else if(level==5){
        dis=7051;
        angle=30217;
    }else if(level==4){
        dis=25763;
        angle=68126;
    }else if(level==3){
        dis=60342;
        angle=120000;
    }else if(level==2){
        dis=88189;
        angle=220000;
    }else if(level==1){
        dis=110189;
        angle=1000000;
    }
    return angle;
}

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

function searRailLine(lon,lat){
    var sus = function(json, status) {
        //alert();
        var lineName = json.map[0].station_name+"站"+">"+json.map[0].next_name+"站";
        $("#qds").val(lineName);
        siteJson = json.map;
    };
    AjaxUtil.ajaxCon(path + "/echartMap/selectLineNameStr.json", {lon:lon,lat:lat,angle:judgediswc(map.getZoom())},
            sus);
}

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

 <select id="selectLine" resultType="java.util.HashMap">
        SELECT
        line_name,
        station_name,
        station_x,
        station_y,
        next_name,
        next_x,
        next_y,
        t
        FROM
        (
        SELECT
        line_name,
        station_name,
        station_x,
        station_y,
        next_name,
        next_x,
        next_y,
        637800.138 * (
        ABS(
        (
        (station_y - next_y) * #{x}
        ) + (
        (next_x -
        station_x) *
        #{y}
        ) + 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
        < #{angle}
        AND station_y >= #{y}
        AND next_y <= #{y}
        order by t asc limit 0,1
    </select>

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

 <select id="selectPosition" resultType="String" parameterType="HashMap">
    <![CDATA[   
        SELECT
            t.name
        FROM
            (
                SELECT
                    x.name,
                    ROUND(
                        6378.138 * 2 * ASIN(
                            SQRT(
                                POW(
                                    SIN(
                                        (#{y} * PI()
        / 180 - y * PI() / 180) / 2
                                    ),
                                    2
                                ) + COS(
                                    #{y} * PI() / 180) * COS(y *
                                    PI() / 180
                                ) * POW(
                                    SIN(
                                        (
                                            #{x} * PI() / 180 - x * PI() / 180
                                        ) / 2
                                    ),
                                    2
                                )
                            )
                        ) * 1000
                    ) AS dis
                FROM
                    (select  SITE_NAME name ,fx x,fy y from TKYZ_BASE
                                UNION 
                                select SITE_NAME name,fx x,fy y from THYZ_BASE
                                UNION
                                select SITE_NAME name,fx x,fy y from TKHYZ_BASE
                                UNION
                                select SITE_NAME name,fx x,fy  y from TYXHR_BASE
                                UNION
                                select SITE_NAME name,fx x,fy y from TBZQD_BASE)x
            ) AS t
        WHERE
            t.dis BETWEEN 0
        AND #{z}
        order by t.dis asc limit 1
        ]]>
    </select>

效果貼圖

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

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

3、點選非高亮地區會去查詢資料庫中的資料，就是真正的資料，如果點選在線上了也會彈出線的詳細資訊

4、如果我們點選在點上面就會 是點的相應資訊，就不貼出來了，在高亮的線上我留個bug就是線上的延長線上也是認為在線上的，實際上不應該認為是線上，這點由於時間緊急我當時就沒有寫，讀者有興趣自己補充，提示一下判斷點的位置是否線上的兩端的中間就可以了，這個功能在點選非高亮線的sql語句我實現了的，可以參考一下。
總結

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

加入戰隊

# 加入戰隊

微信公眾號

相關推薦