zoukankan      html  css  js  c++  java
  • 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为关闭按钮,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;
    		  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;
    		  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



  • 相关阅读:
    大数加法、乘法实现的简单版本
    hdu 4027 Can you answer these queries?
    zoj 1610 Count the Colors
    2018 徐州赛区网赛 G. Trace
    1495 中国好区间 尺取法
    LA 3938 动态最大连续区间 线段树
    51nod 1275 连续子段的差异
    caioj 1172 poj 2823 单调队列过渡题
    数据结构和算法题
    一个通用分页类
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539904.html
Copyright © 2011-2022 走看看