define([ 'dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', 'dojo/topic', 'jimu/BaseWidget', ], function (declare, lang, array, html, topic, BaseWidget ) { return declare([BaseWidget], { baseClass: 'jimu-widget-Rolling', name: 'Rolling', flag: false, // 天地图 imageryProviderAdd: [{ "label": "天地图影像", "type": "wmts", "url": "http://t0.tianditu.gov.cn/img_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0", "layer": "img", "style": "default", "format": "tiles", "tileMatrixSetID": "w", "maximumLevel": 17 }, { "label": "天地图影像标注", "type": "wmts", "url": "http://t0.tianditu.gov.cn/cia_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0", "layer": "cia", "style": "default", "format": "tiles", "tileMatrixSetID": "w", "maximumLevel": 17 }], // 天地图电子 imageryProviderDian: [{ "label": "天地图矢量", "type": "wmts", "url": "http://t0.tianditu.gov.cn/vec_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0", "layer": "vec", "style": "default", "format": "tiles", "tileMatrixSetID": "w", "maximumLevel": 17 }, { "label": "天地图矢量标注", "type": "wmts", "url": "http://t4.tianditu.gov.cn/cva_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0", "layer": "cva", "style": "default", "format": "tiles", "tileMatrixSetID": "w", "maximumLevel": 17 }], earthAtNightLeft: 0, earthAtNightRight: '', zjLeft: 0, zjRight: '', tiandituLeft: '', tiandituZJLeft: '', tiandituRight: '', tiandituZJRight: '', startup: function () { topic.subscribe("openRolling", lang.hitch(this, this.openRolling)); topic.subscribe("closeRolling", lang.hitch(this, this.closeRolling)); var that = this; // 点击卷帘关闭面板 $('.rollinng-table-hezi-xx').click(function () { that.map.imageryLayers.remove(that.earthAtNightLeft); that.map.imageryLayers.remove(that.zjLeft); that.map.imageryLayers.remove(that.earthAtNightRight); that.map.imageryLayers.remove(that.zjRight); that.map.imageryLayers.remove(that.tiandituLeft); that.map.imageryLayers.remove(that.tiandituZJLeft); that.map.imageryLayers.remove(that.tiandituRight); that.map.imageryLayers.remove(that.tiandituZJRight); $('.jimu-widget-Rolling').hide(); }); // 加载左边图层 $('#hezi-selectLeft').on('change', function () { // 将滑块的位置与拆分位置同步 var slider = document.getElementById('slider'); that.map.scene.imagerySplitPosition.x = (slider.offsetLeft - slider.parentElement.offsetWidth) / (slider.parentElement.offsetWidth); if ($(this).val() == 2) { loadMapTianLeft(); } else if ($(this).val() == 1) { loadMapLeft(); } }); // 加载右边图层 $('#hezi-selectRight').on('change', function () { // debugger // 将滑块的位置与拆分位置同步 var slider = document.getElementById('slider'); that.map.scene.imagerySplitPosition.x = (slider.offsetLeft - slider.parentElement.offsetWidth) / (slider.parentElement.offsetWidth); if ($(this).val() == 2) { // loadMap(that.earthAtNightRight, that.zjRight); loadMapRight(); } else if ($(this).val() == 1) { loadMapTianRight(); } }); // 加载左边天地图影像图层方法 function loadMapLeft() { that.map.imageryLayers.remove(that.tiandituLeft); that.map.imageryLayers.remove(that.tiandituZJLeft); //imageryLayers获取将在地球上渲染的图像图层的集合 //addImageryProvider使用给定的ImageryProvider创建一个新层，并将其添加到集合中 that.earthAtNightLeft = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderAdd[0] )); that.zjLeft = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderAdd[1] )); that.earthAtNightLeft.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE); that.zjLeft.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE); } // 加载左边天地图电子图层方法 function loadMapTianLeft() { that.map.imageryLayers.remove(that.earthAtNightLeft); that.map.imageryLayers.remove(that.zjLeft); //imageryLayers获取将在地球上渲染的图像图层的集合 //addImageryProvider使用给定的ImageryProvider创建一个新层，并将其添加到集合中 that.tiandituLeft = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderDian[0] )); that.tiandituZJLeft = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderDian[1] )); that.tiandituLeft.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE); that.tiandituZJLeft.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE); } // 加载右边天地图影像图层方法 function loadMapRight() { that.map.imageryLayers.remove(that.tiandituRight); that.map.imageryLayers.remove(that.tiandituZJRight); //imageryLayers获取将在地球上渲染的图像图层的集合 //addImageryProvider使用给定的ImageryProvider创建一个新层，并将其添加到集合中 that.earthAtNightRight = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderAdd[0] )); that.zjRight = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderAdd[1] )); that.earthAtNightRight.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE); that.zjRight.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE); } // 加载右边天地图电子图层方法 function loadMapTianRight() { that.map.imageryLayers.remove(that.earthAtNightRight); that.map.imageryLayers.remove(that.zjRight); //imageryLayers获取将在地球上渲染的图像图层的集合 //addImageryProvider使用给定的ImageryProvider创建一个新层，并将其添加到集合中 that.tiandituRight = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderDian[0] )); that.tiandituZJRight = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderDian[1] )); that.tiandituRight.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE); that.tiandituZJRight.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE); } var handler = new Cesium.ScreenSpaceEventHandler(slider); var moveActive = false; function move(movement) { if (!moveActive) { return; } var relativeOffset = movement.endPosition.x; // 将滑块的位置与拆分位置同步 that.map.scene.imagerySplitPosition.x = (slider.offsetLeft + relativeOffset - slider.parentElement.offsetWidth) / (slider.parentElement.offsetWidth); slider.style.left = 100.0 * +(slider.offsetLeft + relativeOffset) / (slider.parentElement.offsetWidth) + '%'; } handler.setInputAction(function () { moveActive = true; }, Cesium.ScreenSpaceEventType.LEFT_DOWN); //左键按下事件 handler.setInputAction(function () { moveActive = true; }, Cesium.ScreenSpaceEventType.PINCH_START); //触摸表面上双指事件的开始 handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE); //鼠标移动事件 handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE); //触摸表面上双指移动事件 handler.setInputAction(function () { moveActive = false; }, Cesium.ScreenSpaceEventType.LEFT_UP); //鼠标左键抬起事件 handler.setInputAction(function () { moveActive = false; }, Cesium.ScreenSpaceEventType.PINCH_END); //触摸表面上的双指事件的结束 }, openRolling: function (item) { if (item == this.name) { this.flag = true; this.onOpen() } }, closeRolling: function (item) { if (item == this.name) { var that = this; if (this.flag == true) { this.flag = false; that.map.imageryLayers.remove(that.earthAtNightLeft); that.map.imageryLayers.remove(that.zjLeft); that.map.imageryLayers.remove(that.earthAtNightRight); that.map.imageryLayers.remove(that.zjRight); that.map.imageryLayers.remove(that.tiandituLeft); that.map.imageryLayers.remove(that.tiandituZJLeft); that.map.imageryLayers.remove(that.tiandituRight); that.map.imageryLayers.remove(that.tiandituZJRight); $('.jimu-widget-Rolling').hide(); } } }, onOpen: function () { var that = this; if (this.flag != true) return; var slider = document.getElementById('slider'); that.map.scene.imagerySplitPosition.x = (slider.offsetLeft - slider.parentElement.offsetWidth) / (slider.parentElement.offsetWidth); that.map.scene.imagerySplitPosition.x = 0.5; that.earthAtNightLeft = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderAdd[0] )); that.zjLeft = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderAdd[1] )); that.earthAtNightLeft.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE); that.zjLeft.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE); that.tiandituRight = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderDian[0] )); that.tiandituZJRight = that.map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider( that.imageryProviderDian[1] )); that.tiandituRight.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE); that.tiandituZJRight.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE); $('.jimu-widget-Rolling').show(); }, onClose: function () { //面板关闭的时候触发 （when this panel is closed trigger） }, onMinimize: function () { this.resize(); }, onMaximize: function () { this.resize(); }, resize: function () { }, destroy: function () { //销毁的时候触发 //todo //do something before this func this.inherited(arguments); } }); });