基于GeoJSON和HTML5 Canvas的WebGIS應(yīng)用研究

陳吉輝

（電子科技大學(xué)成都學(xué)院，四川 成都 611731）

基于GeoJSON和HTML5 Canvas的WebGIS應(yīng)用研究

陳吉輝

（電子科技大學(xué)成都學(xué)院，四川 成都 611731）

信息管理系統(tǒng)或者監(jiān)控系統(tǒng)，有時(shí)需要運(yùn)用地理信息系統(tǒng)的部分功能，而建立一套完整的GIS系統(tǒng)需要較大的資金和技術(shù)投入。文章基于HTML5 Canvas技術(shù)，分析了GeoJSON的數(shù)據(jù)結(jié)構(gòu)，實(shí)現(xiàn)了地圖數(shù)據(jù)在Web平臺上的應(yīng)用，其具有跨平臺、輕量和響應(yīng)快的特點(diǎn)。

GeoJSON；HTML5 Canvas；WebGIS

1 GIS系統(tǒng)現(xiàn)狀

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

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

本文通過對GeoJSON的格式分析，結(jié)合HTML5 Canvas技術(shù)，實(shí)現(xiàn)了一個(gè)輕量級的WebGIS中間件對象，可以很方便地嵌入到WEB應(yīng)用中。

2 GeoJSON格式分析

GeoJSON是一種對各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式[1]，基于Javascript對象表示法的地理空間信息數(shù)據(jù)交換格式，它支持開放地理信息系統(tǒng)協(xié)會(huì)（Open GIS Consortium，OGC）定義的以下幾種幾何類型：Point，LineString，Polygon，MultiPoint，MultiLineString，MultiPolygon和GeometryCollection。任何OGC標(biāo)準(zhǔn)下的地理數(shù)據(jù)類型都可以方便地通過GeoJSON進(jìn)行描述。

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

點(diǎn)：

{ “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] ] ]

}

多點(diǎn)：

{ “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}}]

}

分析其結(jié)構(gòu)組成，可以發(fā)現(xiàn)，針對多點(diǎn)、多線、多面、集合對象在處理時(shí)都可以拆解為單個(gè)的點(diǎn)、線、面進(jìn)行處理。

3 HTML5 Canvas繪制地圖

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

通用上一節(jié)對GeoJSON格式分析，地圖信息都可以拆解為單個(gè)的點(diǎn)、線、面來進(jìn)行處理，相應(yīng)的我們需要在應(yīng)用開發(fā)中，通過JavaScript來實(shí)現(xiàn)這些基本操作，Canvas API的使用比較簡單，繪圖工作由JavaScript完成。其工作過程如下。

定義Canvas元素：

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

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

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

HTML5 Canvas畫點(diǎn)和線：

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數(shù)據(jù)的獲取及繪制流程

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

var jsondata = CreateXHR();

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

jsondata.send();

jsondata.onreadystatechange = function(){

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

var jsonstr = jsondata.responseText;

console.log(jsonstr);

}

}

從服務(wù)器獲取GeoJSON數(shù)據(jù)后，其被轉(zhuǎn)化為JavaScript對象jsonstr，根據(jù)jsonstr的信息，經(jīng)過坐標(biāo)轉(zhuǎn)換后，調(diào)用Canvas畫圖功能來實(shí)現(xiàn)繪圖和地圖的顯示。

5 結(jié)語

傳統(tǒng)GIS的體系結(jié)構(gòu)是封閉的，而Web的本質(zhì)特征就是其開放性，因此WebGIS的體系結(jié)構(gòu)應(yīng)該具備開放、互操作、可升級、可擴(kuò)展的特性。本文通過對GeoJSON的格式分析，結(jié)合HTML5 Canvas與JavaScript技術(shù)，無需復(fù)雜的GeoServer，為實(shí)現(xiàn)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].測繪科學(xué)，2012（1）：145-147.

Research on application of WebGIS based on GeoJSON and HTML5 Canvas

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

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