Visualization of GIS--attribute map

First, Introduction

Supermap IClient for JavaScript provides a Utfgrid layer (property map) for fast interaction of client property information. The Utfgrid layer reads data from the Utfgrid tile data source, which is essentially a combination of JSON-based ASCII code ' character painting ' and attribute data. Utfgrid layers cannot be rendered visually, using this layer in the map, you must also add the SuperMap.Control.UTFGrid control class to control the triggering event type.

• Principle: By requesting tile data (not pictures), the property information is saved to the Utfgrid layer of the customer service side, which improves the interaction speed of the client property information.
• Features: Quickly get property information for a layer on the client based on the screen pixel location.
• Scenario: The Utfgrid layer is often used for scenarios where clients need to respond quickly to property information. When it is necessary to query some figure properties on the map in real time and the number of figures is very large, it is necessary to get the property information by interacting with the server, and the time consumption is very high, while the Utfgrid layer can get the figure attribute information quickly and greatly improve the user experience. For example, to quickly get some property information for a figure when the mouse is hovering or when the mouse is clicked.

Second, use

Here's how to use the property map:

1. Create a Utfgrid layer

Create a property map object first. Because the property map reads data from the Utfgrid tile data source, you can specify layer properties such as Utftilesize, Pixcell, Utfgridresolution, and so on, as needed when you create the property map object.

        var utfgrid = new SuperMap.Layer.UTFGrid ("Utfgridlayer", url,                {                    layername: "[email protected]",                    utftilesize:256,                    pixcell:8,                    isusecache:true                },                {                    utfgridresolution:8                }        );        

Note: Pixcell and utfgridresolution two properties have a correspondence, when used to pay attention to the application scenario:

1. Where Pixcell is sent to the server request Utfgrid tile precision, the smaller the value, the higher the accuracy, the corresponding tile size will be greater;

2.utfgridResolution for the client to resolve the tile used precision, should be equal to the value of the Pixcell, otherwise the position and the property does not correspond to the problem;

3. Usually if the Utfgrid layer is a polygon layer, the corresponding amount of data will be larger, in order not to affect the normal browsing of the page, you can set these two properties larger;

4.isUseCache sets whether the cache is used, and using caching can improve performance.

2. Add to map

This layer is then added to the map.

        Add layer map.addlayers to map        ([Utfgrid]);        

3. Create a Utfgrid control

Creates a Utfgrid control, associated with a previously created property map Utfgrid with the Layers property, specifying that the trigger event type is move.

         Control = new SuperMap.Control.UTFGrid ({             layers: [Utfgrid],             callback:callback,             handlermode: "Move"         });        

4. Adding controls to the map

Add this control to the map.

        Add a control to the map        Map.addcontrol (Control);        

5. Handling Events

Call the callback function callback when the mouse event is triggered exactly when there is data on the Utfgrid layer.

The parameter infolookup of the callback function callback is a return object that consists of one or more key-value pairs, where the key value is the layer index, and the value is the data (attribute information) of the layer that the mouse position should be, and the data format is JSON type. With the Infolookup object, you can quickly get the property information of the corresponding figure of the mouse position without interacting with the server.

         var callback = function (Infolookup, loc, pixel) {Closeinfowin ();                   if (infolookup) {var info;                       for (var idx in infolookup) {info = Infolookup[idx];                           if (Info && info.data) {//Popup box content, Info.data.NAME is the NAME attribute field value of the current mouse position corresponding feature var dom = "<div style= ' font-size:12px;                           Color: #000000, border:0.5px solid #000000 ' > "+ Info.data.NAME +" </div > ";                           Sets the pixel offset of x and Y without affecting the map view; 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);                               Create a new pop-up box object Infowin = new Supermap.popup ("Chicken", POS,    New Supermap.size (+), DOM, true, NULL);                           Infowin.autosize=true;                       Map.addpopup (Infowin);         }                   }               }         }; Close the popup function Closeinfowin () {if (Infowin) {try {Map.removep         Opup (Infowin)} catch (e) {}}}

This allows us to achieve the following effects:

When the mouse moves to a province in China, the pop-up box displays the name of the province.

For a complete example, see http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/utfGridLayer.html

6. Example: Utfgrid flag Edition

Another attribute featured in the product sample program is an example: Utfgrid flag Edition. This example shows a quick response to a user's mouse movement event through the Utfgrid layer, showing the national flag and name of the current mouse counterpart.

For a complete example, see http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/utfGridLayerFlags.html

Visualization of GIS--attribute map