lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow
用过Arcgis Server for JavaScript API肯定知道InfoWIndow。你在用InfoWindow的时候会发现各种问题，比如不能全然显示的问题，遮盖对象的问题等等。所以呢我在实现这个功能的时候动了下脑子，想自己用div+css弄一个，倒腾了半天，弄出来了一个例如以下所看到的的：
做的比較丑陋，样式方面还得好好下下功夫。东西是差点儿相同实现了，以下说说思路：
首先。DIV定义，这个样式，我定义了5个div，各自是infowin，title，colse，content。arrow，当中。infowin是整个InfoWindow的大框架，title为标题。close为关闭button，content为主要内容，arrow为以下的小尾巴。我们能够将这个小尾巴做的长一点。以免对象被遮盖的情况，代码为：
<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>
定义了div就得进行布局。定义样式了，样式为：
<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>
样式定义完之后就得考虑事件了，一般InfoWindow是在点击某个对象时弹出来的，所以我们得定义对象图层的click事件：
function leftClick(evt){
infowin.style.display="none";
var strtitle="城市名称"
var strcontent = "****是一座漂亮的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市";
infowin.style.left=(evt.clientX-width/2)+"px";
infowin.style.top=(evt.clientY-height-50)+"px";
infowin.style.position="absolute";
infowin.style.width=width+"px";
infowin.style.height=height+"px";
infowin.style.display="block";
title.innerHTML = strtitle;
content.innerHTML = strcontent;
}
//鼠标单击
featurelayercity.on("click", leftClick);
点击对象，在鼠标的点击位置出现。所以我们得将infowin的position样式设为absolute。并定义left和top分别为clientX和clientY，并将其display设置为block，将其显示，实现的具体代码例如以下：
<!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 infowin,colse,title,content; var width=400,height=230; 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 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); infowin = document.getElementById("infowin");
colse = document.getElementById("close");
title = document.getElementById("title");
content = document.getElementById("content");
function leftClick(evt){
infowin.style.display="none"; var strtitle="城市名称"
var strcontent = "****是一座漂亮的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市"; infowin.style.left=(evt.clientX-width/2)+"px";
infowin.style.top=(evt.clientY-height-50)+"px";
infowin.style.position="absolute";
infowin.style.width=width+"px";
infowin.style.height=height+"px";
infowin.style.display="block"; title.innerHTML = strtitle;
content.innerHTML = strcontent; }
//鼠标单击
featurelayercity.on("click", leftClick);
});
</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>
眼下仅仅实现到了这儿， 还有下面问题待解决：1、地图拖动后infowin随着地图的联动。2、地图缩放后infowin随着地图的联动；3、内容不在可视范围时候的移动；4、样式。挺难看的。希望有人实现后共享下代码，造福全GISer。
lzugis
lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow的更多相关文章
- lzugis——Arcgis Server for JavaScript API之POI
POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百度地图的朋友们都知道你在百度地图时,当鼠 ...
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow（续）
同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow. 在上一讲中,实现了InfoWindow的显示,但是并没 ...
- lzugis——Arcgis Server for JavaScript API在自己的定义InfoWindow
你看到这个标题嫌烦.因为我最近一直与研究问题,相关文章使这些也可以只,同时要读我文章的朋友.我的文章能够给你带来帮助. 在相关的内部的前两篇文章,达到InfoWindow经div实现的东西,成Info ...
- Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- 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- ...
随机推荐
- Django 内容回顾
模板 变量 {{ }} 标签 {% %} if elif else for empty forloop() with...as csrf_token 过滤器 default length add da ...
- 如何解决error LNK2001(转载)
转自:http://www.cnblogs.com/myzhijie/articles/1658545.html 解决外部符号错误:_main,_WinMain@16,__beginthreadex ...
- ACM_Jack拆炸弹（深搜）
Jack拆炸弹 Time Limit: 2000/1000ms (Java/Others) Problem Description: 在一个由n*n个格子组成的监狱里被恐怖份子安置了一个定时炸弹.其中 ...
- Coursera公开课-Machine_learing：编程作业4
编程作业: Neural Network Learning 源码上传到gitlab. 对于神经网络的理解也都在源码注释里面了,感兴趣可以看看.
- [转]sed常用命令总结
转自:http://blog.chinaunix.net/uid-26963748-id-3249732.html 一.Sed简介 Sed:Stream Editor 流式编辑器 又称行编辑器,每次 ...
- SAS进阶《深入解析SAS》之Base SAS基础、读取外部数据到SAS数据集
SAS进阶<深入解析SAS>之Base SAS基础.读取外部数据到SAS数据集 前言:在学习完<SAS编程与商业案例>后,虽然能够接手公司的基本工作,但是为了更深入的SAS学习 ...
- Unity引擎 UGUI
Unity UGUI讲解 1.导入UI图片资源 2.设置参数: TextureType(纹理类型) 精灵 2D and UI SpriteMode(精灵模式) Single(单) multiple( ...
- Resources.getResourceAsReader 报空指针
1.maven项目中 可能未编译 导致找不到, 解决方法:mvn clean install -DskipTests -X 编译一下项目 2.可能在 Resources.getResourceAs ...
- Ajax——异步基础知识（三）
封装异步请求 1.将函数作为参数进行使用 2.因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数 <!DOCTYPE html> <html lang=&qu ...
- async await 同步方法调用异步方法死锁
同步方法调用异步方法.GetAwaiter().GetResult()计算函数超时,异步方法所有的回调操作都会期望返回到主线程. 所以会导致各种线程死锁.异步方法中使用ConfigureAwait(f ...