lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)
同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。
在上一讲中,实现了InfoWindow的显示,但是并没有实现地图拖动地图InfoWindow随着联动,以及缩放地图InfoWindow随着联动的问题,在本文章中,就上述两个问题提供一个解决思路。
首先,说说拖动地图InfoWindow的联动。拖动地图时,地图并未做缩放,所以只是做一个位置的偏移,因此,定义一个公共变量,记录InfoWindow出来时候的屏幕位置,拖动鼠标时获取鼠标的相对变化,再讲InfoWindow做一相对应的偏移即可:
var beforePoint; //定义InfoWindow出现的上一位置
function leftClick(evt){ infowin.style.display="none"; var strtitle="城市名称" var strcontent = "****是一座美丽的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市"; title.innerHTML = strtitle; content.innerHTML = strcontent; var screenpoint = map.toScreen(evt.mapPoint); beforeMapPoint = evt.mapPoint; beforePoint=screenpoint; showinfowindow(screenpoint.x,screenpoint.y); }
map.on("pan",function(pan){ var movePoint=pan.delta; showinfowindow((beforePoint.x+movePoint.x),(beforePoint.y+movePoint.y)) }) map.on("pan-end",function(panend){ var movedelta=panend.delta; beforePoint.x=beforePoint.x+movedelta.x; beforePoint.y=beforePoint.y+movedelta.y; })
这样,拖动鼠标,infoWindow会随着鼠标的移动而移动。
接着,我们说说缩放时InfoWindow的联动。缩放时的联动的逻辑是记录InfoWindow首次出现的地图点的坐标,当缩放结束后将首次出现的地图点转换为屏幕坐标,再将其显示出来。
map.on("zoom-end",function(){ var zoomPoint = map.toScreen(beforeMapPoint); showinfowindow(zoomPoint.x,zoomPoint.y); beforePoint=zoomPoint; })
怎么样,很简单吧,下面一并将全的代码附上:
<!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>Feature Layer - display results as an InfoWindow onHover</title> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; font-size:10px; position: relative; } #infowin { display:none; z-index:10000; } #close { float:right; padding-top:10px; font-weight:bold; font-size:12px; color:#FFF; border:#000 1px solid; height:20px; width:20px; text-align:center; } #close:hover { cursor:pointer; } #title { background-color:#666; padding:10px; font-weight:bold; font-size:12px; } #content { padding-left:10px; padding-top:10px; background-color:#999; height:200px; } #arrow { background-image:url(arrow.png); height:30px; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> var dmap,infowin,colse,title,content; var width=400,height=230,offset=50; var closeInfoWin = function (evt){ infowin=document.getElementById("infowin"); infowin.style.display="none"; }; require([ "esri/map", //地图 "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer",//特征层 "esri/symbols/PictureMarkerSymbol",//图片点符号 "esri/renderers/SimpleRenderer", //简单渲染 "esri/graphic", //图片 "esri/lang", "dojo/domReady!" ], function( Map,ArcGISTiledMapServiceLayer,FeatureLayer,PictureMarkerSymbol,SimpleRenderer,esriLang ) { var beforePoint; var beforeMapPoint; var map = new Map("mapDiv", { logo:false, center: [106.6854, 35.8364], zoom: 4, slider: true }); var shpServiceURL="**************************************"; var shpTitlelayer=new ArcGISTiledMapServiceLayer(shpServiceURL); map.addLayer(shpTitlelayer); //-------------------------------------------------------------------------------------------------------- var featurelayercity = new FeatureLayer("**************************************************", { mode: FeatureLayer.MODE_SNAPSHOT, 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); dmap=document.getElementById("mapDiv"); infowin = document.getElementById("infowin"); colse = document.getElementById("close"); title = document.getElementById("title"); content = document.getElementById("content"); function showinfowindow(x,y){ infowin.style.left=(x-width/2)+"px"; infowin.style.top=(y-height-offset)+"px"; infowin.style.position="absolute"; infowin.style.width=width+"px"; infowin.style.height=height+"px"; infowin.style.display="block"; }; function leftClick(evt){ infowin.style.display="none"; var strtitle="城市名称" var strcontent = "****是一座美丽的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市"; title.innerHTML = strtitle; content.innerHTML = strcontent; var screenpoint = map.toScreen(evt.mapPoint); beforeMapPoint = evt.mapPoint; beforePoint=screenpoint; showinfowindow(screenpoint.x,screenpoint.y); } //鼠标单击 featurelayercity.on("click", leftClick); map.on("pan",function(pan){ var movePoint=pan.delta; showinfowindow((beforePoint.x+movePoint.x),(beforePoint.y+movePoint.y)) }) map.on("pan-end",function(panend){ var movedelta=panend.delta; beforePoint.x=beforePoint.x+movedelta.x; beforePoint.y=beforePoint.y+movedelta.y; }) map.on("zoom-end",function(){ var zoomPoint = map.toScreen(beforeMapPoint); showinfowindow(zoomPoint.x,zoomPoint.y); beforePoint=zoomPoint; }) }); </script> </head> <body class="tundra"> <div id="mapDiv"> <div id="infowin"> <div id="close" onClick="closeInfoWin()">X</div> <div id="title"></div> <div id="content"></div> <div id="arrow"></div> </div> </div> </body> </html>
lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)的更多相关文章
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- 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- ...
随机推荐
- TP框架基础2
---恢复内容开始--- [空操作和空控制器处理] 空操作:就没有指定的操作方法 空控制器:没有指定控制器 http://网址/index.php/Home/User/login http://网址/ ...
- Kattis - honey【DP】
Kattis - honey[DP] 题意 有一只蜜蜂,在它的蜂房当中,蜂房是正六边形的,然后它要出去,但是它只能走N步,第N步的时候要回到起点,给出N, 求方案总数 思路 用DP 因为N == 14 ...
- [转]从程序员到CTO的Java技术路线图
原文链接:http://zz563143188.iteye.com/blog/1877266 在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常 ...
- Linux防火墙--iptables学习
iptables是Linux系统提供的一个强大的防火墙工具,可以实现包过滤.包重定向.NAT转换等功能.iptables是免费的,iptables是一个工具,实际的功能是通过netfilter模块来实 ...
- EasyUI:datagrid控件简介
EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true
- Go语言学习之运算符(The way to go)
生命不止,继续go go go 今天介绍go中的运算符. 运算符大概分为: Arithmetic Operators Relational Operators Logical Operators Bi ...
- 在Linux系统中使用蓝牙功能的基本方法
首先确定硬件上有支持蓝牙的设备,然后运行如下命令,就可以开到我们的蓝牙设备了: lsusb 运行hciconfig可以看到:从上图可以看出,我们的蓝牙设备是hci0运行hcitool dev可以看到我 ...
- java拷贝指定文件夹下的指定文件类型
例如:把C:\Windows\SysWOW64下的所有dll文件拷贝到C:\Users\Administrator\Desktop\64dll这个目录 package com.xiaostudy.co ...
- MYSQL的基本语句——思维导图
如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/a1718332616630 有道云笔记图片链接 http://note.youdao.com/ ...
- java模拟http的get和post请求
如题,使用Java模拟GET和POST请求.使用GET可以实现网页抓取,使用POST可以实现对某些网站登录的暴力破解.不过仅是练习,实际意义不大. import java.io.IOException ...