首先在页面创建两个div,
<div class="beforeafter contentsShow" id="contentsShow" οnmοusemοve="RollImage(event)">
<div id="after"></div> <div id="before"> </div></div>
用来装地图,卷帘效果就是用来做对比分析的。
我还写了两个按钮,控制卷帘的开启和关闭,
<input type="button" value="开启卷帘" οnclick="stratJ()"/> <input type="button" value="取消卷帘" οnclick="cancleJuan()"/>
css样式:
#after{ position: absolute; top: 0px; left: 0px; width: 940px; height: 529px; border:1px solid black; } #before{ border:1px solid orange; position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; width: 433px; height: 529px; max-width: 940px; } .beforeafter{ width: 940px; height: 529px; } #after{ position: absolute; top: 0px; left: 0px; width: 940px; height: 529px; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; width: 433px; height: 529px; max-width: 940px; }
js代码如下:
<script type="text/javascript"> function RollImage(evt){ var x=evt.pageX; console.log(x); $("#before").css("width",x+"px"); } $(function(){ require([ "esri/map", "esri/geometry/Extent", "esri/layers/ArcGISDynamicMapServiceLayer" ], function(Map, Extent, ArcGISDynamicMapServiceLayer) { var lods = [ {"levels" : 0, "resolution" : 529.167725, "scale" : 2000000}, {"levels" : 1, "resolution" : 264.583863 ,"scale" : 1000000} ]; var lodss = []; var lossplit = []; $.each(lods,function(i,v){ //分辨率的计算 var resolution = v.scale*0.0254000508/96/111194.872221777; lodss.push({level:Number(v.levels),resolution:resolution,scale:Number(v.scale)}); lossplit.push('|'); }); var _map1 = new Map("after", { lods: lods, slider : false, fitExtent:true, autoResize:true, extent:new Extent({ xmin: Number("3.9294519939677745E7"), ymin: Number("2646061.9079604843"), xmax: Number("3.952662967902225E7"), ymax: Number("2757467.1434311285"), spatialReference:"2363" }), logo : false // lods : lodss(对瓦片地图有效) }); var _map2 = new Map("before", { slider : false, fitExtent:true, autoResize:true, extent:new Extent({ xmin: Number("3.9294519939677745E7"), ymin: Number("2646061.9079604843"), xmax: Number("3.952662967902225E7"), ymax: Number("2757467.1434311285"), spatialReference:"2363" }), logo : false // lods : lodss(对瓦片地图有效) }); var baseMapLayer = new ArcGISDynamicMapServiceLayer("http://192.168.1.253:6080/arcgis/rest/services/MZGIS/MZXZQ/MapServer"); _map1.addLayer(baseMapLayer); var dblayer=new ArcGISDynamicMapServiceLayer("http://192.168.1.253:6080/arcgis/rest/services/MZGIS/YDBP/MapServer"); _map2.addLayer(dblayer); }); }); //取消卷帘 function cancleJuan(){ var a = document.getElementById('contentsShow'); a.onmouseout = function(){ $("#contentsShow").removeAttr("onmousemove"); }; } //触发卷帘 function stratJ(){ var a = document.getElementById('contentsShow'); a.onmousemove = function(event){ RollImage(event); }; //a.setAttribute('onmousemove',"alert('ss')"); } </script>
这样即可。
//另外还有arcgis自带的卷帘效果,接下来就看看怎么运用:
引入这个"esri/dijit/LayerSwipe",,
接着me.swipeWidget = new LayerSwipe({ type: "vertical", //类型值有 : "scope" or "horizontal" or "vertical" map: me.allMap['_mapDiv']['map'], layers: [swipeLayer] }, "swipeDiv"); me.swipeWidget.startup();
取消就调用方法:disable();