在使用arcgis自带的infowindow弹出的详情的时候会有放大和缩小的infowindow显示内容不同的需求，现在此做出处理方法1、设置infowindow模板 (2个table第一个是小的infowindow模板，内容精简就好，第二个是放大的模板内容可以增加)

     
      
       
        
         
行  政  区:
         
${SHENG}${XIAN}${XIANG}
        
        
         
林  业  局:
         
${LIN_YE_JU}
        
        
         
林      场:
         
${LIN_CHANG}
        
       
      
      
       
        
         
行  政  区:
         
${SHENG}${XIAN}${XIANG}
         
林  业  局:
         
${LIN_YE_JU}
         
林      场:
         
${LIN_CHANG}
        
        
         
林      班:
         
${LIN_BAN}
         
小      班:
         
${XIAO_BAN}
         
地      貌:
         
${DI_MAO}
        
        
         
坡      向:
         
${PO_XIANG}
         
坡      位:
         
${PO_WEI}
         
林地功能分区:
         
${LYFQ}
        
        
         
主体功能区:
         
${QYKZ}
         
科  技  度:
         
${KE_JI_DU}
         
土壤类型:
         
${TU_RANG_LX}
        
        
         
土层厚度:
         
${TU_CENG_HD}
         
面      积:
         
${MIAN_JI}
         
林地权属:
         
${LD_QS}
        
        
         
地      类:
         
${DI_LEI}
         
林      种:
         
${LIN_ZHONG}
         
起      源:
         
${QI_YUAN}
        
        
         
森林类别:
         
${SEN_LIN_LB}
         
事权等级:
         
${SHI_QUAN_D}
         
国家公益林保护等级:
         
${GJGYL_BHDJ}
        
        
         
工程类别:
         
${G_CHENG_LB}
         
龄      组:
         
${LING_ZU}
         
郁  闭  度:
         
${YU_BI_DU}
        
        
         
优势树种:
         
${YOU_SHI_SZ}
         
平均胸径:
         
${PINGJUN_XJ}
         
每公顷蓄积量:
         
 ${HUO_LMGQXJ}
        
        
	         
每公顷株数:
         
${MEI_GQ_ZS}
         
土地退化类型:
         
${TD_TH_LX}
         
灾害类型:
         
${DISPE}
        
       
      
     

require(["dojo/text!" + layer.infoTemplate], function(content) {var infoTemplate = new InfoTemplate("详细信息", content);var infoTemplates = { 0:{infoTemplate:infoTemplate}, 1:{infoTemplate:infoTemplate} };0:{infoTemplate:infoTemplate},1:{infoTemplate:infoTemplate}};layer = new ArcGISTiledMapServiceLayer(layer.url,layer);layer.setInfoTemplates(infoTemplates);self.map.addLayer(layer);$("#mainMap .esriPopup .titleButton.maximize").unbind('click').click(function() {if ($(this).parents(".esriPopup").find(".contentPane table:first").next().is(":hidden")) {$(this).parents(".esriPopup").find(".contentPane table:first").css("display","none");$(this).parents(".esriPopup").find(".contentPane table").next().css("display","block");}else{if ($(".sider")) {$(".sider").remove();}$(this).parents(".esriPopup").find(".contentPane table:first").css("display","block");$(this).parents(".esriPopup").find(".contentPane table").next().css("display","none");} });});

GraphicLayer添加图层

require(["dojo/text!" + infoTemplate], function(content) {	var infoTemplate = new InfoTemplate("详细信息", content);	graphicsLayer.setInfoTemplate(infoTemplate);});

3.重写infowindow的放大缩小事件

$("#mainMap .esriPopup .titleButton.maximize").unbind('click').click(function() {            if ($(this).parents(".esriPopup").find(".contentPane table:first").next().is(":hidden")) {                $(this).parents(".esriPopup").find(".contentPane table:first").css("display","none");            	$(this).parents(".esriPopup").find(".contentPane table").next().css("display","block");           }else{

if ($(".sider")) {  $(".sider").remove();}               $(this).parents(".esriPopup").find(".contentPane table:first").css("display","block");               $(this).parents(".esriPopup").find(".contentPane table").next().css("display","none");  }})

如下是给图层设置infowindow的方法，并重写了放大缩小事件

setInfoTemplate: function(graphicsLayer, infoTemplate) {                       var id = graphicsLayer.id;			require(["dojo/text!" + infoTemplate], function(content) {				var infoTemplate = new InfoTemplate("详细信息", content);				graphicsLayer.setInfoTemplate(infoTemplate);			});						 $("#mainMap .esriPopup  .titleButton.maximize").unbind('click').click(function() {				  if ($(this).parents(".esriPopup").find(".contentPane table:first").next().is(":hidden")) {		              $(this).parents(".esriPopup").find(".contentPane table:first").css("display","none");						$(this).parents(".esriPopup").find(".contentPane table").next().css("display","block");				  }else{					  if ($(".sider")) {		                  $(".sider").remove();		              }					  $(this).parents(".esriPopup").find(".contentPane table:first").css("display","block");                      $(this).parents(".esriPopup").find(".contentPane table").next().css("display","none");				  }			  });			 		}

4.infowindow的css

/**infowindow css start**/.esriPopup{font-family: "微软雅黑";font-size: 14px;}.esriPopup.esriPopupVisible .esriPopupWrapper  .sizer{width: 350px !important;max-height: 300px!important}.esriPopup.esriPopupVisible .esriPopupWrapper  .sizer .contentPane{max-height: 300px!important}.esriPopup.esriPopupVisible.esriPopupMaximized .esriPopupWrapper  .sizer{width: 1160px !important;max-height: 800px!important}.esriPopup.esriPopupVisible.esriPopupMaximized .esriPopupWrapper  .sizer .contentPane{max-height: 800px!important}.esriPopup .titlePane{font-weight: 700;font-size: 14px;}/*I信息最大化是,保证最上边*/.esriPopupMaximized {z-index: 1000!important;left: 10px!important;top: 10px!important;}.esriPopup .esriPopupWrapper  .titlePane{background: #ff9c00;color: #fff;}@media print {.no-print {display: none;}}.esriPopup.esriPopupVisible .esriPopupWrapper .info-window-box .item-label {text-align: left;width: 30%;}.esriPopup.esriPopupVisible.esriPopupMaximized .esriPopupWrapper  .info-window-box .item-label {width: 14%;background-color: rgba(255, 156, 0, 0.07);}.esriPopup.esriPopupVisible.esriPopupMaximized .esriPopupWrapper  .info-window-box .item-value{width: 19%;}/**infowindow css end**/.baseLayer{width:99%;margin:12px auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.baseLayer form{width:99%;}.baseLayer table{width:99%;margin-right:18px}.baseLayer table td{border:1px solid #ff9c00;color:#666;padding:4px 8px}.baseLayer table td span{display:inline-block}

5.效果

将不定期更新资源，欢迎持续关注

想获得更多的学习知识请关注微信公众号：西北码农或扫下方二维码