一、引言目前在客户端绘制POI(Point of Interest,兴趣点)的方式主要是div(Marker的形式)、svg、canvas、VML(后边三种就是Vector Layer)几种方式,这几种方式中只有canvas的效率是最高的,但是canvas只有一些最新的浏览器才支 ...
一、引言
目前在客户端绘制POI(Point of Interest,兴趣点)的方式主要是div(Marker的形式)、svg、canvas、VML(后边三种就是Vector Layer)几种方式,这几种方式中只有canvas的效率是最高的,但是canvas只有一些最新的浏览器才支持。虽然div、svg、VML跨浏览器要好一些,但是这几种的效率不够高,最多只能绘制几千个POI。
为了展现出大数据量的POI,我们也可以考虑将POI数据集通过iServer发布为临时图层,然后在客户端使用动态图层展现出来,这样解决了数据量大和跨浏览器的问题,但是这些POI没法响应鼠标事件。
于是麻点图应运而生。
二、简介
SuperMap iClient for JavaScript 提供了麻点图功能,这是一种很高效的web端大数据量渲染解决方案。该功能支持大数据量、跨浏览器、事件响应,并且效率高。 在大部分主流浏览器下都能快速渲染,且轻松漫游地图。
该功能实际上是先调用SuperMap.REST.GetLayersInfoService获取到服务端图层信息,然后修改图层信息,使用SuperMap.REST.SetLayersInfoService设置图层信息创建临时图层,再使用SuperMap.Layer.TiledDynamicRESTLayer将该临时图层在客户端渲染出来。到这一步,大数据量的点就通过瓦片图片的方式在客户端渲染出来了。
然后我们再创建SuperMap.Layer.UTFGrid对象,来让这些POI有鼠标事件响应。然后在最上层叠加一个SuperMap.Layer.Markers,当鼠标移动到某个POI上时,就会在相应位置添加一个Marker,高亮该点。
三、性能
以上报告为服务端存在临时图层缓存的情况下,渲染POI点所用的时间,当初次使用麻点图功能时渲染会比较慢(大数据量下服务端动态切图是一个比较耗时的操作),初次使用之后(服务端已经存在缓存)渲染POI就要快很多了。
四、使用说明
下面我们来详细介绍一下如何使用麻点图。
首先创建一个麻点图对象。
var url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China";var myGOIs = new SuperMap.GOIs({ "url":url, "datasetName":"China_Town_P@China400", "style":new SuperMap.REST.ServerStyle({ "markerSymbolID":907941, "markerSize":8 }), "pixcell": 16});
以上代码片段中创建麻点图需要传入一些参数:url为所使用的地图服务的url(通常和TiledDynamicRESTLayer使用的url相同),datasetName为数据对应的子图层名称, style为要素的样式风格,这里需要传入SuperMap.REST.ServerStyle类型的对象。
然后给麻点图对象绑定 initialized 事件,麻点图初始化完成后会触发该事件。
myGOIs.events.on({ "initialized":GOIsInitialized});function GOIsInitialized(){ //获取麻点图内部创建的图层对象,并添加到map上 var layers = myGOIs.getLayers(); map.addLayers(layers); //创建麻点图事件控件,该控件用于实现麻点图的事件响应。 control = new SuperMap.Control.GOIs(layers,{ onClick:function(evt){ //定义click事件 //code }, highlightIcon:new SuperMap.Icon('images/circle.png', new SuperMap.Size(16,16), new SuperMap.Pixel(-8, -8)),//高亮状态下的点样式 isHighlight:true }); map.addControl(control); //将控件添加到map上}
这里给麻点图绑定初始化完成事件,初始化完成后需要完成如下步骤:
- 获取麻点图内部创建的图层对象,并添加到map上,这里你会得到三个图层对象, 它们分别是:临时图层(TiledDynamicRESTLayer)、utfgrid图层、marker图层(用于实现高亮效果)。
- 创建麻点图事件控件,该控件用于实现麻点图的事件响应,将该控件添加到map上。
原标题:GIS可视化——麻点图
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。