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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

多端排版杂谈

导语 本次主要聊聊多平台的排版技术的差异与共同,涉及的平台有Web、Android、iOS 要说排版技术,在这三个平台中我觉得最有话语权的应该就We...

19370
来自专栏菜鸟前端工程师

html+css学习笔记019-H5响应式布局0自适应布局

42020
来自专栏前端笔记

【 前端相关 网页布局 】探讨CSS3中 “垂直居中” 问题

“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中实现垂直居中。” —— James Anderson 难题 在 CSS 中对元素进行水平居...

29980
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

21150
来自专栏程序人生 阅读快乐

超实用的jQuery代码段

本书精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。本...

11810
来自专栏互联网杂技

轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: ? 但轮播图对用户真的有意义吗...

48170
来自专栏IT大咖说

从UI到AI——移动端H5生成技术漫谈

15250
来自专栏各种机器学习基础算法

关于Web语义化的意义

随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

33860
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

9220
来自专栏腾讯大讲堂的专栏

浅议内滚动布局

一、什么是内滚动布局? 所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的<html>滚动而言的,例如,下图所示滚动条,是从头部下方开始:...

45050

扫码关注云+社区

领取腾讯云代金券