GIS可视化——属性图

2024-04-27 14:08:01

字体：大中小

来源：转载

供稿：网友

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) {                 }             }         }

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

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