Arcgis Javascript那些事儿（九）--自定义infowindow

来源：互联网发布：流量测试软件编辑：程序博客网时间：2024/06/05 10:10

从开始使用js API，就一直使用infowindow，最近需要自定义的时候才发现里面问题和方法还挺多的，没有android端这么清晰，最近看了些博文和官网，自己总结了方法如下：

一、继承infowindowbase

这个方法是官网公布的方法，大家可以去官网下载网址如下：连接。

主要原理是通过自己写一个类继承infowindowbase，并设定css样式，然后通过require引入使用，填充到map的infowindow属性。

下图是文件结构：

下图是使用自定义infowindow方法：

最后为layer设定template或者不设定都可以。

二、使用popup定义弹出窗口

同样有官网地址：地址

使用popup实际上是比上面的方法比较低级别，因为popup是继承了infowindowbase，所以原则上来讲并没有上述方法灵活

但是使用起来API实现了好多接口，添加直方图，修改颜色等常用效果比较容易实现。使用方法跟上述方法类似，不再详细讲了。

需要注意的是，需要注意的是，需要注意的是：

我们平时提的infowindow指的就是弹出窗口，但是API中一般把两者分开，分别叫infowindow和popup，但但是他们实际上都是继承了infowindowbase，而且使用方法一样，都填充到map中的infowindow属性，这样map中的infowindow就改变了，然后你可以选择在layer图层中是否设置template（popuptemplate或者infotemplate）

三、html自定义窗口

这个基本原理就是：首先在map中添加一个隐藏div，然后每次点击的时候填充该div并show出来撒地方，最后在拖拽缩放的事件中添加相应的方法改变div位置。原理比较简单，感觉实际上API内部应该也是这么做的。

下面上代码，参考的是lzgis的例子，小改了一下，大家可以修改下图片和服务，试一下

效果如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="lib/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">    <link rel="stylesheet" type="text/css" href="3.17/dijit/themes/tundra/tundra.css"/>    <link rel="stylesheet" type="text/css" href="3.17/esri/css/esri.css"/>    <style>        html, body, #mapDiv {            padding: 0;            margin: 0;            height: 800px;            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: #1097ff;            padding: 10px;            font-weight: bold;            font-size: 12px;        }        #content {            padding-left: 10px;            padding-top: 10px;            background-color: #FFFFFF;            height: 200px;        }        #arrow {            background-image: url(arrow2.png);            height: 30px;        }    </style></head><body><div class="container-fluid">    <div class="row">        <!--right-->        <div class="panel panel-primary">            <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>    </div></div><script src="lib/jquery/jquery-3.1.0.min.js"></script><script src="lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script><script src="lib/bootstrap-3.3.5-dist/js/bootstrap-treeview.min.js"></script><script src="3.17/init.js"></script><!--<script src="lib/echart/echarts-all.js"></script>--><script>    var dmap,infowin,colse,title,content;    var width=400,height=230,offset=50;    var closeInfoWin = function (evt){        infowin=document.getElementById("infowin");        infowin.style.display="none";    };    require([        "esri/geometry/Extent",        "esri/map", //地图        "esri/layers/ArcGISTiledMapServiceLayer",        "esri/layers/FeatureLayer",//特征层        "esri/symbols/PictureMarkerSymbol",//图片点符号        "esri/renderers/SimpleRenderer", //简单渲染        "esri/graphic", //图片        "esri/lang",        "dojo/domReady!"    ], function (Extent,Map, ArcGISTiledMapServiceLayer, FeatureLayer, PictureMarkerSymbol, SimpleRenderer, esriLang) {        var bounds = new Extent({            "xmin": 457075,            "ymin": 4314838,            "xmax": 457384,            "ymax": 4315085,            "spatialReference": {"wkid": 3857}        });        var beforePoint;        var beforeMapPoint;        var map = new Map("mapDiv", {extent: bounds, logo: false});        var shpServiceURL = "http://192.168.70.133:6080/arcgis/rest/services/jgs_img/MapServer";        var shpTitlelayer = new ArcGISTiledMapServiceLayer(shpServiceURL);        map.addLayer(shpTitlelayer);//--------------------------------------------------------------------------------------------------------      var featurelayercity = new FeatureLayer("http://192.168.70.133:6080/arcgis/rest/services/jgs_vec3/MapServer/0", {            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 showinfowindow(x,y){            infowin.style.left=(x-width/2)+"px";            infowin.style.top=(y-height-offset)+"px";            infowin.style.position="absolute";            infowin.style.width=width+"px";            infowin.style.height=height+"px";            infowin.style.display="block";        };        function leftClick(evt){            infowin.style.display="none";            var strtitle="城市名称"            var strcontent = "名称：1111111<br><br>年代：1991<br><br>省份：balabala<br><br>历史沿革：不详";            title.innerHTML = strtitle;            content.innerHTML = strcontent;            var screenpoint = map.toScreen(evt.mapPoint);            beforeMapPoint = evt.mapPoint;            beforePoint=screenpoint;            showinfowindow(screenpoint.x,screenpoint.y);        }//鼠标单击        featurelayercity.on("click", leftClick);        map.on("pan",function(pan){            var movePoint=pan.delta;            showinfowindow((beforePoint.x+movePoint.x),(beforePoint.y+movePoint.y))        });        map.on("pan-end",function(panend){            var movedelta=panend.delta;            beforePoint.x=beforePoint.x+movedelta.x;            beforePoint.y=beforePoint.y+movedelta.y;        });        map.on("zoom",function(){            infowin.style.display="none";        });        map.on("zoom-end",function(){            var zoomPoint = map.toScreen(beforeMapPoint);            showinfowindow(zoomPoint.x,zoomPoint.y);            beforePoint=zoomPoint;        });    });</script></body></html>

希望有好的方法大神们再共享下==

0 0