/** * [ATLAS.M.atlasView] * @return {[object]} */ define(['html!templates/atlas/compareView', 'css!styles/atlas/compareView' ],function(tplLayout){ /** * 模块数据 用于数据存储和外部调用 * @type {Object} */ var modValue = { options:{ viewType:'1', //对比模式 1卷帘对比 2视图并列对比 3上下叠置对比 actionMap:'left' //鼠标操作的地图 }, thematicData:{} } var mapLeft,mapRight; var leftMarker,rightMarker; var leftMapTile,rightMapTile; /** * 模块界面样式 例如:宽,高 * @type {Object} */ var styles = {} /** * 模块状态,用于存储模块的状态 例如:收起,关闭 * @type {Object} */ var status = {} /** * 初始化并订阅事件 * @return {[type]} [description] */ function init(data){ //获取参数 _.merge(modValue.options,data); setLayout(); getThematicData(modValue.options.leftGuid,modValue.options.rightGuid); bindEvent(); subscribe(); } /** * 设置界面 */ function setLayout(){ $('#mapHolder').append(tplLayout); $('#mapHolder').addClass('viewType-'+modValue.options.viewType); $('#viewTools').show(); layoutResize(); $(window).resize(function() { layoutResize(); }); } /** * 界面事件绑定 * @return {[type]} [description] */ function bindEvent(){ //界面元素事件 $('#gapButton').bind('mousedown',function(e){ e.preventDefault(); document.onmousemove = function(e){ e = e || window.event; if(e && e.preventDefault){ e.preventDefault(); }else { window.event.returnValue = false; } $('body').attr('unselectable','on') .attr('onselectstart','return false;') .css('-moz-user-select','none') .css('-webkit-user-select','none'); updateGapButtonPosition(e); }; document.onmouseup = function(e){ document.onmousemove = null; document.onmouseup = null; $('body').removeAttr('unselectable') .removeAttr('onselectstart') .css('-moz-user-select','') .css('-webkit-user-select',''); }; }); $('#viewTools .button').bind('click',function(e){ if($(this).hasClass('select')){return}; $('#viewTools .select').removeClass('select'); $(this).addClass('select'); modValue.options.viewType = $(this).attr('tid'); $('#mapHolder').removeClass().addClass('viewType-'+modValue.options.viewType); switch (modValue.actionMap){ case 'left': modValue.options.center = mapLeft.getCenter(); modValue.options.zoom = mapLeft.getZoom(); break; case 'right': modValue.options.center = mapRight.getCenter(); modValue.options.zoom = mapRight.getZoom(); break; } layoutResize(); if($(this).attr('tid') === '3'){ leftMarker.setOpacity(0); rightMarker.setOpacity(0); leftMapTile.setOpacity(0.5); rightMapTile.setOpacity(0.5); $('#opacityPanelThumb').css({left:'125px'}); mapLeft.off('mousemove',updateIconPointPosition); mapRight.off('mousemove',updateIconPointPosition); }else if($(this).attr('tid') === '2') { leftMarker.setOpacity(1); rightMarker.setOpacity(1); leftMapTile.setOpacity(1); rightMapTile.setOpacity(1); mapLeft.on('mousemove',updateIconPointPosition); mapRight.on('mousemove',updateIconPointPosition); }else if($(this).attr('tid') === '1'){ leftMarker.setOpacity(0); rightMarker.setOpacity(0); leftMapTile.setOpacity(1); rightMapTile.setOpacity(1); mapLeft.off('mousemove',updateIconPointPosition); mapRight.off('mousemove',updateIconPointPosition); } setTimeout(function(){ mapLeft.invalidateSize().setView(mapLeft.getCenter(), mapLeft.getZoom()); mapRight.invalidateSize().setView(mapRight.getCenter(), mapRight.getZoom()); },100); }); $('#opacityPanelThumb').bind('mousedown',function(e){ e.preventDefault(); document.onmousemove = function(e){ e = e || window.event; if(e && e.preventDefault){ e.preventDefault(); }else { window.event.returnValue = false; } updateMapOpacity(e); }; document.onmouseup = function(e){ document.onmousemove = null; document.onmouseup = null; }; }); } /** * AJAX获取相应GUID的专题图数据 * @type {Function} * @param guid {Number} guid * @private */ function getThematicData(leftThematicGuid,rightThematicGuid){ if(leftThematicGuid && rightThematicGuid){ //ajax去取专题图数据 取完成后地图初始化 ATLAS.V.loading.load(); $.ajax({ type:"get", dataType:'jsonp', url:onemapUrlConfig.thematicDataServerUrl+'/production/metadata?production_id='+leftThematicGuid, success:function(data){ ATLAS.V.loading.loaded(); modValue.thematicData.left = data.metadata; modValue.thematicData.left.desc_id_list = JSON.parse(modValue.thematicData.left.desc_id_list); modValue.thematicData.left.legend_id_list = JSON.parse(modValue.thematicData.left.legend_id_list); if(modValue.thematicData.hasOwnProperty('right')){ initMap(); } }, error:function(data){ ATLAS.V.loading.loaded(); } }); ATLAS.V.loading.load(); $.ajax({ type:"get", dataType:'jsonp', url:onemapUrlConfig.thematicDataServerUrl+'/production/metadata?production_id='+rightThematicGuid, success:function(data){ ATLAS.V.loading.loaded(); modValue.thematicData.right = data.metadata; modValue.thematicData.right.desc_id_list = JSON.parse(modValue.thematicData.right.desc_id_list); modValue.thematicData.right.legend_id_list = JSON.parse(modValue.thematicData.right.legend_id_list); if(modValue.thematicData.hasOwnProperty('left')){ initMap(); } }, error:function(data){ ATLAS.V.loading.loaded(); } }); } // console.log(onemapUrlConfig.thematicDataServerUrl); } /**更新鼠标光标位置 * @type {Function} * @param e */ function updateIconPointPosition(e){ switch (modValue.options.actionMap){ case 'left': leftMarker.setOpacity(0); rightMarker.setOpacity(1); rightMarker.setLatLng(e.latlng); break; case 'right': rightMarker.setOpacity(0); leftMarker.setOpacity(1); leftMarker.setLatLng(e.latlng); break; } } /**更新位置 由鼠标按下拖动事件驱动 * @type {Function} * @param e */ function updateGapButtonPosition(e){ var viewWidth = $('#mapHolder').width(); var mapWrap = document.getElementById('mapHolder'); var mapWrapWidth = mapWrap.offsetWidth; var x = L.DomEvent.getMousePosition(e,mapWrap).x; if(x < 0){ x = 0; }else if(x > mapWrapWidth){ x = mapWrapWidth; } $('#gapButton').css({left:x}); $('#leftMapWrap').css({width:x}); $('#rightMapWrap').css({width:viewWidth-x}); } /**更新地图透明度 * @type {Function} * @param e */ function updateMapOpacity(e){ var opacityPanelWidth = 250; var opacityPanel = document.getElementById('opacityPanel'); var x = L.DomEvent.getMousePosition(e,opacityPanel).x; if(x < 0){ x = 0; }else if(x > opacityPanelWidth){ x = opacityPanelWidth; } $('#opacityPanelThumb').css({left:x}); leftMapTile.setOpacity(1-x/250); rightMapTile.setOpacity(x/250); } /** * 窗口大小重置 * @type {Function} */ function layoutResize(){ var wrapWidth = $('#mapHolder').width(); var wrapHeight = $('#mapHolder').height(); $('#gapButton').css({height:wrapHeight}); switch (modValue.options.viewType){ case '1'://卷帘对比 $('#leftMapWrap, #rightMapWrap').css({width:wrapWidth/2,height:wrapHeight}); $('#leftMap, #rightMap').css({width:wrapWidth,height:wrapHeight}); $('#gapButton').css({left:wrapWidth/2}); break; case '2'://并列对比 $('#leftMapWrap, #rightMapWrap').css({width:wrapWidth/2-15,height:wrapHeight-20}); $('#leftMap, #rightMap').css({width:wrapWidth/2-19,height:wrapHeight-24}); break; case '3'://上下叠置对比 $('#leftMapWrap, #rightMapWrap').css({width:wrapWidth,height:wrapHeight}); $('#leftMap, #rightMap').css({width:wrapWidth,height:wrapHeight}); break; } if(mapLeft){ setTimeout(function(){ mapLeft.invalidateSize().setView(mapLeft.getCenter(), mapLeft.getZoom(),true); mapRight.invalidateSize().setView(mapRight.getCenter(), mapRight.getZoom(),true); },100); } } /** * 地图初始化 * @type {Function} * @private */ function initMap(){ leftMapTile = L.tileLayer(onemapUrlConfig.thematicTileUrl+'/'+modValue.thematicData.left.production_id+'?l={z}&x={x}&y={y}',{noWrap:true, subdomains: map23DConfig.tileSubdomains||'', errorTileUrl:''}); var right_url = onemapUrlConfig.thematicTileUrl+'/'+modValue.thematicData.right.production_id+'?l={z}&x={x}&y={y}'; var search = window.location.search; var sub = search.substr(1).split("&"); for(var i = 0; i < sub.length; i++){ var s_left = sub[i].split("=")[0]; if(s_left == "layerNum"){ var s_right = sub[i].split("=")[1]; if(s_right == 1){ right_url = map23DConfig.tileServerUrl+'/'+sub[i+1].split("=")[1]+'?l={z}&x={x}&y={y}'; } else if(s_right == 2){ // console.log("yeah"); right_url = onemapUrlConfig.thematicTileUrl+'/'+modValue.thematicData.right.production_id+'?l={z}&x={x}&y={y}'; } } } rightMapTile = L.tileLayer(right_url,{noWrap:true, subdomains: map23DConfig.tileSubdomains||'', errorTileUrl:''}); var _l_boundsLatlng = JSON.parse(modValue.thematicData.left.bounds); var _l_bounds = new L.LatLngBounds(new L.LatLng(_l_boundsLatlng[1],_l_boundsLatlng[0]),new L.LatLng(_l_boundsLatlng[3],_l_boundsLatlng[2])); mapLeft = new L.Map( 'leftMap', { layers: leftMapTile, center: _l_bounds.getCenter(), zoom: parseInt((modValue.thematicData.left['max_zoom_level']+modValue.thematicData.left['min_zoom_level'])/2), maxZoom: parseInt(modValue.thematicData.left['max_zoom_level'])parseInt(modValue.thematicData.right['min_zoom_level'])?parseInt(modValue.thematicData.left['min_zoom_level']):parseInt(modValue.thematicData.right['min_zoom_level']), worldCopyJump: false, animate:false, duration:0, easeLinearity:0, zoomAnimation:false, fadeAnimation:false } ); leftMarker = L.marker([39.90743, 116.39134],{ icon: L.icon({ iconUrl:'images/atlas/icon-point.png', iconSize:[15,15], iconAnchor:[7,7] }), opacity:0 }).addTo(mapLeft); //设置标题 $('#leftThematicTitle').empty().append(modValue.thematicData.left.production_name); var _r_boundsLatlng = JSON.parse(modValue.thematicData.right.bounds); var _r_bounds = new L.LatLngBounds(new L.LatLng(_r_boundsLatlng[1],_r_boundsLatlng[0]),new L.LatLng(_r_boundsLatlng[3],_r_boundsLatlng[2])); mapRight = new L.Map( 'rightMap', { layers: rightMapTile, center: _l_bounds.getCenter(), zoom: parseInt((modValue.thematicData.left['max_zoom_level']+modValue.thematicData.left['min_zoom_level'])/2), maxZoom: parseInt(modValue.thematicData.left['max_zoom_level'])parseInt(modValue.thematicData.right['min_zoom_level'])?parseInt(modValue.thematicData.left['min_zoom_level']):parseInt(modValue.thematicData.right['min_zoom_level']), worldCopyJump: false, animate:false, duration:0, easeLinearity:0, zoomAnimation:false, fadeAnimation:false } ); rightMarker = L.marker([39.90743, 116.39134],{ icon: L.icon({ iconUrl:'images/atlas/icon-point.png', iconSize:[15,15], iconAnchor:[7,7] }), opacity:0 }).addTo(mapRight); //设置标题 $('#rightThematicTitle').empty().append(modValue.thematicData.right.production_name); $('#leftMapWrap').bind('mouseenter',function(){ modValue.options.actionMap = 'left'; mapLeft.on('drag dblclick zoomend',sync,this) mapLeft.on('mapCenterChange', function(options){ sync(); }); }); $('#rightMapWrap').bind('mouseenter',function(){ modValue.options.actionMap = 'right'; mapRight.on('drag dblclick zoomend',sync,this) mapRight.on('mapCenterChange', function(options){ sync(); }); }); setAtlasDetail(modValue.thematicData.left); mapLeft.on('click',function(){ setAtlasDetail(modValue.thematicData.left); }); mapRight.on('click',function(){ setAtlasDetail(modValue.thematicData.right); }) } /** * 地图同步 * @type {Function} * @private */ function sync(){ switch (modValue.options.actionMap){ case 'left': setView(mapLeft.getCenter(),mapLeft.getZoom()); break; case 'right': setView(mapRight.getCenter(),mapRight.getZoom()); break; } } /** * 设置中心点和缩放比例,同步用 * @type {Function} * @param center {Object} 中心点 * @param zoom {Number} 缩放比例 * @private */ function setView(center,zoom){ switch (modValue.options.actionMap){ case 'left': mapRight.setView(center,zoom,{animate:false,pan:{animate:false},zoom:{animate:false}}).invalidateSize(); break; case 'right': mapLeft.setView(center,zoom,{animate:false,pan:{animate:false},zoom:{animate:false}}).invalidateSize(); break; } } /** * 设置右侧详情 * @param {[type]} obj [description] */ function setAtlasDetail(obj){ $('#atlasInfoDetail .content').empty(); $('

'+obj.map_name+'

').appendTo($('#atlasInfoDetail .content')); $('

作者: '+obj.author+'

').appendTo($('#atlasInfoDetail .content')); $('

出版社: '+obj.publisher+'

').appendTo($('#atlasInfoDetail .content')); $('

出版时间: '+obj.publication_date+'

').appendTo($('#atlasInfoDetail .content')); $('

所属图集: '+obj.original_atlas+'

').appendTo($('#atlasInfoDetail .content')); $('

地图页码: '+obj.original_page+'

').appendTo($('#atlasInfoDetail .content')); $('

扫描分辨率: '+obj.scan_dpi+'DPI

').appendTo($('#atlasInfoDetail .content')); $('

比例尺分母: '+obj.scale_denominator+'

').appendTo($('#atlasInfoDetail .content')); if(obj.map_theme_id != 100){ $('

主题分类: '+['','自然','政区','交通','旅游','基础设施','人口经济','社会生活','生态环境','其他','新闻'][obj.map_theme_id]+'

').appendTo($('#atlasInfoDetail .content')); }else { $('

主题分类: 其他

').appendTo($('#atlasInfoDetail .content')); } if($('#atlasInfoDetail .content').children().length === 0){ $('#atlasInfoDetail').hide(); }else { $('#atlasInfoDetail').show(); } //添加到全部详情 $('#atlasInfoDetailAll .content').empty(); $('

作者: '+obj.author+'

').appendTo($('#atlasInfoDetailAll .content')); $('

出版社: '+obj.publisher+'

').appendTo($('#atlasInfoDetailAll .content')); $('

出版时间: '+obj.publication_date+'

').appendTo($('#atlasInfoDetailAll .content')); $('

所属图集: '+obj.original_atlas+'

').appendTo($('#atlasInfoDetailAll .content')); $('

地图名称: '+obj.map_name+'

').appendTo($('#atlasInfoDetailAll .content')); $('

地图页码: '+obj.original_page+'

').appendTo($('#atlasInfoDetailAll .content')); $('

扫描分辨率: '+obj.scan_dpi+' DPI

').appendTo($('#atlasInfoDetailAll .content')); $('

查看权限: '+['','公开','内部','秘密','机密','绝密'][obj.read_level]+'

').appendTo($('#atlasInfoDetailAll .content')); if(obj.map_theme_id != 100){ $('

主题分类: '+['','自然','政区','交通','旅游','基础设施','人口经济','社会生活','生态环境','其他','新闻'][obj.map_theme_id]+'

').appendTo($('#atlasInfoDetailAll .content')); }else { $('

主题分类: 其他

').appendTo($('#atlasInfoDetailAll .content')); } $('

查看次数: '+obj.view_total+'

').appendTo($('#atlasInfoDetailAll .content')); $('

比例尺分母: '+obj.scale_denominator+'

').appendTo($('#atlasInfoDetailAll .content')); $('

地图图片的高度: '+obj.map_image_height+' 像数

').appendTo($('#atlasInfoDetailAll .content')); $('

地图图片的宽度: '+obj.map_image_width+' 像数

').appendTo($('#atlasInfoDetailAll .content')); $('

最大显示级别: '+obj.max_zoom_level+'

').appendTo($('#atlasInfoDetailAll .content')); $('

最小显示级别: '+obj.min_zoom_level+'

').appendTo($('#atlasInfoDetailAll .content')); $('

产品状态: '+['初始状态','正在上传/处理文件','正常','禁用','','待删','发布'][obj.production_state]+'

').appendTo($('#atlasInfoDetailAll .content')); $('

产品类型: '+['单幅专题图','单幅无坐标图片','基础地图','图对','系列图','图集'][obj.production_type]+'

').appendTo($('#atlasInfoDetailAll .content')); $('

推荐度: '+obj.recommended+'

').appendTo($('#atlasInfoDetailAll .content')); $('

是否允许删除: '+(obj.allow_del?'是':'否')+'

').appendTo($('#atlasInfoDetailAll .content')); $('

图像存储的格式: '+obj.image_format+'

').appendTo($('#atlasInfoDetailAll .content')); $('

生产时输入图像存储的品质: '+obj.image_quality+'%

').appendTo($('#atlasInfoDetailAll .content')); $('

区域名称编码: '+obj.region_name_id+'

').appendTo($('#atlasInfoDetailAll .content')); $('

区域尺度: '+['其它','世界','大洲大洋','国家','省','市','县','城市'][obj.region_scale_id]+'

').appendTo($('#atlasInfoDetailAll .content')); $('

资料年代: '+obj.data_date+'

').appendTo($('#atlasInfoDetailAll .content')); $('

印刷时间: '+obj.printing_date+'

').appendTo($('#atlasInfoDetailAll .content')); $('

印刷长度: '+obj.printing_length+' 厘米

').appendTo($('#atlasInfoDetailAll .content')); $('

印刷宽度: '+obj.printing_width+' 厘米

').appendTo($('#atlasInfoDetailAll .content')); $('

坐标系: '+obj.coordinate_system+'

').appendTo($('#atlasInfoDetailAll .content')); $('

投影参数:
'+obj.projcs+'

').appendTo($('#atlasInfoDetailAll .content')); //$('

投影信息是否准确: '+(obj.coordinate_system_accurately?'是':'否')+'

').appendTo($('#atlasInfoDetailAll .content')); //$('

比例尺是否准确: '+(obj.scale_accurately?'是':'否')+'

').appendTo($('#atlasInfoDetailAll .content')); $('

是否透明层(覆盖层): '+(obj.is_overlay?'是':'否')+'

').appendTo($('#atlasInfoDetailAll .content')); $('

地图数据类型: '+['','栅格','矢量','DEM'][obj.data_type]+'

').appendTo($('#atlasInfoDetailAll .content')); $('

数据版本: '+obj.data_version+'

').appendTo($('#atlasInfoDetailAll .content')); $('

设备显示DPI: '+obj.device_dpi+' DPI

').appendTo($('#atlasInfoDetailAll .content')); $('

设备ID: '+obj.device_id+'

').appendTo($('#atlasInfoDetailAll .content')); $('

设备名称: '+obj.device_name+'

').appendTo($('#atlasInfoDetailAll .content')); $('

设备显示分辨率(高度): '+obj.device_resolution_height+' 像数

').appendTo($('#atlasInfoDetailAll .content')); $('

设备显示分辨率(宽度): '+obj.device_resolution_width+' 像数

').appendTo($('#atlasInfoDetailAll .content')); $('

设备显示屏尺寸: '+obj.device_screen_size+' 英寸

').appendTo($('#atlasInfoDetailAll .content')); //$('

数据id: '+obj.data_id+'

').appendTo($('#atlasInfoDetailAll .content')); $('

唯一标识码: '+obj.production_id+'

').appendTo($('#atlasInfoDetailAll .content')); $('

文件分包: '+obj.base_list+'

').appendTo($('#atlasInfoDetailAll .content')); $('

存储地址: '+obj.storage_path+'

').appendTo($('#atlasInfoDetailAll .content')); $('

存储类型: '+obj.storage_type+'

').appendTo($('#atlasInfoDetailAll .content')); $('

瓦片经纬度范围: '+obj.bounds+'

').appendTo($('#atlasInfoDetailAll .content')); //添加说明 $('#atlasInfoIntro .content').empty(); if(obj.desc_id_list.length > 0){ for(var i =0 , l = obj.desc_id_list.length; i'); img.appendTo($('#atlasInfoIntro .content')); } $('#atlasInfoIntro').show(); }else { $('#atlasInfoIntro').hide(); } //添加图例 $('#atlasInfoLegend .content').empty(); if(obj.legend_id_list.length > 0){ for(var i =0 , l = obj.legend_id_list.length; i'); img.appendTo($('#atlasInfoLegend .content')); } $('#atlasInfoLegend').show(); }else { $('#atlasInfoLegend').hide(); } $(".info-list").mCustomScrollbar('update'); } /** * 注册订阅 * @type {Function} * 推送:ATLAS.C.publisher.publish(options,'atlasView::type'); * 订阅:ATLAS.C.publisher.subscribe(layoutResize,'sideBarLayoutChange'); */ function subscribe(){ ATLAS.C.publisher.subscribe(layoutResize,'atlasView::layoutResize'); } /** * 取消订阅 * @type {Function} * 取消订阅:ATLAS.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange'); */ function unSubscribe(){} /** * 模块移除 * @return {[type]} [description] */ function remove(){ //取消订阅 //unSubscribe(); } return ATLAS.M.atlasView = { init:init, layoutResize:layoutResize } });