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- ...
随机推荐
- cmd 命令 记忆
1,“开始”—>“运行”,输入cmd,回车.<或 win+R> 2,出现“命令提示符”的窗口,一般情况下是 C:\Documents and Settings\Administrat ...
- win10安装z3求解器
因为课程要求,我不得不接触求解器,之前有在ubuntu上装过一个叫stp的求解器,没怎么用: 今天在我的电脑(win10)上上装了一款更方便的求解器---z3,下面先详细介绍一下怎么安装和配置: 1. ...
- 程序包com.sun.istack.internal不存在
添加一下依赖 <!-- https://mvnrepository.com/artifact/com.sun.xml.bind/jaxb-impl --><dependency> ...
- NOIP 货车运输
题目描述 Description A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过 ...
- Google maps api demo
demo: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- “玲珑杯”ACM比赛 Round #13 B -- 我也不是B(二分排序)
题意:开始有一个空序列s,一个变量c=0,接着从左往右依次将数组a中的数字放入s的尾部,每放一个数字就检测一次混乱度K,当混乱度k大于M时就清空序列并让c=c+1 K = Bi * Vi(1<= ...
- 用户iis可以用外网ip访问,用内网访问报错404
如下,没有添加内网ip绑定
- 【C#笔札】 界面逐渐显现的实现
如果labview做 就如同上图,so eazy! 现改C#实现这个简单的功能. 在工具箱找到Timer控件 双击 思路如下,界面打开时触发timer事件,每隔一段时间调整界面透明度 开搞 属性框中的 ...
- websocket之django简单使用
WebSocket protocol: WebSocket protocol 是HTML5一种新的协议.它是实现了浏览器与服务器全双工通信(full-duplex).HTML5定义了WebSocket ...
- eclipse中修改工程的Android版本
项目根目录下project.properties的记录项目中所需要的环境信息,比如Android的版本等 project.properties示例如下: [html] view plaincopy # ...