L.Control.MapShot = L.Control.extend({ options: { position: 'topright', }, /** * 地图实例 * @type {Object} * @private */ _map: null, /** * 底图容器 * @type {L} */ _shotGroup: new L.FeatureGroup(), /** * 是否正在底图 * @type {Boolean} * @default false * @private */ _isScreenShot: false, _msType: 1, initialize: function(options) { L.setOptions(this, options); return this; }, onAdd: function(map) { this._map = map; this._map.addLayer(this._shotGroup); this.rectangle = new L.Draw.Rectangle(this._map); this._createControl(); return this._container; }, _createControl: function() { var _this = this; var className = 'leaflet-control-mapshot', classNames = className + ' leaflet-bar leaflet-control'; this._container = L.DomUtil.create('div', classNames); var link = L.DomUtil.create('a', 'leaflet-mapshot-link', this._container); var span = L.DomUtil.create('span', '', link); span.innerHTML = '底图'; L.DomEvent.on(this._container, 'mousedown', L.DomEvent.stopPropagation) .on(this._container, 'dblclick', L.DomEvent.stopPropagation) .on(this._container, 'click', L.DomEvent.stopPropagation) .on(this._container, 'mousewheel', L.DomEvent.stopPropagation) .on(this._container, 'contextmenu', L.DomEvent.stopPropagation); //绑定事件 L.DomEvent .on(link, 'click', L.DomEvent.stopPropagation) .on(link, 'click', L.DomEvent.preventDefault) .on(link, 'click', function() { if (_this._isScreenShot) { _this.remove(); } else { _this.init(); } }); _this.mapShotInfoContainer = L.DomUtil.create('div', 'leaflet-mapshot-info', this._container); var title = L.DomUtil.create('h3', '', _this.mapShotInfoContainer); title.innerHTML = '底图信息'; var labelLT = L.DomUtil.create('label', '', _this.mapShotInfoContainer); labelLT.innerHTML = '左上角坐标:'; _this.pLT = L.DomUtil.create('p', '', _this.mapShotInfoContainer); var labelRB = L.DomUtil.create('label', '', _this.mapShotInfoContainer); labelRB.innerHTML = '右下角坐标:'; _this.pRB = L.DomUtil.create('p', '', _this.mapShotInfoContainer); _this.labelTypeL = L.DomUtil.create('label', '', _this.mapShotInfoContainer); _this.labelTypeL.innerHTML = '图种名称:'; _this.labelTypeP = L.DomUtil.create('p', '', _this.mapShotInfoContainer); _this.labelThematic = L.DomUtil.create('label', '', _this.mapShotInfoContainer); _this.labelThematic.innerHTML = '专题图名称:'; _this.selectThematicType = L.DomUtil.create('select', '', _this.mapShotInfoContainer); $(_this.labelThematic).hide(); $(_this.selectThematicType).hide(); $(_this.selectThematicType).css("width", "100px"); var labelZoom = L.DomUtil.create('label', '', _this.mapShotInfoContainer); labelZoom.innerHTML = '缩放级别:'; _this.selectZoom = L.DomUtil.create('select', '', _this.mapShotInfoContainer); var labelPicType = L.DomUtil.create('label', '', _this.mapShotInfoContainer); labelPicType.innerHTML = '图片格式:'; _this.selectPicType = L.DomUtil.create('select', '', _this.mapShotInfoContainer); var picType = ['png','jpg']; for (var ii = 0; ii < picType.length; ii++) { var item = new Option(picType[ii], picType[ii]); _this.selectPicType.options.add(item); } var subDiv = L.DomUtil.create('div', 'subdiv', _this.mapShotInfoContainer); _this.subBtn = L.DomUtil.create('button', 'maptile', subDiv); _this.subBtn.innerHTML = '底图下载'; // _this.ZSsubBtn = L.DomUtil.create('button', 'wview', subDiv); // _this.ZSsubBtn.innerHTML = '整饰下载'; _this.downDiv = L.DomUtil.create('div', 'download-panel', _this.mapShotInfoContainer); _this.downLink = L.DomUtil.create('p', 'download-link', _this.downDiv); L.DomEvent.on(_this.subBtn, 'click', function() { _this._postScreenShotInfo(); }); // L.DomEvent.on(_this.ZSsubBtn, 'click', function() { // _this._postScreenMapFishInfo(); // }); ONEMAP.C.publisher.subscribe(createC, 'tools:active'); function createC(options){ if(options.modName == 'msAll'){ _this._msType = 2; } else{ _this._msType = 1; } } }, /** * 初始化 * @type {Function} */ init: function() { var _this = this; _this.rectangle.enable(); _this._shotGroup.clearLayers(); _this._isScreenShot = true; L.DomUtil.addClass(_this._container, 'active'); _this._map.on('draw:created', _this.drawCreated, this); _this._map.on('singleLayer:addToMap', _this.updatePanel, this); _this._map.on('singleLayer:removeFromMap', _this.getBaseMap, this); _this._map.on('mainLayer:addLayer', _this.getBaseMap, this); _this._map.on('overLayer:addLayer', _this.getBaseMap, this); }, layoutResize: function() { var curWindowHeigth = $(window).height(); /*if(curWindowHeigth < 955){ $("#mapHolder .leaflet-mapshot-info").css({ "left":-130 }) }else{ $("#mapHolder .leaflet-mapshot-info").css({ "left":-179 }) }*/ }, /** * 更新底图信息面板 * @param {[type]} layerObj [description] * @return {[type]} [description] */ updatePanel: function(layerObj) { var _this = this; _this.curLayerObj = map23DData.layers[layerObj.guid]['layer']; _this.labelTypeP.innerHTML = _this.curLayerObj.name; _this.curLayerObj.translate = _this.curLayerObj.name; _this.curLayerObj.guid = _this.curLayerObj.guid; for (var i = 0; _this.selectZoom.options.length != 0; i++) { _this.selectZoom.options.remove(0); } for (var ii = _this.curLayerObj.minZoom; ii <= _this.curLayerObj.maxZoom; ii++) { var item = new Option(ii, ii); _this.selectZoom.options.add(item); } }, /** * 获取当前底图信息并更新信息面板 * @return {[type]} [description] */ getBaseMap: function() { var _this = this; var baseMapObj = { translate: null, guid: null } baseMapObj.guid = ONEMAP.M.mapHolder.modValue.mainLayers; if (baseMapObj.guid === 'gm') { baseMapObj.translate = '交通图'; baseMapObj.guid = 'gm'; } if (baseMapObj.guid === 'gr') { baseMapObj.translate = '影像图'; baseMapObj.guid = 'gr'; } if (baseMapObj.guid === 'gr') { baseMapObj.translate = '影像叠加地名图'; baseMapObj.guid = 'gr'; } if (baseMapObj.guid === 'gt') { baseMapObj.translate = '地势图'; baseMapObj.guid = 'gt'; } _this.curLayerObj = baseMapObj; _this.labelTypeP.innerHTML = baseMapObj.translate; $(".zhengshiDl .name").attr("placeholder",baseMapObj.translate) for (var i = 0; _this.selectZoom.options.length != 0; i++) { _this.selectZoom.options.remove(0); } for (var ii = map23DConfig.map2DMinZoom; ii <= map23DConfig.map2DMaxZoom; ii++) { var item = new Option(ii, ii); _this.selectZoom.options.add(item); $(_this.selectZoom).val(_this._map.getZoom()); } }, updateShotBounds: function() { var _this = this; var bounds = _this.shotLayer.getBounds(); _this.pLT.innerHTML = '[' + bounds.getNorthWest().lat.toFixed(5) + ',' + bounds.getNorthWest().lng.toFixed(5) + ']'; _this.pRB.innerHTML = '[' + bounds.getSouthEast().lat.toFixed(5) + ',' + bounds.getSouthEast().lng.toFixed(5) + ']'; $(_this.selectZoom).val(_this._map.getZoom()); }, /** * 标注创建 添加到容器 * @param e */ drawCreated: function(e) { var _this = this; var type = e.layerType; _this.shotLayer = e.layer; _this._shotGroup.addLayer(_this.shotLayer); _this.shotLayer.editing.enable(); var thematic = { curThematic: { min_zoom: 1, max_zoom: 19, translate: "未知", guid: 'null' } }; var baseMapObj = { translate: null, guid: null } baseMapObj.guid = ONEMAP.M.mapHolder.modValue.mainLayers; thematic.curThematic.min_zoom = map2DViewer.map.getMinZoom(); //baseMapObj.options.minZoom thematic.curThematic.max_zoom = map2DViewer.map.getMaxZoom(); if (baseMapObj.guid === 'gm') { baseMapObj.translate = '交通图'; baseMapObj.guid = 'gm'; } if (baseMapObj.guid === 'gr') { baseMapObj.translate = '影像图'; baseMapObj.guid = 'gr'; } if (baseMapObj.guid === 'gr') { baseMapObj.translate = '影像叠加地名图'; baseMapObj.guid = 'gr'; } if (baseMapObj.guid === 'gt') { baseMapObj.translate = '地势图'; baseMapObj.guid = 'gt'; } thematic.curThematic.translate = baseMapObj.translate; thematic.curThematic.guid = baseMapObj.guid; var thematicData = ONEMAP.D.ThematicInMapData; // if (ONEMAP.D.overLayerCount > 0) { // $(_this.labelThematic).show(); // $(_this.selectThematicType).show(); // $(_this.labelTypeP).hide(); // $(_this.labelTypeL).hide(); // } else { // $(_this.labelThematic).hide(); // $(_this.selectThematicType).hide(); // $(_this.labelTypeP).show(); // $(_this.labelTypeL).show(); // } $(_this.selectThematicType).empty(); $.each(thematicData, function(i, t) { var item = new Option(t.name, t.name); _this.selectThematicType.options.add(item); }) _this.curLayerObj = thematic.curThematic; _this._map.on('editDraging', _this.updateShotBounds, this); var bounds = _this.shotLayer.getBounds(); _this.pLT.innerHTML = '[' + bounds.getNorthWest().lat.toFixed(5) + ',' + bounds.getNorthWest().lng.toFixed(5) + ']'; _this.pRB.innerHTML = '[' + bounds.getSouthEast().lat.toFixed(5) + ',' + bounds.getSouthEast().lng.toFixed(5) + ']'; for (var i = 0; _this.selectZoom.options.length != 0; i++) { _this.selectZoom.options.remove(0); } for (var ii = thematic.curThematic.min_zoom; ii <= thematic.curThematic.max_zoom; ii++) { var item = new Option(ii, ii); _this.selectZoom.options.add(item); $(_this.selectZoom).val(_this._map.getZoom()); } //_this.selectZoom.value = _this._map.getZoom(); if(_this._msType == 1){ _this.labelTypeP.innerHTML = thematic.curThematic.translate; _this.mapShotInfoContainer.style.display = 'block'; } else{ $(".zhengshiDl").addClass('active'); $(".zhengshiDl .name").attr("placeholder",_this.curLayerObj.translate) $(".zhengshiDl .bili").val(_this._map.getZoom()); $(".zhengshiDl .subdiv button").off("click").on("click",function(){ _this._postScreenMapFishInfo(); }) } _this.layoutResize(); }, /** * 整视图下载 */ _postScreenMapFishInfo: function() { var _this = this; var thematicGuid; var bounds = _this.shotLayer.getBounds(); _this.centerlng = (bounds.getNorthWest().lng+bounds.getSouthEast().lng).toFixed(5)/2; _this.centerlat = (bounds.getNorthWest().lat+bounds.getSouthEast().lat).toFixed(5)/2; newdata = new Date(); year = newdata.getFullYear(); month = newdata.getMonth() + 1; day = newdata.getDate().toString(); var hour = newdata.getHours().toString(); var mintes = newdata.getMinutes().toString(); var second = newdata.getSeconds().toString(); if (month < 10) { // month = "0" + month; } if (day < 10) { day = "0" + day; } if (hour < 10) { hour = "0" + hour; } if (mintes < 10) { mintes = "0" + mintes; } if (second < 10) { second = "0" + second; } var time = year + "年" + month + "月" + day + "日 " + hour + ":" + mintes + ":" + second ; if(_this.curLayerObj.guid == "gr"){ _this.curLayerObj.guid = 'gh'; } var svname = $(".zhengshiDl .name").val(); if(svname == ""){ svname = _this.curLayerObj.translate; } var svzoom = $('.zhengshiDl .bili option:selected').val(); var svimgtype = $(".zhengshiDl .geshi option:selected").val(); // $(_this.selectZoom).val() var postDataMapfish = { center: [_this.centerlng, _this.centerlat], name: svname, zoom: svzoom,//_this.selectZoom.value guid: _this.curLayerObj.guid, ext: svimgtype,//'png' mapshotName: svname,//_this.curLayerObj.translate mapshotcopyright: time } ONEMAP.C.publisher.publish(postDataMapfish, 'mapFish:postData'); }, /** * 提交数据到服务器 * @type {Function} * @private */ _postScreenShotInfo: function() { var _this = this; var thematicGuid; var bounds = _this.shotLayer.getBounds(); // if (ONEMAP.D.overLayerCount > 0) { // var thematicName = $(_this.selectThematicType).val(); // $.each(ONEMAP.D.ThematicInMapData, function(i, t) { // if (t.name === thematicName) { // thematicGuid = t.guid; // } // }) // _this.curLayerObj.guid = thematicGuid; // _this.curLayerObj.translate = thematicName; // } var nwLat = bounds.getNorthWest().lat.toFixed(5); var nwLng = bounds.getNorthWest().lng.toFixed(5); var seLat = bounds.getSouthEast().lat.toFixed(5); var seLng = bounds.getSouthEast().lng.toFixed(5); if(nwLng<-180){ ONEMAP.C.publisher.publish({ type: 'warning', message: '矩形左上经度不能小于-180度,请修改' }, 'noteBar::add'); return false; }else if(seLng >180){ ONEMAP.C.publisher.publish({ type: 'warning', message: '矩形右下经度大于180度,请修改' }, 'noteBar::add'); return false; } if(_this.curLayerObj.guid == "gr"){ _this.curLayerObj.guid = 'gh'; } var postData = { bbox: '[' + bounds.getNorthWest().lng.toFixed(5) + ',' + bounds.getNorthWest().lat.toFixed(5) + ',' + bounds.getSouthEast().lng.toFixed(5) + ',' + bounds.getSouthEast().lat.toFixed(5) + ']', name: _this.curLayerObj.translate, zoom: _this.selectZoom.value, guid: _this.curLayerObj.guid, ext: _this.selectPicType.value } //_this._map.fire('mapShot:postData',postData); ONEMAP.C.publisher.publish(postData, 'mapShot:postData'); //_this.remove(); }, /** * 移除事件 * @type {Function} */ remove: function() { var _this = this; if (_this._map != null) { _this._isScreenShot = false; L.DomUtil.removeClass(_this._container, 'active'); _this.rectangle.disable(); _this._shotGroup.clearLayers(); _this.mapShotInfoContainer.style.display = 'none'; _this._map.off('draw:created', _this.drawCreated, this); //_this._map.off('draw:edit', _this.drawEdit,this); _this._map.off('singleLayer:addToMap', _this.updatePanel, this); _this._map.off('singleLayer:removeFromMap', _this.getBaseMap, this); _this._map.off('editDraging', _this.updateShotBounds, this); _this._map.off('mainLayer:addLayer', _this.getBaseMap, this); _this._map.off('overLayer:addLayer', _this.getBaseMap, this); } } }); L.control.mapShot = function(options) { return new L.Control.MapShot(options); };