lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助。
在前面的两篇相关的文章里面,实现InfoWindow是通过div的东西实现的,本文要讲的是通过集成InfoWindowBase实现infowindow的。实现后InfoWindow主要修改了arcgis原来的样式,并加入了InfoWindow出界的处理。
源代码奉上:
InfoWindow.js
define([ "dojo/Evented", "dojo/parser", "dojo/on", "dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/dom-style", "dojo/_base/lang", "dojo/dom-class", "dojo/fx", "dojo/Deferred", "esri/domUtils", "esri/InfoWindowBase" ], function( Evented, parser, on, declare, domConstruct, array, domStyle, lang, domClass, coreFx, Deferred, domUtils, InfoWindowBase ) { var infoWidth,infoHeight; var initMapCenter,initScreenCenter; var showMapPoint,showScreenPoint=null; return declare([InfoWindowBase, Evented], { constructor: function(parameters) { lang.mixin(this, parameters); domClass.add(this.domNode, "myInfoWindow"); this._closeButton = domConstruct.create("div",{"class": "close", "title": "关闭"}, this.domNode); this._title = domConstruct.create("div",{"class": "title"}, this.domNode); this._content = domConstruct.create("div",{"class": "content"}, this.domNode); this._arrow = domConstruct.create("div",{"class": "arrow"}, this.domNode); on(this._closeButton, "click", lang.hitch(this, function(){ //hide the content when the info window 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.delta; 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 location domStyle.set(this.domNode,{ "left": x - infoWidth/2 + 15 + "px", "top": y - infoHeight-75 + "px" }); //display the info window domUtils.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(location); } 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" }); domStyle.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;/*为了防止ie下出现题型*/ border-top: 60px solid #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> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Custom Info Window</title> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <link rel="stylesheet" href="myModules/InfoWindow.css"> <style> html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script> var dojoConfig = { parseOnLoad:true, packages: [{ "name": "myModules", "location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules" }] }; </script> <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script> <script src="jquery.min.js"></script> <script> require([ "dojo/dom", "dojo/dom-construct", "esri/map", "myModules/InfoWindow", "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/PictureMarkerSymbol",//图片点符号 "esri/renderers/SimpleRenderer", //简单渲染 "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/string", "dojo/domReady!" ], function( dom, domConstruct, Map, InfoWindow, ArcGISTiledMapServiceLayer, PictureMarkerSymbol, SimpleRenderer, FeatureLayer, InfoTemplate, string ) { //create the custom info window specifying any input options var infoWindow = new InfoWindow({ domNode: domConstruct.create("div", null, dom.byId("mapDiv")) }); var map = new Map("mapDiv", { logo:false, basemap: "gray", center: [-98.57, 39.82], zoom: 4, zoom: 4, slider: true, infoWindow: infoWindow }); //define the info template that is used to display the popup content. var template = new InfoTemplate(); template.setTitle("<b>${name}</b>"); template.setContent("hello"); template.setContent("<h1>我是中国人民的儿子</h1><br>你妹啊!!!"); 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', 20, 20).setOffset(0, 15); //简单渲染 var sr=new SimpleRenderer(pmsRed); featurelayercity.setRenderer(sr); map.addLayer(featurelayercity); //resize the info window map.infoWindow.resize(400, 200); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>
lzugis——Arcgis Server for JavaScript API之自定义InfoWindow的更多相关文章
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)
同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow. 在上一讲中,实现了InfoWindow的显示,但是并没 ...
- Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow
用过Arcgis Server for JavaScript API肯定知道InfoWIndow.你在用InfoWindow的时候会发现各种问题,比如不能全然显示的问题,遮盖对象的问题等等.所以呢我在 ...
- lzugis——Arcgis Server for JavaScript API之POI
POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百度地图的朋友们都知道你在百度地图时,当鼠 ...
- lzugis——Arcgis Server for JavaScript API在自己的定义InfoWindow
你看到这个标题嫌烦.因为我最近一直与研究问题,相关文章使这些也可以只,同时要读我文章的朋友.我的文章能够给你带来帮助. 在相关的内部的前两篇文章,达到InfoWindow经div实现的东西,成Info ...
- ArcGIS server开发之API for js 本地部署
ArcGIS Server for javascript 本地部署 第一次使用arcgis server for js开发,在经验方面还有很多的不足,所以将自己在开发过程中遇到的问题写出来与大家共享. ...
- ArcGIS 10.2 JavaScript API本地部署离线开发环境
1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...
- ArcGIS Server for JavaScript 3.3 的安装部署
一.安装包下载 首先从官网下载ArcGIS API for JavaScript 3.3 的API和SDK,地址:http://support.esrichina.com.cn/2011/0223/9 ...
- How to CORS enable ArcGIS Server 10.2.1 to Access REST Services without Using proxy.ashx
http://gis.stackexchange.com/questions/86206/how-to-cors-enable-arcgis-server-10-2-1-to-access-rest- ...
随机推荐
- Codeforces Round #395 (Div. 2) C. Timofey and a tree
地址:http://codeforces.com/contest/764/problem/C 题目: C. Timofey and a tree time limit per test 2 secon ...
- linux中相关服务不能访问的排错技巧
Linux相关服务不能访问的排错步骤,以HTTP服务为例: 一.服务端排查思路: 1.检查SELinux是否关闭(针对CentOS6系统) (1)临时关闭 setenforce 0 (2 ...
- Cookie应用参考
内容来自imooc.
- OpenGL核心技术之Shadow Mapping改进版
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...
- log4j日志的配置--Debug
############################### 日志记录器定义 ################################ 日志输出级别 OFF.DEBUG.INFO.WARN. ...
- [Ctsc2000]冰原探险
Description 传说中,南极有一片广阔的冰原,在冰原下藏有史前文明的遗址.整个冰原被横竖划分成了很多个大小相等的方格.在这个冰原上有N个大小不等的矩形冰山,这些巨大的冰山有着和南极一样古老的历 ...
- JMS-activMq与spring进行整合
对JMS做了一个简要介绍之后,接下来就讲一下Spring整合JMS的具体过程.JMS只是一个标准,真正在使用它的时候我们需要有它的具体实现,这里我们就使用Apache的activeMQ来作为它的实现 ...
- 分享:自定义JAVA注解
元注解 元注解指用来定义注解的注解,例如:@Retention @Target Inherited @Documented等等.最为重要和经常使用的是@Retention @Target. @Rete ...
- iOS CoreData版本升级和数据库迁移
app中使用了CoreData,并且在下一个版本中有实体变动,比如实体新增字段.修改字段等改动, 那么app在覆盖安装时就要进行数据库迁移, 否则app就会crash. 那如何实现数据库迁移呢?大概需 ...
- thinkphp3.2.3 定时任务重新加载, 无法加载新的定时任务的问题
thinkphp3.2.3 的定时任务有个坑,一旦你改名定时任何或者路径,新的定时任务将无法加载,无论你重启php还是重启nginx,甚至重启服务器,都不行. 原因是你要删掉一个类似lock文件,才可 ...