webgis的卷帘效果

    xiaoxiao2021-03-25  142

    首先在页面创建两个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();

    转载请注明原文地址: https://ju.6miu.com/read-14384.html

    最新回复(0)