文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
