Arcgis Server for JavaScript API之自定义InfoWindow

最新推荐文章于 2018-10-17 18:46:00 发布

磊磊正正

最新推荐文章于 2018-10-17 18:46:00 发布

阅读量1.3k

点赞数

ARCGIS 同时被 3 个专栏收录

21 篇文章 4 订阅

订阅专栏

ARCGIS Server

20 篇文章 0 订阅

订阅专栏

JScript

16 篇文章 0 订阅

订阅专栏

用过Arcgis Server for JavaScript API肯定知道InfoWIndow，你在用InfoWindow的时候会发现各种问题，例如不能完全显示的问题，遮盖对象的问题等等，所以呢我在实现这个功能的时候动了下脑子，想自己用div+css弄一个，倒腾了半天，弄出来了一个如下所示的：

做的比较丑陋，样式方面还得好好下下功夫，东西是差不多实现了，下面说说思路：

首先，DIV定义，这个样式，我定义了5个div，分别是infowin，title，colse，content，arrow，其中，infowin是整个InfoWindow的大框架，title为标题，close为关闭按钮，content为主要内容，arrow为下面的小尾巴，我们可以将这个小尾巴做的长一点，以免对象被遮盖的情况，代码为：

[html]view plaincopy 
   
print?
 <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就得进行布局，定义样式了，样式为：

[html]view plaincopy 
   
print?
   <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事件：

[javascript]view plaincopy 
   
print?
 <span style="white-space:pre">      </span>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，将其显示，实现的详细代码如下：

[html]view plaincopy 
   
print?
 <!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。

磊磊正正

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow，你在用InfoWindow的时候会发现各种问题，例如不能完全显示的问题，遮盖对象的问题等等，所以呢我在实现这个功能的时候动了下脑子，想自己用div+css弄一个，倒腾了半天，弄出来了一个如下所示的：做的比较丑陋，样式方面还得好好下下功夫，东西是差不多实现了，下面说说思路：首
复制链接

扫一扫