基於圖片實現酷炫地圖展現和交互的方案

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1. 背景

       目前大屏幕上展現酷炫地圖的需求日益成風，咱們常規的方案是使用arcmap對數據進行配圖。可是，arcmap配圖的侷限性比較大，而且針對不一樣需求，常規配圖方案也許反而讓事情複雜化了。這裏跟你們分享兩個經過美工設計的圖片來解決地圖問題的案例。

2. 案例1——傾斜地圖

    

    

     此示例中，需求總結有兩點：

    a.地圖須要傾斜展現。

    b.地圖上須要以不一樣形式展現一些POI點。

    若是以傳統方案來作，對地圖配圖後還須要對二維地圖框架的容器進行傾斜，而且對所須要展現的POI數據座標點進行傾斜轉換，實現比較費力。

    仔細研究需求，其交互設計上只有針對點數據POI的交互，切交互簡單，並且在大屏的總體展現中，地圖不須要有縮放平移需求。因而，咱們能夠給出另一種實現思路：

    a.不用地圖框架，前端用DIV引入原始未傾斜圖片。

    b.用CSS控制該DIV的傾斜角度。

    c.設定圖片左上角的地理座標，肯定圖片的1個像素所表明的地理長度，而後針對POI地理座標算出其在原始圖片上的圖片座標。

    d.得到POI的原始圖片座標後，再利用傾斜角度算出在傾斜圖片上的圖片座標，而後一樣利用DIV引入該POI的圖標便可。 

3. 案例2——複雜交互的三維效果地圖

    一樣，先給出設計稿：

   

   

    需求描述：

    a.帶3D效果展現地圖。

    b.行政區劃能夠選中交互。

    c.行政中心點圖標能夠控制。

    難點分析：

    按照上一個方案中的純前端方法，在行政區劃的選中高亮交互上有必定難度。這裏提出了另一個方案：

    a.將3D效果地圖當作是真實地圖，進行簡單糾正，處理成包含地理座標的真實地圖。    

    

    b.基於糾正後的圖片，將行政區劃矢量化。

    c.將地理圖片切圖，並用GIS框架加載。

    d.將處理好的矢量化行政數據以矢量圖層疊加，響應交互。

    e.將行行政中心點在GIS框架上疊加展現。

    f.鼠標移動到行政點上後獲取到行政點的屏幕座標，利用DIV將設計好的氣泡框結合自定義內容進行交互展現。

4. 總結

    咱們作GIS的人看到地圖就不由自主的想用地圖框架去實現，須知針對不一樣需求，解決方案能夠是多種多樣的。

    a.好比如今的echarts、highcharts在解決簡單地圖展現上是很好用的。

    b.某些在線環境場合下，利用百度API或者高德API也是可行的。

    c.特定複雜場景，利用圖片直接處理也是一個途徑。

    d.真不行，配圖加上地理框架再上。

 

    　　　　　　　　　　　　　　　　　　-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                    若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^