Talking about Supermap iclient for JavaScript pop-up window class

map as the carrier and presentation of information, is an important part of GIS, it is a window of information, in the increasingly developed information today, a variety of map applications such as springing up in the general public, rather than as before too limited to the field of professional. The pop-up window, as a supplementary description and description of the map information, is also widely used in various map applications. A good front-end interface design to flexible use of space, but also to do a vivid interaction with users, and in the map application, the use of good pop-up windows, not only will make people feel comfortable will also be convenient and increase interaction with users, enhance the user experience. How to use and how to better use the pop-up (popup) class of iclient for JavaScript is the topic to be explored in this paper.

First, the basic 1. Classification

ordinary pop -up window (supermap.popup): At the same time, it is also the base class of the pop-up window class, not only can be directly new out, but also the quilt class inherits its public properties and methods, JS API manual enumeration of properties and methods can be inherited by its subclasses. Its default occurrence is the top left corner of the popup at the given coordinate point.

The default effect is as follows ↓:

fixed anchor position pop -up (SuperMap.Popup.Anchored): Floating pop-up window with fixed anchor position that can be displayed around the specified position. That is, when the pop-up anchor (Lonlat) is at the edge of the current map's visible range, it automatically adjusts which corner of the pop-up is docked at the anchor point.

The default effect is as follows ↓:

pop-up window with a small tail (SuperMap.Popup.FramedCloud): A floating pop-up window with a pointing and border. While it has no edge-adaptive position effect, moving the map with edges makes the popup display the full effect and shadow effect.

The default effect is as follows ↓:

2. Use

The use of the pop-up window class is simple, new one added to the map is good, here Framedcloud for example, the code :

1 varMap =NewSupermap.map ("Map");//quotes inside map as page div element ID2 3 //Initialize the Framedcloud class4 varFramedcloud =NewSuperMap.Popup.FramedCloud (5"Chicken",//The unique ID of the popup window, which is the ID of the popup div loaded on the map6    NewSupermap.lonlat (11339634, 4588716),//coordinate points on the current map for locating the pop-up window position7    NewSupermap.size (120,60),//the size of the pop-up window content, which can be null8‘<div style= "margin:25px 10px; padding:0;" > Pop-up window content, equivalent to the innerhtml of DIV elements9</div> ',Ten    NULL,//anchor Point, that is, how the pop-up window locates the coordinate point One    true,//BOOL, whether the Close button is displayed A    NULL,//function , close the pop-up window to trigger the callback function -    false                             //whether to show shadows, default to True - ); theframedcloud.fixedrelativeposition=true;//is a fixed relative position and defaults to false.  - varLayer =NewSuperMap.Layer.CloudLayer ();//Initialize the Hyper-map cloud layer -Map.addlayers ([layer]);//add a hyper-map cloud layer -Map.setcenter (NewSupermap.lonlat (11339634, 4588716), 4);//set the center point and scale level of the display +Map.addpopup (Framedcloud);//load the pop-up window onto the map control,

That's it? That's it.

JS API class reference has more properties and methods, you can adjust, set. The above code just initializes a popup window, obviously does not meet our needs, but it is enough to illustrate its usage. The use of the base of the pop-up window, the content of the popup window, you can freely play, you can use the third-party plug-ins, JQuery UI (tutorials), bootstrap, etc., you can freely customize the contents of the pop-up window.

How do we use it? The most common is to click on the map icon, any can register click on the event where to add pop-up window. Here's an example:

Click on the Point object to display the popup window:
Here we use the Point object on the SuperMap.Layer.Vector layer (and the other objects are the same), how to get the point object, how to style the processing is not much to say, let's see what parameters it needs:
First, the most important parameter, the anchor Point , is the Supermap.lonlat type, so we have to find a way to get the coordinates of the clicked point. Click events for features on the SuperMap.Layer.Vector layer can be registered with SuperMap.Control.SelectFeature, set the Onselect property and set its Repeat property to True, or Use the Callbacks property (JS API class reference to see the supported events) to implement the Click event:

