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 自定义多个气泡窗口展示效果。

最终实现效果图:
arcgis api 4.x for js 地图加载多个气泡窗口展示(附源码下载)
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之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

上一篇:php – 如何在一个FeatureCollection中将多个geojson合并到一个geojson中


下一篇:记关于iclient for leaflet 几何查询之点要素查询难以查询的问题