你的位置:首页 > Java教程

[Java教程]GIS可视化——属性图


一、简介

SuperMap iClient for JavaScript 提供了UTFGrid图层(属性图),用于客户端属性信息的快速交互。 UTFGrid图层从UTFGrid切片数据源读取数据,其本质是基于JSON的ASCII 码’字符画’与属性数据的结合。 UTFGrid图层不能被可视化渲染,在地图中使用这个图层, 必须同时添加 SuperMap.Control.UTFGrid 控件类来控制触发事件类型。

  • 原理:通过请求瓦片数据(非图片),将属性信息保存到客服端UTFGrid图层中,提高客户端属性信息的交互速度。
  • 特点:根据屏幕像素位置在客户端快速获取图层的属性信息。
  • 应用场景: UTFGrid图层常用于客户端需要快速响应属性信息的场景。 当需要实时查询地图上某些地物属性并且地物数量很大时,采用与服务器交互获取属性信息的方式需要频繁的发起请求, 时间消耗较大, 而通过UTFGrid图层,可以快速的获取地物属性信息,极大的提高用户体验。 例如:实现鼠标悬停或鼠标单击某一地物时,快速获取该地物某些属性信息。

二、使用

下面展示属性图使用方式:

1、创建UTFGrid图层

 

首先创建一个属性图对象。由于属性图从UTFGrid切片数据源读取数据, 所以在创建属性图对象时可以根据需要指定utfTileSize 、pixcell、utfgridResolution等图层属性。

 

    var utfgrid = new SuperMap.Layer.UTFGrid("UTFGridLayer", url,        {          layerName: "China_Province_R@China400",          utfTileSize: 256,          pixcell: 8,          isUseCache: true        },        {          utfgridResolution: 8        }    );    

 

说明:pixcell与utfgridResolution两个属性有对应关系,在使用的时候要注意应用场景:

   1.其中pixcell为发送给服务端请求utfgrid瓦片的精度,数值越小,精度越高,相应的瓦片大小也就越大;

   2.utfgridResolution为客户端解析瓦片使用的精度,应该与pixcell的值相等,否则会产生位置与属性对应不上的问题;

   3.通常如果UTFGrid图层为面图层,对应的数据量会比较大,为了不影响页面的正常浏览,可以将这两个属性设的大一些;

   4.isUseCache设置是否使用缓存,使用缓存能够提高性能。

2、添加到地图

 

然后将此图层添加到map里面。

 

    //向map中添加图层    map.addLayers([utfgrid]);    

 

3、创建UTFGrid控件

 

创建UTFGrid控件,通过layers属性与先前创建的属性图utfgrid关联,指定触发事件类型为move。

 

     control = new SuperMap.Control.UTFGrid({       layers: [utfgrid],       callback: callback,       handlerMode: "move"     });    

 

4、添加控件到地图

 

将此控件添加到map里面。

 

    //向map中添加控件    map.addControl(control);    

 

5、处理事件

 

当鼠标事件触发的位置恰好在UTFGrid图层上有对应数据的时候调用回调函数callback。

回调函数callback的参数 infoLookup 是一个返回对象,该对象由一个或多个键值对组成, 其中键值为图层索引,值为鼠标位置对应该图层的数据(属性信息),数据格式为JSON类型。 通过 infoLookup 对象,无需与服务器交互就可以快速获取鼠标位置对应地物的属性信息。

 

     var callback = function (infoLookup, loc, pixel) {        closeInfoWin();        if (infoLookup) {          var info;          for (var idx in infoLookup) {            info = infoLookup[idx];            if (info && info.data) {              //弹出框内容,info.data.NAME 就是当前鼠标位置对应要素的NAME属性字段值              var dom = "<div style='font-size: 12px; color: #000000;border: 0.5px solid #000000'>"                + info.data.NAME + "< /div >";              //设置x与y的像素偏移量,不影响地图浏览;              var xOff = (1 / map.getScale()) * 0.001;              var yOff = -(1 / map.getScale()) * 0.005;              var pos = new SuperMap.LonLat(loc.lon+xOff, loc.lat+yOff);              //新建一个弹出框对象              infowin = new SuperMap.Popup("chicken",                  pos,                  new SuperMap.Size(100, 20),                  dom,                  true, null);              infowin.autoSize=true;              map.addPopup(infowin);            }          }        }     };     //关闭弹出窗     function closeInfoWin() {       if (infowin) {         try {           map.removePopup(infowin)         }         catch (e) {         }       }     }    

 

这样我们就可以获得以下下效果:

当鼠标移动到中国的某个省份上时,弹出框显示该省份的名称。

完整范例请见 http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/utfGridLayer.html

6、示例:UTFGrid国旗版

产品示例程序中提供了另一个属性专题图范例:UTFGrid国旗版。 该示例展示通过UTFGrid图层快速的响应用户的鼠标移动事件,显示出当前鼠标对应国家的国旗和名称。

完整范例请见 http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/utfGridLayerFlags.html