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为关闭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;
    		  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



  • 相关阅读:
    C#利用反射动态调用类及方法
    系统程序监控软件
    SQL server 2008 安装和远程访问的问题
    sql server 创建临时表
    IIS 时间问题
    windows 2008 安装 sql server 2008
    sql server xml nodes 的使用
    Window 7sp1 安装vs2010 sp1 打开xaml文件崩溃
    CSS资源网址
    Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/6885519.html
Copyright © 2011-2022 走看看