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- ...
随机推荐
- knit使用安装 ecstore knit位置 及调用路径
菜鸟一枚,接触php不久. 情况一: 最简单的: windows下, php文件引用kint 将kint放入c盘 php/pear下,我一般将kint包改名字为kint 结构如下: c:/php/pe ...
- S5第一次月考
# Python五期月考一 # 1 介绍 # 满分100分,90分及格 # # 考试范围: # 1.Python语法 # 2.数据类型 # 3.流程控制 # 4.函数 # 5.模块 # # 考试时间: ...
- 第一课 C语言简明教程
1序言: 1与Java.C#等高级语言相比,C语言使用简单但是也非常重要更容易出错,到目前为止基本上操作系统的内核代码超过百分之九十使用C语言完成,因此学好C语言是学好计算机这门课程的基础,特别是进入 ...
- 关于OAuth的state参数的作用
引用: https://blog.csdn.net/gjb724332682/article/details/54428808 在开发 OAuth认证服务器 的时候,开发者的安全意识不高的话,很可能会 ...
- Java项目结构总结
一.Struts2+Spring+Hibernate 项目的文档结构 二.Spring MVC+MyBatis项目的文档结构 三.Tomcat文档目录结构 转载至:https://www.cnblog ...
- hadoop19---动态代理
Action调用service里面的方法,动态代理:改变方法的实现在方法前后加逻辑不是加新方法. 在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于Io ...
- 《Maven实战》第10章 使用Maven进行测试
10.2maven-surefire-plugin插件 [生命周期]的[阶段]与[插件]的[目标]绑定 default生命周期的test阶段:使用单元测试框架运行测试 Maven内置绑定:defaul ...
- Curator的监听机制
原生的zookeeper的监听API所实现的方法存在一些缺点,对于开发者来说后续的开发会考虑的细节比较多. Curator所实现的方法希望摒弃原声API 的不足,是开发看起来更加的简单,一些重连等操作 ...
- kafka入门使用
kafka版本0.11.0.1以上自带zookeeper,必须要求环境中有jdk,解压后进入目录 1.在kafka解压目录下下有一个config的文件夹,里面放置的是我们的配置文件 consumer. ...
- HttpServletResponse 的 sendError( )方法以及常用的HttpServletResponse常量级错误代码
HttpServletResponse 的 sendError( )方法以及常用的HttpServletResponse常量级错误代码 转载:http://hi.baidu.com/yanfei_ ...