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;

		  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事件：

		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、样式。挺难看的。希望有人实现后共享下代码，造福全GISer。

lzugis

巴特西

lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow

最新文章

热门文章