1 var New SuperMap.Control.SelectFeature (vectorlayer,{onselect:onfeatureselect,repeat:true, Selectstyle: Style}); 2 // Onselect:{function}, called when the feature is selected, requires the user to define a specific method that receives the currently selected feature as a parameter.  3//

By the way, there are a number of ways to set Vectorlayer features to select a state style, which is one of them.

Let's take a look at the click (here is the repeated trigger of the selected event) after the event is triggered, the parameters passed to the callback function have the coordinate parameters we want to use to console.log(e) see:

Although there is no direct Lonlat object, but fortunately there are geometry objects, it is the information of this point object, but in the class reference, The SuperMap.Geometry.Point point object does not directly get the methods and properties of the Lonlat object, one method is a new Supermap.lonlat object, and I use another method that is common to Geometry objects, first with geometry.getBounds() Method gets the bounds of the Geometry object, and then uses the Supermap.bounds object's Bounds.getCenterLonLat() method to get its center coordinate point Lonlat object:

1 var lonlat= e.geometry.getbounds (). Getcenterlonlat ();

With the anchor point, what to do next will not need me to say more? Here we add the use of the anchor attribute, which is used to locate the pop-up window relative to the location of the position, Generally use the Supermap.icon object, which does not add an icon anywhere in the pop-up window, and uses it because it does not need to construct an object that contains the size information and the offset information, so that you can dock the pop-up window over the point icon picture without having the small tail overlap with the icon, the effect is as follows ↓:

With the above example, the other geometry objects are OK, as long as the parameters are right .
In addition, some friends do not want to use the client layer to pop the window, what to do? IServer 7C began to support property tiles, and the client also has a related docking class, namely: SuperMap.Layer.UTFGrid. The JS API has some examples of the two layers used, and here's a hint:

Utfgrid uses the SuperMap.Control.UTFGrid control to register events, the types of events supported are click (click), hover (hover), and drag (move).

Add a point chart that is used to handle massive amounts of data and register its events with the SuperMap.Control.GOIs control.

3. Other

• Depending on the specific pop-up type, the number of parameters of the constructor is different, and the Framedcloud constructor already contains all the parameters of other types of pop-up windows, so the rest of the pop-up window types are no longer mentioned.
• To understand their inheritance relationships, subclasses inherit the properties and methods of the parent class.

Second, advanced

The methods and properties in the class reference and their combinations can't do what you want to do? Anyway, do you want to do the pop-up effect that can't be done by IClient for JavaScript? See here is right, the reason is advanced rather than high, because I want to say the following is actually very simple, do not need to go to the JS API source code to modify, rewrite and extend. OK, I will not suspense, a word can be said clearly:

The pop-up window added to the map is a div.

Okay, I'm done, class.
That's it? That's it! You should have thought of that, didn't you? This sentence is actually already very good summed up the next content, then the next simple introduction, and then the small partners can play happily, enjoy the imagination.

1. Pop-up window padding, scroll bars, borders, Shadows, translucency, and more effects and animations

Look at the picture ↓:

Do you remember anything? Pop-up this div's ID is the first parameter we gave when we new the popup window, and we know the whole window div and its nesting relationship, the first problem is solved, right? Although the class reference has some methods, such as border, transparency style settings, it is obviously more flexible to set this.
In addition, through the IClient JS theme Package (theme folder) in the style.css file, you can find some of the pop-up window class style definition:

1 . smframedcloudpopupcontent {2    padding:5px; 3     Overflow:auto; 4 }

Not recommended in the original file modification (really to change remember backup), you just need to define a CSS style overlay or append to the default style, to ensure that the default style is overwritten, you can add !importantafter the style, such as:

1 . smframedcloudpopupcontent{2    Overflow:hidden!  important; 3    Padding:0! important; 4 }

