[TOC]
## 概況
### 背景
### Showcase
在線Demo見：?[http://vmap.phodal.com/](http://vmap.phodal.com/)
或者你已經使用過了相應多的省市區與地圖聯動，但是這些聯動往往是單向的、不可逆。并且這些數據往往都是在線使用的，不能離線使用。下圖是一個結合百度地圖的省市區與地圖聯動：
一般的省市區與地圖聯動
我們可以在這個應用里選擇，相應的省市區然后地圖會跳轉到相應的地圖。當我們在地圖上漫游的時候，如果沒有顯示當前的省市區是不是變得很難使用。于是，我們就來創建一個吧：
地圖到省市區聯動
### jQuery + Mustache + Leaflet
相關技術棧：
* Bootstrap，UI顯示~~，地球人都知道。
* jQuery，Bootstrap依賴。
* Require.js，模塊化。
* Mustache，模板生成。
* Leaflet，交互地圖庫。
## 步驟
### Step 1: 離線地圖與搜索
在GitHub上搜索數據的過程中，發現了一個名為[d3js-geojson](https://github.com/ufoe/d3js-geojson)的項目里面放著中國詳細省、市、縣數據，并且還有及GeoJSON文件。
這就意味著兩件事：
* 地圖離線
* 多邊形搜索
首先，我們要知道GeoJSON是怎樣的一個存在。
> GeoJSON是一種對各種地理數據結構進行編碼的格式，基于Javascript對象表示法的地理空間信息數據交換格式。GeoJSON對象可以表示幾何、特征或者特征集合。GeoJSON支持下面幾何類型：點、線、面、多點、多線、多面和幾何集合。GeoJSON里的特征包含一個幾何對象和其他屬性，特征集合表示一系列特征。
換句話來說，根據這個文件里面的多邊形，我們可以繪制出中國地圖。由于上面的點是真實的地理位置信息，所以無論我們怎樣的縮放這些點的位置都不會發生變化。如下圖是GitHub對這個數據文件的解析：
中國GeoJSON文件
（PS: 預覽可以打開這個頁面：[Vmap GeoJSON](https://github.com/phodal/vmap/blob/gh-pages/static/data/china.json)
當然這似乎不是一個專業人員維護的數據，所以存在一些偏差。但是這些數據意味著，我們不需要依靠于在線地圖就可以完成大部分的功能了。在線地圖一直都是一個緩慢的存在，并且Google Map在多數人那都是不可用的。
接著問題來了，我們并沒有把每個用戶的數據存入到數據庫中，那么我們怎么才能實現搜索？
#### 多邊形搜索
所謂的多邊形搜索就是畫一個圈圈（任意多邊形），然后你就可以去約這個圈圈里的人，如下圖所示：
多邊形搜索
而圈圈搜索依賴于圈圈上的連續的點構建的形狀來進行搜索，上面的每個點都包含了相應的經緯度。因此，只要是在這個圈圈里的用戶都是可以搜索得到的。
這樣實現的前提是：
* 要有一個支持多邊形搜索的搜索引擎，如ElasticSearch、Solr、MongoDB等等。
* 要將用戶的數據成功地存成GEO信息。
詳細信息可以見:?[VMap Bot](https://github.com/phodal/vmap-bot)
### Step 2: 從地點到地圖上顯示
拿Bootstrap實現一個Dropdown是一件很容易的事，我們只要動用一下相應的模板就好了。難就難在，如果去與地圖交互。
最初的時候要用Event的形式來實現，但是發現這樣似乎會讓其緊耦合。就改用了監聽Hash Change的形式來實現，在總的地圖上每一個省都有一個對應的ID，這個ID會對應相應的省的數據。如下圖所示：
Province Hash
接著，我們就需要從這個Hash中判斷它的級別和ID，隨后轉由相應的函數來處理這些邏輯即可。隨后，我們要做兩件事：
* 創建對應省的市的Dropdown
* 從地圖上跳轉到省
創建對應省的市的Dropdown，我們只需要根據地點重新生成一個新的Menu再插入即可。
從地圖上跳轉到對應的省的時候：
1. 用Ajax請求獲取這個省的GeoJSON文件
2. 獲取這個市的中心位置，并對其進行縮放
3. 將上面的每個市繪制到地圖上
在這個過程中遇到的最大的坑是：中國有北京、上海、天津、重慶等直轄市，還有港、澳等自治區（PS：臺灣是一個省）。對于這些特殊的地點，那么的縮放級別肯定會更高。
同理，我們也可以對上面的市運行處理。但是因為這些市并不存在GEO信息，所以我只是從其多連形信息取了一個點，再將這個點放到data-geo中：
Data GEO
對應于省市的，對于區的處理也是如此。這樣，我們就完成了地點到地圖的顯示了。
### Step 3: 從地圖到地點上顯示
從地圖上到地點就比較簡單了，點擊時修改對應的text即可。
VMap Click
