WebGIS实现——html5中绘制地图(草稿)

“一次编写，随处运行” Intel HTML5技术研讨会
Richard Wang (Intel) 于 星期四, 04/07/2013 - 23:59 提交


HTML5 是一种开放标准。通过使用此标准，开发人员只需编写一次程序，即可在任何地方运行。 这一跨平台方法能够显著增加开发人员的总体潜在受众，同时在不同屏幕尺寸上为用户带来更一致的体验。因此，HTML5 是应用程序开发领域的未来趋势，英特尔认为需要帮助经验丰富的开发人员迁移到这一跨平台方法，并支持新的开发人员借助这一出色的全新方法快速跟上行业发展步伐，以确保这些开发人员能够在几乎所有现代计算平台上部署其应用程序和游戏.


最近在上海举办的“一次编写，随处运行” Intel HTML5技术研讨会，给软件开发人员有机会：


 率先领略HTML5应用在英特尔平台上的全新体验； 
了解英特尔平台上HTML5的软件开发工具；
 英特尔技术工程师就您关心的技术焦点等问题展开深入探讨。
讲座内容如下（我们特别记录了讲座实况，使不能现场参加的开发人员也能有机会了解内容）：


HTML5简介 (50mins) (讲座视频）
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本。本讲座主要介绍HTML5标准的发展历程、HTML5的特点和优势以及HTML5标准中新加入的功能。


开发高性能HTML5应用 (60mins) (讲座视频）
软件性能对于HTML5应用而言尤其重要。本讲座将分享一些开发高性能HTML5应用的最佳实践，包括可能带来百倍性能提升的编程模式，以及各种编程模式导致不同性能的底层原因。同时，我们会介绍Intel开发的HTML5性能分析工具。


Intel HTML5应用开发工具简介 (90mins) 


Intel开发了一系列HTML5应用开发工具，其中包括HTML5应用开发集成环境Intel XDK和HTML5应用移植工具Intel HTML5 App Porter。这些工具可以有效的帮助开发者快速创建、开发、测试、调试、打包、部署和移植HTML5应用程序。


基于WebRTC*的协作服务平台
从本地应用到HTML5应用
英特尔HTML5开发环境

我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举：

1：绘制渲染对象，c.getContext("2d"),获取2d绘图对象，无论我们调用多少次获取的对象都将是相同的对象。


2：绘制方法： clecrRect(left,top,width,height)清除制定矩形区域， fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。 fillText（text,x,y）绘制文字； strokeRect(left,top,width,height)绘制矩形，以strokeStyle绘制边界。 beginPath():开启路径的绘制,重置path为初始状态； closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线； moveTo（x，y）：设置绘图其实坐标。 lineTo(x，y);绘制从当前其实位置到x，y直线。 fill（），stroke（），clip（）：在完成绘制的最后的填充和边界轮廓，剪辑区域。 arc（）：绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小； rect():矩形路径; drawImage（Imag img）：绘制图片； quadraticCurveTo():二次样条曲线路径,参数两个控制点； bezierCurveTo（）：贝塞尔曲线，参数三个控制点； createImageData,getImageData，putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data，其中data为我们色素的记录为 argb，所以数组大小长度为width*height*4，顺序分别为rgba。getImageData为获取矩形区域像素，而putImageData则为设置矩形区域像素；

3：坐标变换： translate（x,y）：平移变换，原点移动到坐标（x，y）； rotate（a）：旋转变换，旋转a度角； scale（x，y）：伸缩变换； save（），restore（）：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态；

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

虽然是在学习html5，但还是希望新的技术能够帮助更深入的学习gis，这次具体谈谈html5中对矢量图形的优化SVG(scalable vector graphics)。


从纸质地图到gis的出现是地理信息领域一次重大的变革，传统的GIS技术模式，服务器产生栅格图片，客户端通过请求来获取图片然后展示，随着大数据时代的到来，数据更新频率增快，切片的效率问题是必须要解。但是在HTML5下，我们无需再将shp等文件渲染生成栅格图片如jpg，png等格式，可以直接在客户端进行矢量渲染，用户可以对数据进行编辑，点击交互，实时渲染，把桌面GIS的功能搬到web上。另外通过HTML5矢量渲染可以叠加到已有的像google map,bing map的地图上，创建新的地图交互模式。


从大赛主页提供的链接教程了解到SVG与其他图像格式相比（比如 JPEG 和 GIF）的一些优势 ，


使用 SVG 的优势在于：


SVG 图像可通过文本编辑器来创建和修改；


SVG 图像可被搜索、索引、脚本化或压缩；


SVG 是可伸缩的；


SVG 图像可在任何的分辨率下被高质量地打印；


SVG 可在图像质量不下降的情况下被放大。


下面使用SVG进行几种基本图形元素的绘制操作：


<svg width="200" height="250">


  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>


  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>


  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>


  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>


  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>


  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"


      stroke="orange" fill="transparent" stroke-width="5"/>


  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"


      stroke="green" fill="transparent" stroke-width="5"/>


  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>


</svg>

//////////////////////////////////////////////////////////////////////////////////////////////////////////

通过地理定位获取地理位置等信息是进行进一步gis或其他领域分析应用的基本前提，这里分享一下新学到的获取客户端地理信息的API。


 地理定位（Geolocation）是一个可以获取到客户端经纬度等地理位置信息的API。地理定位也是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。这里介绍一下 HTML5 地理位置定位的基本原。API本身是不知道客户端地理信息的，常见的地理位置信息来源有全球定位系统(GPS)和从网络信号中推断出的地理信息（如IP地址, RFID, WIFI, 蓝牙MAC地址, GSM/CDMA手机id,以及用户输入的信息）。


HTML5 Geolocation API 使用的基本调用方式如下：


if (navigator.geolocation) {


    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{


        // 指示浏览器获取高精度的位置，默认为false


        enableHighAcuracy: true,


        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒


        timeout: 5000,


        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。


        maximumAge: 3000


    });


}else{


    alert("Your browser does not support Geolocation!");


}


locationError为获取位置信息失败的回调函数，可以根据错误类型提示信息：


locationError: function(error){


    switch(error.code) {


        case error.TIMEOUT:


            showError("A timeout occured! Please try again!");


            break;


        case error.POSITION_UNAVAILABLE:


            showError('We can\'t detect your location. Sorry!');


            break;


        case error.PERMISSION_DENIED:


            showError('Please allow geolocation access for this to work.');


            break;


        case error.UNKNOWN_ERROR:


            showError('An unknown error occured!');


            break;


    }


}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

上篇《html5之地理定位Geolocation》介绍了Geolocation的基本原理，基本调用方式，以及获取位置信息失败的回调函数，这次介绍下浏览器支持性检查单次以及重复性位置更新请求等。


1、浏览器支持性检查使用testsupport（）函数，来确保浏览器支持HTML5 Geolocation API 。具体使用如下：


 function testSupport() { 


    if (navigator.geolocation) { 


        document.getElementById(“support”).innerHTML = "支持 HTML5 Geolocation。"; 


    } else { 


    document.getElementById(“support”).innerHTML = 


    "该浏览器不支持 HTML5 Geolocation ！建议升级浏览器或安装插件（如 Gears）。"; 


    } 


 } 


2、单次定位请求使用getCurrentPosition()函数; 重复性位置更新请求使用watchPosition，当需要关闭更新时即应用程序不需要再接收用户的位置更新消息，只需要使用 clearWatch() 函数。


关闭更新事例：


var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError);


 navigator.geolocation.clearWatch(watchId); // 停止接收位置更新消息

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HTML5 中Web 存储与传统的Cookie比较相似 ，不过Web存储在数据存储方面更强大，而且在控制某个窗口存储的信息向其他窗口显示时，Web 存储要更为简单。


HTML5 提供了两种在客户端存储数据的新方法：


①localStorage - 没有时间限制的数据存储


②sessionStorage - 针对一个 session 的数据存储


HTML5 使用 JavaScript 来存储和访问数据。


1、localStorage 方法


localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。


创建和访问 localStorage：


<script type="text/javascript">


localStorage.lastname="Smith";


document.write(localStorage.lastname);


</script>


2、sessionStorage 方法


sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。


创建并访问一个 sessionStorage：


实例


<script type="text/javascript">


sessionStorage.lastname="Smith";


document.write(sessionStorage.lastname);


</script>


Web存储支持的浏览器检查操作：


if(typeof(Storage)!== "undefined") {  


  // Web storage is supported  


}  


else {  


  // Web storage is NOT supported  


} 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

reference:

http://software.intel.com/zh-cn/user/816093/track

http://articles.csdn.net/plus/view.php?aid=15816143