基于GeoJSON和HTML5 Canvas的WebGIS應用研究

陳吉輝

（電子科技大學成都學院，四川 成都 611731）

基于GeoJSON和HTML5 Canvas的WebGIS應用研究

陳吉輝

（電子科技大學成都學院，四川 成都 611731）

信息管理系統或者監控系統，有時需要運用地理信息系統的部分功能，而建立一套完整的GIS系統需要較大的資金和技術投入。文章基于HTML5 Canvas技術，分析了GeoJSON的數據結構，實現了地圖數據在Web平臺上的應用，其具有跨平臺、輕量和響應快的特點。

GeoJSON；HTML5 Canvas；WebGIS

1 GIS系統現狀

近些年來，地理信息系統(Geographic Information System，GIS)得到了廣泛的應用，比如網約車、導航應用、外賣等，一些傳統的信息管理系統和監控系統，也融入了GIS系統的部分功能，以地圖為基礎來進行信息展示，獲得更好的人機交互體驗。

而建立一套完整的GIS系統，需要以商業的GIS平臺軟件為支撐，比如ArcGIS，或者租用網絡GIS平臺，利用其提供的應用程序界面（Application Program Interface，API）來做二次開發，這意味著較大的資金和人力投入，對于很多系統來講，往往只需要GIS系統的部分功能，如地圖顯示、漫游、標注等基本功能。

本文通過對GeoJSON的格式分析，結合HTML5 Canvas技術，實現了一個輕量級的WebGIS中間件對象，可以很方便地嵌入到WEB應用中。

2 GeoJSON格式分析

GeoJSON是一種對各種地理數據結構進行編碼的格式[1]，基于Javascript對象表示法的地理空間信息數據交換格式，它支持開放地理信息系統協會（Open GIS Consortium，OGC）定義的以下幾種幾何類型：Point，LineString，Polygon，MultiPoint，MultiLineString，MultiPolygon和GeometryCollection。任何OGC標準下的地理數據類型都可以方便地通過GeoJSON進行描述。

GeoJSON的主要對象描述[2]如下。

點：

{ “type”: “Point”, “coordinates”: [101.0, 102.0] }

線 LineString:

{ “type”: “LineString”,

“coordinates”: [ [101.0, 1.0], [102.0, 2.0] ]

}

面：

{ “type”: “Polygon”,“coordinates”:

[ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0],[100.0, 0.0] ] ]

}

多點：

{ “type”: “MultiPoint”,“coordinates”: [ [100.0, 0.0],[101.0, 1.0] ]

}

多線 MultiLineString:

{ “type”: “MultiLineString”,“coordinates”: [

[ [100.0, 0.0], [101.0, 1.0] ],

[ [102.0, 2.0], [103.0, 3.0] ] ]

}

多面：

{ “type”: “MultiPolygon”,“coordinates”: [

[[[102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0],[102.0, 2.0]]],

[[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0],[100.0, 0.0]],

[[100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8],[100.2, 0.2] ] ] ]

}

空間對象集合：

{ “type”: “GeometryCollection”,

“geometries”: [

{ “type”: “Point”, “coordinates”: [100.0, 0.0] },

{ “type”: “LineString”,“coordinates”: [ [101.0, 0.0],[102.0, 1.0] ] }

]

}

對象集合：

{“name”:“subway_point”,“type”:“FeatureCollecti on”,

“features”:[

{“type”:“Feature”,“geometry”:{“type”:“Point”,“coordinates”:[116.189086914,39.938293]},

“properties”:{“OBJECTID”:1}}

,{“type”:“Feature”,“geometry”:{“type”:“Point”,“coordinates”:[116.197875976,39.9296]},“properties”:{“OBJECTID”:2}}]

}

分析其結構組成，可以發現，針對多點、多線、多面、集合對象在處理時都可以拆解為單個的點、線、面進行處理。

3 HTML5 Canvas繪制地圖

