Arcgis for Js is implemented by displaying the object name with the mouse, arcgisjs

Arcgis for Js is implemented by displaying the object name with the mouse, arcgisjs

When you move the mouse over an object or POI while browsing a map, it is very practical for you to prompt the object name. This article describes in Arcgis for Js, two different methods are used to achieve this effect.

In order to have an intuitive concept, Let's first look at the effect after implementation:

Effect of Baidu Map

Effect 1

Effect 2

We can see the effect intuitively. The following describes the two methods implemented in Arcgis for Js. When effects are implemented, there are two layers of events: the mouse-over and the mouse-out events. The mouse displays the Object Name and removes the mouse to clear the display.

1. Implemented through TextSymbol and GraphicMarkerSymbol

In this way, the display is directly implemented using Arcgis. The implementation code is as follows, and the effect is 2:

Function mouseOverLayer (e) {map. setMapCursor ("pointer"); console. log (e. graphic); var font = new esri. symbol. font (); font. setSize ("10pt"); font. setFamily (""); var cpoint = event. graphic. geometry; var text = new esri. symbol. textSymbol (event. graphic. attributes. name); text. setFont (font); text. setColor (new dojo. color ([0,100,]); text. setOffset (20,-35); pmsTextBg. setOffset (20,-30); var textLength = event. graphic. attributes. name. length; pmsTextBg. setWidth (textLength * 13.5 + 5); var bgGraphic = new esri. graphic (cpoint, pmsTextBg); showTextLayer. add (bgGraphic); var labelGraphic = new esri. graphic (cpoint, text); showTextLayer. add (labelGraphic) ;}; function mouseOutLayer () {map. graphics. clear (); showTextLayer. clear (); map. setMapCursor ("default ");}

2. directly use div to display

By getting the cursor or ry position, convert the position to the screen coordinate and display the information in the form of a div. The Code is as follows. The effect is 1:

            function mouseOverLayer(e){                map.setMapCursor("pointer");                console.log(e.graphic.attributes);                var scrPt = map.toScreen(e.graphic.geometry);                console.log(scrPt);                var textDiv = dojo.doc.createElement("div");                dojo.attr(textDiv,{                    "id":"text"                });                dojo.style(textDiv, {                    "left": scrPt.x+10 + "px",                    "top": scrPt.y+10 + "px",                    "position": "absolute",                    "z-index":99,                    "background":"#fcffd1",                    "font-size":"10px",                    "border":"1px solid #0096ff",                    "padding": "0.1em 0.3em 0.1em",                    "font-size": "11px",                    "border-radius": "3px",                    "box-shadow": "0 0 0.75em #777777"                });                textDiv.innerHTML =e.graphic.attributes.name;                dojo.byId("map").appendChild(textDiv);            };            function mouseOutLayer(e){                map.setMapCursor("default");                dojo.byId("map").removeChild(dojo.byId("text"));            };

Comparison:

Both of the above methods can achieve the same effect, but it is easy to implement. The second method is simpler than the first method, in terms of the appearance of the implementation, the second method is better than the first method for adjustment and control. In terms of implementation efficiency, the second method is better than the first one. However, in the combination with maps, it is obvious that, the second type is slightly worse than the first type.

If you have any questions, contact:

QQ: 1004740957

Email: niujp08@qq.com