地理信息系统软件处理应用

地理信息系统软件处理应用目录中国各县市人口热力图2一、案例介绍21.热力图简介22.实验数据23.实验目的2二、JavaSciptheatmap.jsOpenLayers21.JavaScript简介22.Heatmap.js43.OpenLayers4三、实验过程5四、实验体会6五、代码片段8六、效果展示11中国各县市人口热力图一、 案例介绍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 OpenLayers.Control.LayerSwitcher(); /创建Map图层对象 var gphy = new OpenLayers.Layer.Google( Google Physical, /Google Map Physical图层 type: G_PHYSICAL_MAP ); var gmap = new OpenLayers.Layer.Google( Google Streets, /Google Map Streets图层 numZoomLevels: 20 /设置Google Map的zoom级别); var ghyb = new OpenLayers.Layer.Google( Google Hybrid, /Google Physical图层type: G_HYBRID_MAP, numZoomLevels: 20 ); var gsat = new OpenLayers.Layer.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.,count:1这种格式。transformedTestData.data = nudata; var format = image/png; var bounds = new OpenLayers.Bounds( 73.233, 18.174, 134.596, 53.3576 ); var options = controls: , maxExtent: bounds, maxResolution: 0.87642, projection: EPSG:4326, units: degrees ; 4. 根据已有数据创建heatmap图层heatmap = new OpenLayers.Layer.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是当前最先进的热力图库，利用这两件工具我制作了中国人口分布热力图。之所以我学习热力图是因为体验了百度地图热力图，觉得大数据的时代，数据的可视化越来越被重视。百度地图热力图是用不同颜色的区块叠加在地图上实时描述人群分布、密度和变化趋势的一个产品，是基于百度大数据的一个便民出行服务。我利用openlayers图层，通过搜集数据，通过不同颜色的区块叠加也实现了热力图。在实习的过程中，我收获了很多。首先，加强了JavaScript的学习，JavaScript在HTML5发展的现在占据着越来越重要的作用，它就像胶水一样将各种HTML样式粘合在一起。而且，JavaScript不仅仅局限于前端，Node.js的出现有可能引发Web开发的革命。Node.js是一个框架，用于构建高性能Web应用即使是巨量的请求也能应对如流。虽然Node本身作为一个底层框架，能够用于构建任何应用，但它 还是最适合构建Web服务器。它的异步事件驱动模式与传统的请求-响应模式相比，无疑更适合Web应用。其次，增强了应用GIS的水平和解决问题的能力，通过热力图，可以实现很多功能，比如根据订单的位置和仓库进行匹配，找出最科学的仓库位置，规划最优配送路线，合理安排车辆、人力，更好的分配资源，节约资金。在做热力图的过程中也遇到了很多问题，我在看了很多博客和文档教程之后将问题一一解决了。在今后的学习中，继续加强JavaScript的学习和理论水平的提高，努力去解决实际问题，提升专业素养。五、 代码片段Heatmap-openlayers中的方法OpenLayers.Layer.Heatmap = OpenLayers.Class(OpenLayers.Layer, / the heatmap isnt a basic layer by default - you usually want to display the heatmap over another map ;)isBaseLayer: false,heatmap: null,mapLayer: null,/ we store the lon lat data, because we have to redraw with new positions on zoomend|moveendtmpData: , initialize: function(name, map, mLayer, hmoptions, options) var heatdiv = document.createElement(div), handler; OpenLayers.Ltotype.initialize.apply(this, name, options); heatdiv.style.cssText = position:absolute;width:+map.size.w+px;height:+map.size.h+px; / this will be the heatmaps element this.div.appendChild(heatdiv); / add to our heatmap.js config hmoptions.element = heatdiv; this.mapLayer = mLayer; this.map = map; / create the heatmap with passed heatmap-options this.heatmap = h337.create(hmoptions); handler = function() if(this.tmpData.max) this.updateLayer(); ; / on zoomend and moveend we have to move the canvas element and redraw the datapoints with new positions map.events.register(zoomend, this, handler); map.events.register(moveend, this, handler); ,updateLayer: function() var pixelOffset = this.getPixelOffset(), el = this.heatmap.get(element); / if the pixeloffset e.g. for x was positive move the canvas element to the left by setting left:-offset.y px / otherwise move it the right by setting it a positive value. same for top el.style.top = (pixelOffset.y 0)?(-+pixelOffset.y):(Math.abs(pixelOffset.y)+px; el.style.left = (pixelOffset.x 0)?(-+pixelOffset.x):(Math.abs(pixelOffset.x)+px; this.setDataSet(this.tmpData);, getPixelOffset: function () var o = this.mapLayer.map.layerContainerOrigin, o_lonlat = new OpenLayers.LonLat(o.lon, o.lat), o_pixel = this.mapLayer.getViewPortPxFromLonLat(o_lonlat), c = this.mapLayer.map.center, c_lonlat = new OpenLayers.LonLat(c.lon, c.lat), c_pixel = this.mapLayer.getViewPortPxFromLonLat(c_lonlat); return x: o_pixel.x - c_pixel.x, y: o_pixel.y - c_pixel.y ; ,setDataSet: function(obj) var set = ,dataset = obj.data,dlen = dataset.length, entry, lonlat, pixel;set.max = obj.max;set.data = ;/ get the pixels for all the lonlat entries while(dlen-) entry = datasetdlen, lonlat = entry.lonlat.clone().transform(jection, this.map.getProjectionObject(), pixel = this.roundPixels(this.getViewPortPxFromLonLat(lonlat); if(pixel) set.data.push(x: pixel.x, y: pixel.y, count: entry.count); this.tmpData = obj; this.heatmap.store.setDataSet(set);,/ we dont want to have decimal numbers such as x