]SlOl:用戶終端確定用戶通過(guò)瀏覽器輸入的地圖片段請(qǐng)求消息；
[0048]S102:所述用戶終端根據(jù)所述地圖片段請(qǐng)求消息，向網(wǎng)絡(luò)服務(wù)器請(qǐng)求與所述地圖片段請(qǐng)求消息對(duì)應(yīng)的矢量瓦片文件；其中，所述矢量瓦片文件為一個(gè)地圖瓦片的矢量數(shù)據(jù)文件，所述地圖瓦片為將整幅地圖按不同切割層級(jí)分別進(jìn)行切割后，所述地圖片段請(qǐng)求消息對(duì)應(yīng)的設(shè)定切割層級(jí)的一個(gè)地圖片段；
[0049]S103:所述用戶終端根據(jù)所述網(wǎng)絡(luò)服務(wù)器發(fā)送的所述矢量瓦片文件，繪制并顯示所述地圖瓦片。
[0050]本發(fā)明實(shí)施例中，在網(wǎng)絡(luò)服務(wù)器端將地圖的矢量數(shù)據(jù)文件分層級(jí)切割成不同的矢量瓦片文件，在瀏覽器端通過(guò)加載矢量瓦片文件來(lái)完成地圖瓦片顯示；采用本發(fā)明實(shí)施例，客戶端操作系統(tǒng)無(wú)需安裝特定軟件或?yàn)g覽器插件，就可以實(shí)現(xiàn)地圖瓦片的繪制及顯示，另夕卜，雖然需要在網(wǎng)絡(luò)服務(wù)器端獲取數(shù)據(jù)，但只需加載實(shí)際需要的矢量瓦片文件，即整幅地圖的部分矢量數(shù)據(jù)即可，大大減少了網(wǎng)絡(luò)服務(wù)器的負(fù)擔(dān)，提高了加載及顯示效率。
[0051]本發(fā)明實(shí)施例中的矢量瓦片文件實(shí)際上就是將整幅地圖的矢量數(shù)據(jù)按照層次以一定規(guī)則進(jìn)行切割而形成的層次模型，在具體實(shí)施過(guò)程中，矢量瓦片文件從頂層到底層，隨著層級(jí)的降低，單個(gè)矢量瓦片文件對(duì)應(yīng)的地域范圍可以逐層減小，比如，將世界地圖作為整幅地圖，最頂層的矢量瓦片文件可以覆蓋整幅世界地圖的矢量數(shù)據(jù)，下一層的每個(gè)矢量瓦片文件可以覆蓋每個(gè)國(guó)家地圖的矢量數(shù)據(jù)，接下來(lái)再將各國(guó)家地圖的矢量數(shù)據(jù)文件進(jìn)行切害I]，比如針對(duì)中國(guó)地圖，再下一層的每個(gè)矢量瓦片文件覆蓋每個(gè)省級(jí)地圖的矢量數(shù)據(jù)，再下一層的每個(gè)矢量瓦片文件覆蓋每個(gè)市級(jí)地圖的矢量數(shù)據(jù)，如此依次切割下去；在具體實(shí)施中，可以將每個(gè)矢量瓦片文件以 GeoJSON (Geographic JavaScript Object Notat1n)格式進(jìn)行存儲(chǔ)，這里，GeoJSON格式是一種基于Javascript對(duì)象表示法的地理空間信息數(shù)據(jù)交換格式，用于對(duì)各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼。
[0052]如圖2所示，為本發(fā)明實(shí)施例提供的網(wǎng)絡(luò)服務(wù)器端矢量瓦片文件生成過(guò)程示意圖，矢量瓦片文件的生成主要包括兩個(gè)階段，第一階段是將單個(gè)矢量文件(shapefile文件)按照設(shè)定切割規(guī)則切割成分層級(jí)矢量數(shù)據(jù)，保存在數(shù)據(jù)庫(kù)中；第二階段是將保存在數(shù)據(jù)庫(kù)中的分層級(jí)矢量數(shù)據(jù)以GeoJSON格式進(jìn)行分文件夾輸出；具體地，在第一階段中，從單個(gè)矢量數(shù)據(jù)表到多層級(jí)矢量瓦片數(shù)據(jù)表的生成過(guò)程具體為:首先，準(zhǔn)備矢量文件(格式為shp”)，其次，獲取地圖范圍，確定切割方式，選擇切割層級(jí)，逐層切割并入庫(kù)；在第二階段中，從多層級(jí)矢量瓦片數(shù)據(jù)表到分層級(jí)GeoJSON矢量瓦片文件的過(guò)程具體為:首先，為分層級(jí)GeoJSON矢量瓦片文件選取文件名，這里，以GeoJSON格式存放在服務(wù)器文件系統(tǒng)中的矢量瓦片文件必須具備按照設(shè)定規(guī)則進(jìn)行編碼的文件名，這樣，才能夠根據(jù)客戶端請(qǐng)求的地圖范圍得到服務(wù)器應(yīng)返回的GeoJSON矢量瓦片文件；其次，為每個(gè)文件選取適當(dāng)屬性字段，這里，在將數(shù)據(jù)庫(kù)中的矢量數(shù)據(jù)元組以GeoJSON格式的文件輸出時(shí)，應(yīng)該考慮輸出后文件包含哪些可以直接被客戶端程序使用的屬性，同時(shí)，也要考慮文件大小，如果輸出的GeoJSON文件過(guò)大，會(huì)減緩網(wǎng)絡(luò)傳輸和客戶端解釋速度，影響用戶體驗(yàn)；最后，將多層級(jí)矢量瓦片數(shù)據(jù)表轉(zhuǎn)換成分層級(jí)GeoJSON矢量瓦片文件；
[0053]在具體實(shí)施中，在生成上述分層級(jí)GeoJSON矢量瓦片文件后，客戶端檢索時(shí)首先確定用戶請(qǐng)求的地圖片段所在的層級(jí)(Scale)，之后根據(jù)地圖片段的范圍請(qǐng)求各層級(jí)下矢量瓦片GeoJSON文件，其在服務(wù)器端的存儲(chǔ)結(jié)構(gòu)如圖3所示。
[0054]可選地，所述繪制所述地圖瓦片，包括:
[0055]采用HTML5Canvas技術(shù),根據(jù)所述矢量瓦片文件,繪制所述地圖瓦片。
[0056]上述HTML5Canvas 為超文本標(biāo)記語(yǔ)言(Hyper Text Mark-up Language, HTML)5提供的新標(biāo)簽，它使用腳本繪制圖形；在具體實(shí)施過(guò)程中，在瀏覽器端獲取上述矢量瓦片文件后，就需要進(jìn)行地圖瓦片的繪制了，本發(fā)明實(shí)施例中，可以采用HTML5Canvas技術(shù)對(duì) GeoJSON (Geographic JavaScript Object Notat1n)格式數(shù)據(jù)進(jìn)行瀏覽器端渲染；HTML5canvas應(yīng)用程序界面(Applicat1n Program Interface, API)提供的強(qiáng)大的函數(shù)庫(kù)可以保證使用JavaScript在網(wǎng)頁(yè)中繪制任意類型的地理要素，可以使用fillText (“文本內(nèi)容”，X，Y)方法，將文本內(nèi)容以文本左上角為起始坐標(biāo)繪制于相應(yīng)的X，Y屏幕坐標(biāo)上；可以使用moveTo (X, Y)、IineTo (X, Y)方法繪制具有起始坐標(biāo)的線段,并根據(jù)strokeStyle(“color”)方法設(shè)置繪制線段的顏色；使用moveTo(X, Y)、lineTo(X, Y)方法配合closePath()方法可以繪制任意形狀的多邊形；
[0057]在具體實(shí)施中，使用JavaScript解析GeoJSON文件，將得到的地理要素坐標(biāo)保存在變量中，并且通過(guò)地理坐標(biāo)轉(zhuǎn)換得到能在瀏覽器中顯示的屏幕坐標(biāo)，再采用HTML5Canvas，根據(jù)屏幕坐標(biāo)進(jìn)行地圖瓦片繪制；由于地理坐標(biāo)是延X(jué)軸向右遞增，延Y軸向上遞增,而在HTML5Canvas中，坐標(biāo)是從左上角開始，延X(jué)軸向右遞增,延Y軸向下遞增，因此，在具體實(shí)施中，可以采用如下公式將設(shè)定圖層范圍的要素點(diǎn)的地理坐標(biāo)轉(zhuǎn)換成屏幕坐標(biāo):
[0058]X= (lon-minLon) X3600-1-sealeX (I)
[0059]X= (maxLat-lat) X3600-1-sealeY (2)
[0060]其中，X表示轉(zhuǎn)換得到的屏幕橫坐標(biāo)，Y表示轉(zhuǎn)換得到的屏幕縱坐標(biāo)，1n表示該要素點(diǎn)的經(jīng)度，minLon表示該圖層范圍的最小經(jīng)度，Iat表示該要素點(diǎn)的緯度,maxLat表示該圖層范圍的最大纟韋度，minLon和maxLat可以通過(guò)GeoJSON中的bbox中獲得，同時(shí)，為保證精確度，將上述公式中的差值乘以3600換算成秒，上述scaleX、scaleY可以根據(jù)如下公式確定:
[0061]scaleX= (maxLon-minLon) X3600 +h (3)
[0062]scaleX= (maxLat-minLat) X3600 + y (4)
[0063]其中，h表不HTML5Canvas畫布的高度，y表不HTML5Canvas畫布的寬度，scaleX、scaleY分別表示X軸上每要素點(diǎn)對(duì)應(yīng)的經(jīng)度的秒數(shù)，和Y軸上每要素點(diǎn)對(duì)應(yīng)的緯度的秒數(shù)；采用上述公式，可以將任意一要素點(diǎn)的地理坐標(biāo)轉(zhuǎn)換為屏幕坐標(biāo)，繪制在HTML5Canvas畫布當(dāng)中，并且能保證較高的精確度。
[0064]依據(jù)上述方法,本發(fā)明實(shí)施例中可以使用JavaScript語(yǔ)言和AJAX技術(shù)設(shè)計(jì)針對(duì) GeoJSON 文件的 HTML5Canvas 客戶端應(yīng)用程序界面(Applicat1n Program Interface,API)，幫助開發(fā)者以簡(jiǎn)潔的代碼實(shí)現(xiàn)對(duì)GeoJSON文件在HTML5Canvas上的顯示與基本操作。支持HTML5Canvas的客戶端API主要有兩個(gè)版本，一個(gè)為MapCanvasl.0API，另一個(gè)為MapCanvas2.0API ；MapCanvasl.0API的核心功能是使用者通過(guò)Map類構(gòu)造基礎(chǔ)畫布,使用帶統(tǒng)一資源定位器(Uniform Resoure Locator, URL)參數(shù)的Layer類構(gòu)造圖層對(duì)象,可以設(shè)置各Layer對(duì)象的顯示顏色、繪制線寬等屬性,其中，可以使用Layer.addLayerToMap ()方法將各圖層對(duì)象添加至基礎(chǔ)畫布上進(jìn)行繪制，使用Control類構(gòu)造基本地圖操作控件，使用Control.addControlToMap O將構(gòu)造好的控件添加至Map對(duì)象上；該API不僅能夠通過(guò)簡(jiǎn)單的代碼實(shí)現(xiàn)將以GeoJSON文件格式存儲(chǔ)的矢量數(shù)據(jù)使用HTML5Canva