Lzugis--arcgis Server for JavaScript API in its own definition Infowindow

You see this headline wearies. Because I have recently been working with research questions, related articles make these can also be only, at the same time to read my article friends. My article can bring you help.

In the relevant interior of the first two articles, achieve infowindow by div implementation of things, into Infowindowbase realize Infowindow.

After implementation, Infowindow mainly changed the original style of ArcGIS. and increased the processing of infowindow out of bounds.

The Source:

Infowindow.js

Define (["dojo/evented", "Dojo/parser", "dojo/on", "Dojo/_base/declare", "dojo/dom-construct", "Dojo/_ba Se/array "," Dojo/dom-style "," Dojo/_base/lang "," Dojo/dom-class "," dojo/fx "," dojo/deferred "," Esri/domu TILs "," Esri/infowindowbase "],function (evented, parser, ON, declare, domconstruct, array, domst yle, Lang, Domclass, Corefx, Deferred, Domutils, infowindowbase) {var infowidth,infoheight;var initmapce Nter,initscreencenter;var Showmappoint,showscreenpoint=null;return Declare ([Infowindowbase, Evented], {constructor : function (Parameters) {lang.mixin (this, parameters);d Omclass.add (This.domnode, "Myinfowindow"); This._closebutton = Domconstruct.create ("div", {"Class": "Close", "title": "Close"}, This.domnode), This._title = Domconstruct.create ("div", { "Class": "title"}, This.domnode); this._content = Domconstruct.create ("div", {"Class": "Content"}, This.domnode); _arrow = domconstruct.create ("div", {"Class":" Arrow "}, This.domnode); On (This._closebutton," click ", Lang.hitch (this, function () {//hide the content when the info wi Ndow is toggled close.this.hide ();        });//hide initial display domutils.hide (this.domnode); this.isshowing = false; }, Setmap:function (map) {this.inherited (arguments); Map.on ("Pan", lang.hitch (this, function (pan) {var movepoint=pan.d Elta;if (this.isshowing) {if (showscreenpoint!=null) {This._showinfowindow (showscreenpoint.x+movepoint.x, (SHOWSCREENPOINT.Y+MOVEPOINT.Y);}})); Map.on ("Pan-end", lang.hitch (this, function (panend) {var movedelta=panend.delta;if (this.isshowing) { SHOWSCREENPOINT.X=SHOWSCREENPOINT.X+MOVEDELTA.X;SHOWSCREENPOINT.Y=SHOWSCREENPOINT.Y+MOVEDELTA.Y;})); Map.on ("Zoom-start", lang.hitch (this, function () {domutils.hide (This.domnode); This.onhide ();})); Map.on ("Zoom-end", lang.hitch (this, function () {if (this.isshowing) {Showscreenpoint=this.map.toscreen (showmappoint        ); This._showinfowindow (SHOWSCREENPOINT.X,SHOWSCREENPOINT.Y);})); }, Settitle: Function (title) {This.place (title, this._title);        }, Setcontent:function (content) {this.place (content, this._content); },_showinfowindow:function (x, y) {//position 10x10 pixels away from the specified Locationdomstyle.set (this.domnode,{"  Left ": X-INFOWIDTH/2 + + +" px "," top ": y-infoheight-75 +" px "}),//display the info windowdomutils.show (this.domnode); }, Show:function (location) {showmappoint=location;initmapcenter=this.map.extent.getcenter (); initscreencenter= This.map.toScreen (Initmapcenter); infoheight= $ (". Myinfowindow"). Height (); infowidth= $ (". Myinfowindow"). width (); if (location.spatialreference) {location = This.map.toScreen;} var left=location.x-infowidth/2;var top=location.y-infoheight-75;showscreenpoint=location;if (top<5) { initscreencenter.y=initscreencenter.y+top-5;} if (left<5) {initscreencenter.x=initscreencenter.x+left-5;} This._showinfowindow (SHOWSCREENPOINT.X,SHOWSCREENPOINT.Y); Initmapcenter=this.map.tomap (InitScreenCenter); This.map.cenTerat (initmapcenter); this.isshowing = True;this.onshow ();        }, Hide:function () {domutils.hide (this.domnode); this.isshowing = False;this.onhide (); }, Resize:function (width, height) {domstyle.set (this._content,{"width": Width + "px", "height": (height-60) + "px"})        ;d Omstyle.set (this._title,{"width": Width + "px"});        }, Destroy:function () {Domconstruct.destroy (this.domnode); This._closebutton = This._title = This._content = null; }); return infowindow;});

Infowindow.js

. myinfowindow {Position:absolute;  z-index:100;  Font-family:sans-serif; font-size:12px;}. Dj_ie. Myinfowindow {border:1px solid black;}.  Myinfowindow. content {position:relative;  Background-color: #EFECCA;  Color: #002F2F;  Overflow:auto;  padding-top:5px;  padding-bottom:5px; padding-left:5px;}. Myinfowindow Arrow {position:absolute;width:0px;height:0px;line-height:0px;/* to prevent problems */border-top:60px solid # in IE efecca;border-left:5px Solid transparent;border-right:20px solid transparent;left:45%;bottom: -60px;}.  Myinfowindow. Close {position:absolute; top:7px; right:5px;  Cursor:pointer; Background:url (http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/layout/images/  tabclose.png) no-repeat Scroll 0 0 transparent; width:12px; height:12px;}. Myinfowindow. close:hover {background-color: #F7FCFF;}.  Myinfowindow. title {font-weight:bold;  Background-color: #046380;  Color: #E6E2AF;  padding-top:5px;  padding-bottom:5px; Padding-left:5px;} 

Test.html

<! DOCTYPE html>
！
。   "); var featurelayercity = new Featurelayer ("Http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_       Marathon/featureserver/0 ", {Mode:FeatureLayer.MODE_SNAPSHOT, infotemplate:template, outfields: [" * "]  }); var pmsred = new Picturemarkersymbol ('..  /images/location_icon_blue.png ', (+). SetOffset (0, 15);  Simple rendering of Var sr=new simplerenderer (pmsred);      Featurelayercity.setrenderer (SR);        Map.addlayer (featurelayercity);    Resize the Info window map.infoWindow.resize (400, 200);    }); </script> 

Upload resources under

Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.

Lzugis--arcgis Server for JavaScript API in its own definition Infowindow