地理信息系统软件处理应用地理信息系统软件处理应用目录中国各县市人口热力图 . 3一、 案例介绍 . 31. 热力图简介 . 32. 实验数据 . 33. 实验目的 . 3二、 JavaSciptheatmap.jsOpenLayers . 31. JavaScript简介 . 32. Heatmap.js . 53. OpenLayers . 5三、 实验过程 . 6四、 实验体会 . 7五、 代码片段 . 9六、 效果展示 . 12中国各县市人口热力图一、 案例介绍1. 热力图简介热力图是用来呈现一定区域内的统计度量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。2. 实验数据实验数据包含中国2428个县市的位置和人口密度权重的数据，以geoJSON格式存储。3. 实验目的利用JavaScript中的heatmap.js库，结合以上所述的数据，在OpenLayers生成一幅中国各县市人口热力图，对人口迁移和国家发展规划具有极大参考性。二、 JavaSciptheatmap.jsOpenLayers1. JavaScript简介JavaScript语言的前身叫作Livescript 。自从Sun 公司推出著名的Java 语言之后，Netscape公司引进了 Sun公司有关Java的程序概念，将自己原有的 Livescript 重新进行设计，并改名为JavaScript。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript ，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。JavaScript具有很多优点：1.简单性 JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本 语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。2.动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响 应，无 须经过Web 服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所 谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件 ”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。3.跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。4.节省CGI的交互时间 随着WWW的迅速 发展有许WWW 服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服 务器的资源(如CPU 服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。当前的GIS和JavaScript的主要作用 还是空间的数据的 动态的展现，大数据是时代需要除了的对大数据的获取，存储，分析之外，目前迫切需要的是基于地 图的的海量数据可交互的展现技术，基于地图的可视化是当前可视化技术发展的重大的趋势。2. Heatmap.jsHeatmap.js V2.0 是目前网络上最先进的热图可视化库。新的2.0版本 Heatmap.js 更快，拥有更强的渲染模块，使用更方便，使用者可以快速掌握和 扩展自定义功能。3. OpenLayersOpenLayers是一个用于开 发WebGIS客户端的JavaScript包。 OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外， OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网 络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。三、 实验过程1. 在网页中引入相应JavaScript库2. 创建OpenLayers图层对 象var map = null;/创建map对象，map = new OpenLayers.Map(map);map.addControl(new http:/www.wendangxiazai.comyerSwitcher();/创建Map图层对象var gphy = new http:/www.wendangxiazai.comyer.Google(Google Physical, /Google Map Physical图层 type: G_PHYSICAL_MAP);var gmap = new http:/www.wendangxiazai.comyer.Google(Google Streets, /Google Map Streets图层 numZoomLevels: 20 /设置Google Map的 zoom级别 );var ghyb = new http:/www.wendangxiazai.comyer.Google(Google Hybrid, /Google Physical图层type: G_HYBRID_MAP, numZoomLevels: 20);var gsat = new http:/www.wendangxiazai.comyer.Google(Google Satellite, /Google Map Satellite图层type: G_SATELLITE_MAP, numZoomLevels: 22);/ 添加图层map.addLayers(gphy, gmap, ghyb, gsat);/ 放大到全屏map.zoomToMaxExtent();3. 数据格式转换/为了使用OpenLayers HeatMap Layer，我们必须把数据转换成指定的格式 name:澳门,lat:22.18471,lon:113.552554,count:1这种格式。transformedTestData.data = nudata;var format = image/png;var bounds = new OpenLayers.Bounds(73.45100463562233, 18.16324718764174,134.97679764650596, 53.531943152223576);var options = controls: ,maxExtent: bounds,maxResolution: 0.2403351289487642,projection: EPSG:4326,units: degrees;4. 根据已有数据创建heatmap图层heatmap = new http:/www.wendangxiazai.comyer.Heatmap( Heatmap Layer,map, tiled,visible: true,radius:10,isBaseLayer: false,opacity: 0.3,projection: new OpenLayers.Projection(EPSG:4326) );map.addLayers(tiled,heatmap);map.zoomToExtent(bounds);console.log(transformedTestData);heatmap.setDataSet(transformedTestData);四、 实验体会因为最近一直在学习JavaScript语言，所以本次 实习 就想实践JavaScript 在GIS中的应用。通过这次实习，我简单的学习了OpenLayers 和Heatmap。其中， OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问,heatMap.js是当前最先进的热力图库，利用这两件工具我制作了中国人口分布热力图。之所以我学习热力图是因为体验了百度地图热力图，觉得大数据的时代，数据的可视化越来越被重视。百度地 图热力图是用不同颜色的区块叠加在地图上实时描述人群分布、密度和变化趋势的一个产品，是基于百度大数