HTML5 canvas 是一個原生HTML繪圖簿，用于JavaScript代碼，不使用第三方工具。canvas已經可以在幾乎所有現代瀏覽器上良好運行了。HTML5提供了Canvas API，可以通過JavaScript在瀏覽器不依賴任何插件的情況下高效地繪制動態圖形。

通用上一節對GeoJSON格式分析，地圖信息都可以拆解為單個的點、線、面來進行處理，相應的我們需要在應用開發中，通過JavaScript來實現這些基本操作，Canvas API的使用比較簡單，繪圖工作由JavaScript完成。其工作過程如下。

定義Canvas元素：

Var extra_canvas=document.createElement(‘canvas’);得到Canvas畫布對象：

Var Canvas = extra_canvas.getContext(‘2d’)；

然后就可以使用API提供的路徑繪制函數，如beginPath開始繪制，moveTo，lineTo繪制直線，fill，stroke進行填充或者設置邊框，最后closePath結束圖形繪制。Canvas的路徑操作能充分滿足矢量數據中的點要素、線要素、面要素以及符號的表達要求。

HTML5 Canvas畫點和線：

function DrawPoint(Canvas, Point){

with (Canvas)

{

moveTo(Point[0], Point [1]);

lineTo(Point [0]+1, Point [1]+1);

}}

HTML5 Canvas畫面：

function DrawPolygon(Canvas,Poly)

{

with (Canvas)

{

beginPath();

moveTo(Poly[0].x,Poly[0].y);

for(var i=0;ilt;Poly.length;i++)

l i n e T o(P o l y[i].

x,Poly[i].y);

stroke();

}

}

4 GeoJSON數據的獲取及繪制流程

JSON 文件被放置在服務器端，客戶端請求該文件使用Ajax異步請求[3]。

var jsondata = CreateXHR();

jsondata.open(quot;GETquot;,quot;test.jsonquot;,true);//服務器端有一個文件test.json，請求并輸出。

jsondata.send();

jsondata.onreadystatechange = function(){

if(jsondata.readyState == 4 amp;amp; jsondata.status ==200){

var jsonstr = jsondata.responseText;

console.log(jsonstr);

}

}

從服務器獲取GeoJSON數據后，其被轉化為JavaScript對象jsonstr，根據jsonstr的信息，經過坐標轉換后，調用Canvas畫圖功能來實現繪圖和地圖的顯示。

5 結語

傳統GIS的體系結構是封閉的，而Web的本質特征就是其開放性，因此WebGIS的體系結構應該具備開放、互操作、可升級、可擴展的特性。本文通過對GeoJSON的格式分析，結合HTML5 Canvas與JavaScript技術，無需復雜的GeoServer，為實現WebGIS提供了一種簡單易行的方案。

[1]GeoJSON.The GeoJSON Specification (RFC 7946)[EB/OL].（2017-07-22）[2017-10-24].http://geojson.org.

[2]Wikipedia.GeoJSON[EB/OL].（2017-10-20）[2017-10-24].https://en.wikipedia.org/wiki/GeoJSON.

[3]徐卓揆.基于HTML5、Ajax和Web Service的WebGIS研究[J].測繪科學，2012（1）：145-147.

Research on application of WebGIS based on GeoJSON and HTML5 Canvas

陳吉輝（1966— ），女，四川自貢人，高級工程師，副教授，學士；研究方向：計算應用，航空電子。

Chen Jihui
(Chengdu College of University of Electronic Science and Technology of China, Chengdu 611731, China)

Information management system or monitoring system, sometimes need to use some of the functions of geographic information system, and establishing a complete GIS system requires greater funding and technical input. Based on HTML5 Canvas technology, this article analyzes the GeoJSON data structure, realizes the application of map Data on the Web platform, with the characteristics of crossplatform, lightweight and fast response.

GeoJSON; HTML5 Canvas; WebGIS