基于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平臺(tái)上的應(yīng)用，其具有跨平臺(tái)、輕量和響應(yīng)快的特點(diǎn)。

GeoJSON；HTML5 Canvas；WebGIS

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

近些年來(lái)，地理信息系統(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ǔ)來(lái)進(jìn)行信息展示，獲得更好的人機(jī)交互體驗(yàn)。

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

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

2 GeoJSON格式分析

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

GeoJSON的主要對(duì)象描述[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] ] ] ]

}

空間對(duì)象集合：

{ “type”: “GeometryCollection”,

“geometries”: [

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

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

]

}

對(duì)象集合：

{“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)，針對(duì)多點(diǎn)、多線、多面、集合對(duì)象在處理時(shí)都可以拆解為單個(gè)的點(diǎn)、線、面進(jìn)行處理。

3 HTML5 Canvas繪制地圖

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

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

定義Canvas元素：

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

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

然后就可以使用API提供的路徑繪制函數(shù)，如beginPath開(kāi)始繪制，moveTo，lineTo繪制直線，fill，stroke進(jìn)行填充或者設(shè)置邊框，最后closePath結(jié)束圖形繪制。Canvas的路徑操作能充分滿足矢量數(shù)據(jù)中的點(diǎn)要素、線要素、面要素以及符號(hào)的表達(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ù)器端，客戶端請(qǐng)求該文件使用Ajax異步請(qǐng)求[3]。

var jsondata = CreateXHR();

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

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對(duì)象jsonstr，根據(jù)jsonstr的信息，經(jīng)過(guò)坐標(biāo)轉(zhuǎn)換后，調(diào)用Canvas畫圖功能來(lái)實(shí)現(xiàn)繪圖和地圖的顯示。

5 結(jié)語(yǔ)

傳統(tǒng)GIS的體系結(jié)構(gòu)是封閉的，而Web的本質(zhì)特征就是其開(kāi)放性，因此WebGIS的體系結(jié)構(gòu)應(yīng)該具備開(kāi)放、互操作、可升級(jí)、可擴(kuò)展的特性。本文通過(guò)對(duì)GeoJSON的格式分析，結(jié)合HTML5 Canvas與JavaScript技術(shù)，無(wú)需復(fù)雜的GeoServer，為實(shí)現(xiàn)WebGIS提供了一種簡(jiǎn)單易行的方案。

[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].測(cè)繪科學(xué)，2012（1）：145-147.

Research on application of WebGIS based on GeoJSON and HTML5 Canvas

陳吉輝（1966— ），女，四川自貢人，高級(jí)工程師，副教授，學(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