Arcgis Server for JavaScript API之自定义InfoWindow

最新推荐文章于 2021-02-05 15:45:04 发布

致力于做一个快乐的胖墩先生

最新推荐文章于 2021-02-05 15:45:04 发布

阅读量779

点赞数

分类专栏：笔记整理 ArcGIS

笔记整理同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

ArcGIS

5 篇文章 1 订阅

订阅专栏

说说思路：

首先，DIV定义，这个样式，我定义了5个div，分别是infowin，title，colse，content，arrow，其中，infowin是整个InfoWindow的大框架，title为标题，close为关闭按钮，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事件：

<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，将其显示，实现的详细代码如下：

<!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、样式，挺难看

致力于做一个快乐的胖墩先生

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录