arcgis api 4.x for js 地圖加載多個氣泡窗口展示（附源碼下載）

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 4.x for js：esri 官網 api，里面詳細的介紹 arcgis api 4.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 4.x 的好素材。

由於 arcgis api 4.x for js 目前沒有提供的同時展示多個氣泡窗口展示， Popup 默認只可以彈出一個，某些情況下，用戶想加載彈出多個窗口，所以，本篇實現了 arcgis api 4.x for js 自定義多個氣泡窗口展示效果。

最終實現效果圖：

實現思路：采用 leaflet 氣泡窗口樣式 css ，自定義 arcgis api 4.x 氣泡窗口 div 容器，地圖疊加 div 不難，難的是如何隨着地圖動態改變而刷新自定義窗口的位置，這也是本篇的核心內容，通過監聽地圖的變化事件，從而動態刷新氣泡窗口的位置變化。

• leaflet 氣泡窗口樣式

.leaflet-popup {
position: absolute;
text-align: center;
}
.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-popup-content-wrapper {
text-align: center;
max-height: 200px;
overflow-y: auto;
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.leaflet-popup-tip {
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波