基于GeoJSON和HTML5 Canvas的WebGIS应用研究
2017-12-28陈吉辉
陈吉辉
（电子科技大学成都学院，四川 成都 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