The effect is that the pop-up content (the part of the outer div you're writing) doesn't show the ScrollBar, and the padding is 0.

Of course, you can search for Popup -related styles in the Style.css (under \theme\default) file, but it's more intuitive to view the elements in a browser, and the reason to look at the default style is to avoid the custom style from taking effect. Now you know, it's good to add a !important to cover the default.
Here, you can use a variety of UI, animation library (recommended animate.css), you can play.

2. The idea that the pop-up window moves with the mouse or with the point on the map

How do I move a pop-up window after adding a popup on map? Each location change (Onlat property) first remove the pop-up window and add it? Of course it is possible, if you do not need to interact with the user does not consider the performance of the Multi-window of the case. This is a method, but not to be considered.

First, gather the necessary information:

1. We already know the ID of the popup window (when the new pop-up window is given, or it can be viewed in the browser), to change its position, just set its left and top values of its style, how to get it?
2. Look at the Popup object in addition to a div, there is no in the Map object

Let's look at the properties and methods under the map control:

Properties	Description
Popups	The list of pop-up windows on the {Array (supermap.popup)} map.

Method	Description
getviewportpxfromlayerpx
getviewportpxfromlonlat
Getpixelfromlonlat	gets the pixel coordinates on the map. Converts the specified geographic point location coordinate to its pixel coordinate relative to the top-left corner of the map window, according to the current Baselayer
Getlonlatfrompixel	returns its geographic location on the map based on the pixel location relative to the upper-right corner of the map window. Converted to Lon/lat (longitude/latitude) shape based on current baselayer.
getlayerpxfromlonlat
getlayerpxfromviewportpx
removeallpopup
removepopup

For the first way of thinking, using the Getlonlatfrompixel and Getpixelfromlonlat methods can be achieved, and do not need to calculate the location of the map container in the page, but after this change, the object of the popup window Lonlat and other properties will not change, If necessary, you can manually change its properties, in addition, the shadow (multiple div together) will not be moved, also need to manually change, like the above method, or do not use the shadow, and use the popup CSS Shadow style, here with setinterval simple simulation of the following:

1 functionMouseclickhandler (e) {2 Closeinfowin ();3 4                 varFramedcloud=NewSuperMap.Popup.FramedCloud (5"Chicken",6 E.object.lonlat,7                     NULL,8' This is equivalent to the innerHTML section ',9                     NewSupermap.icon ("',NewSupermap.size (21,25),NewSupermap.pixel (-10,-20)),Ten                     true, One                     NULL, A                     true -                 ); -framedcloud.panmapifoutofview=true; theInfowin =Framedcloud; - Map.addpopup (framedcloud); -                 //randomly change the location of the pop-up window within a certain range -SetInterval (function(){ +                     varPx=map.getpixelfromlonlat (NewSupermap.lonlat (E.object.lonlat.lon+math.random () *100000,e.object.lonlat.lat+math.random () *100000)); -document.getElementById ("Chicken"). style.left=px.x+ "px"; +document.getElementById ("Chicken"). Style.top=document.getelementbyid ("Chicken"). style.height+px.y; A},100); at}

The second way of thinking, of course, is to get to the popup object, change its Lonlat property, but you will find that after the change, the pop-up window does not move, because you just changed the properties of the object, Div is not affected, unless you refresh the map or redraw the div. However, there are ways to use the SuperMap.Popup.updateSize () method can be:

1 setinterval (function() {2                     var lonlat=New Supermap.lonlat (E.object.lonlat.lon+math.random () *100000,e.object.lonlat.lat+math.random () *100000); 3                     map.popups[0].lonlat=Lonlat; 4                     Map.popups[0].updatesize (); 5                 },1000); 6             }

Both can be used in combination, the first idea is more flexible. It's important to press F12 in your browser.

About the pop-up window class, the advanced content is here, the high-level content of everyone to explore it. Hope this article can give you some inspiration, broaden some ideas.

Talking about Supermap iclient for JavaScript pop-up window class