修改arcgis infowindow 放大和縮小的模闆

在使用arcgis自帶的infowindow彈出的詳情的時候會有放大和縮小的infowindow顯示内容不同的需求，現在此做出處理方法1、設定infowindow模闆 (2個table第一個是小的infowindow模闆，内容精簡就好，第二個是放大的模闆内容可以增加)

<div class="baseLayer" >
<table class="info-window-box">
<tr>
<td class="item-label">行  政  區:</td>
<td class="item-value">${SHENG}${XIAN}${XIANG}</td>
</tr>
<tr>
<td class="item-label">林  業  局:</td>
<td class="item-value">${LIN_YE_JU}</td>
</tr>
<tr>
<td class="item-label">林      場:</td>
<td class="item-value">${LIN_CHANG}</td>
</tr>
</table>
<table style="display: none" class="info-window-box ">
<tr>
<td class="item-label">行  政  區:</td>
<td class="item-value">${SHENG}${XIAN}${XIANG}</td>
<td class="item-label">林  業  局:</td>
<td class="item-value">${LIN_YE_JU}</td>
<td class="item-label">林      場:</td>
<td class="item-value">${LIN_CHANG}</td>
</tr>
<tr>
<td class="item-label">林      班:</td>
<td class="item-value">${LIN_BAN}</td>
<td class="item-label">小      班:</td>
<td class="item-value">${XIAO_BAN}</td>
<td class="item-label">地      貌:</td>
<td class="item-value">${DI_MAO}</td>
</tr>
<tr>
<td class="item-label">坡      向:</td>
<td class="item-value">${PO_XIANG}</td>
<td class="item-label">坡      位:</td>
<td class="item-value">${PO_WEI}</td>
<td class="item-label">林地功能分區:</td>
<td class="item-value">${LYFQ}</td>
</tr>
<tr>
<td class="item-label">主體功能區:</td>
<td class="item-value">${QYKZ}</td>
<td class="item-label">科  技  度:</td>
<td class="item-value">${KE_JI_DU}</td>
<td class="item-label">土壤類型:</td>
<td class="item-value">${TU_RANG_LX}</td>
</tr>
<tr>
<td class="item-label">土層厚度:</td>
<td class="item-value">${TU_CENG_HD}</td>
<td class="item-label">面      積:</td>
<td class="item-value">${MIAN_JI}</td>
<td class="item-label">林地權屬:</td>
<td class="item-value">${LD_QS}</td>
</tr>
<tr>
<td class="item-label">地      類:</td>
<td class="item-value">${DI_LEI}</td>
<td class="item-label">林      種:</td>
<td class="item-value">${LIN_ZHONG}</td>
<td class="item-label">起      源:</td>
<td class="item-value">${QI_YUAN}</td>
</tr>
<tr>
<td class="item-label">森林類别:</td>
<td class="item-value">${SEN_LIN_LB}</td>
<td class="item-label">事權等級:</td>
<td class="item-value">${SHI_QUAN_D}</td>
<td class="item-label">國家公益林保護等級:</td>
<td class="item-value">${GJGYL_BHDJ}</td>
</tr>
<tr>
<td class="item-label">工程類别:</td>
<td class="item-value">${G_CHENG_LB}</td>
<td class="item-label">齡      組:</td>
<td class="item-value">${LING_ZU}</td>
<td class="item-label">郁  閉  度:</td>
<td class="item-value">${YU_BI_DU}</td>
</tr>
<tr>
<td class="item-label">優勢樹種:</td>
<td class="item-value">${YOU_SHI_SZ}</td>
<td class="item-label">平均胸徑:</td>
<td class="item-value">${PINGJUN_XJ}</td>
<td class="item-label">每公頃蓄積量:</td>
<td class="item-value"> ${HUO_LMGQXJ}</td>
</tr>
<tr>	
<td class="item-label">每公頃株數:</td>
<td class="item-value">${MEI_GQ_ZS}</td>
<td class="item-label">土地退化類型:</td>
<td class="item-value">${TD_TH_LX}</td>
<td class="item-label">災害類型:</td>
<td class="item-value">${DISPE}</td>
</tr>
</table>
</div>

2、給圖層添加infowindow

瓦片圖層添加infowindows

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.效果

将不定期更新資源，歡迎持續關注

想獲得更多的學習知識請關注微信公衆号：西北碼農或掃下方二維碼

修改arcgis infowindow 放大和縮小的模闆

3.重寫infowindow的放大縮小事件

4.infowindow的css

5.效果

繼續閱讀

一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑

前端學習之路---移動web開發（二）

css雪碧圖（css sprite）

移動端touch事件和滑鼠事件

Angular——子產品懶加載

在2016年如何學習JavaScript？

實用css技巧——清除浮動方法總結

css3中的結構僞類選擇器

圖檔下載下傳圖檔放大

mockjs 的正确使用姿勢mockjs fetch的使用思路

css display={block,inline,inline-block}的認識

前端開發日記之window.onload

webstorm中配置git

Vue圖檔切換過渡設計

測試工程師面試解析～

2018年不想被web前端開發淘汰，你需要掌握哪些技術？