您的位置：首页 > Web前端 > JavaScript

Arcgis Server for JavaScript API之自定义InfoWindow

2016-08-24 15:25 295 查看

用过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
plain copy

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
plain copy

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
plain copy

print ?

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    

    <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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： infowindow arcgis server javascript

相关文章推荐

新的分享

章节导航