移动设备上的可滚动 OL3 LayerSwitcher
Scrollable OL3 LayerSwitcher on mobile
我正在将 web 地图从 OL2x 迁移到 OL3。我已经开始使用 OpenGeo 网络应用程序构建器(谢谢,Boundless!)并且有一个功能地图....除了 Chrome 上的图层切换器和我的 Android phone 上的 Firefox 和药片。我的地图有大量图层,因此图层切换器需要可滚动以便用户查看所有图层。滚动行为 是 在 Chrome 和 Windows 台式机上按预期工作。我在这里有一个临时版本的应用程序:http://rainpursuit.org/ol3/
这是我试过的 CSS LS "container"
.layer-switcher {
position: absolute;
top: 3.5em;
right: 0.5em;
text-align: left;
}
而对于 "layer-tree-panel"
.layer-tree-panel {
padding-right: 50px;
border: 1px solid #cccccc;
background-color: white;
height: auto;
max-height: 500px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
opacity: 1;
z-index: 0;
translateZ: (0);
-webkit-translateZ: (0);
}
关于如何在没有鼠标悬停在 LS div 上的触摸设备上使其可滚动的任何建议?
谢谢
我相信 web 地图生成器使用 ol3-layerswitcher, see this issue which resulted in scrolling being fixed on touch devices. The examples in the repo 的早期版本包括一个用于滚动。
我正在将 web 地图从 OL2x 迁移到 OL3。我已经开始使用 OpenGeo 网络应用程序构建器(谢谢,Boundless!)并且有一个功能地图....除了 Chrome 上的图层切换器和我的 Android phone 上的 Firefox 和药片。我的地图有大量图层,因此图层切换器需要可滚动以便用户查看所有图层。滚动行为 是 在 Chrome 和 Windows 台式机上按预期工作。我在这里有一个临时版本的应用程序:http://rainpursuit.org/ol3/
这是我试过的 CSS LS "container"
.layer-switcher {
position: absolute;
top: 3.5em;
right: 0.5em;
text-align: left;
}
而对于 "layer-tree-panel"
.layer-tree-panel {
padding-right: 50px;
border: 1px solid #cccccc;
background-color: white;
height: auto;
max-height: 500px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
opacity: 1;
z-index: 0;
translateZ: (0);
-webkit-translateZ: (0);
}
关于如何在没有鼠标悬停在 LS div 上的触摸设备上使其可滚动的任何建议?
谢谢
我相信 web 地图生成器使用 ol3-layerswitcher, see this issue which resulted in scrolling being fixed on touch devices. The examples in the repo 的早期版本包括一个用于滚动。