2

我正在尝试将地图上的 PanPanel 和 ZoomPanel 控件重新定位到左下角而不是左上角。我看到我可以添加选项，但正如我所尝试的那样，即使调整了窗口大小，我也找不到一种方法让它保持在左下角。

当我告诉他们相对于左下角重新定位时，我也不确定如何告诉他们像往常一样堆叠。

我更改了组成两个面板的图像，所以现在平移和缩放面板之间的空间比我想要的要大，所以我也试图让它们彼此靠近。

除了研究在控件上使用选项之外，我还尝试为围绕两个面板的 div 的 id 创建样式，但 div 中 id 的值是“OpenLayers.Map_2_OpenLayers_Container”，其中包含一个“。” . 据我所知，这不是样式的合法标识。无论如何，它没有工作。最重要的是，我认为我不能相信这个名字总是一样的，随着时间的推移，这个页面上的持续工作会导致很多添加。

有任何想法吗？

4

3 回答 3

1

以防万一这可能对其他人有用。我正在使用 OpenLayers 3，我想将缩放控件移动到地图的右侧。我的地图附加到具有“tm-openlayers-map”类值的元素并移动缩放控件我使用了以下 css/sass

.tm-openlayer-map

   //change the colour of the map buttons
   button {
       background: $title-bar;
   }

   .ol-zoom {
      top: 0.5em;
      right: 0.5em;
      left: auto;
      //move the tooltips to the left of the now right aligned buttons
      .ol-has-tooltip:hover [role=tooltip] {
          left: -5.5em;
          border-radius: 4px 0 0 4px;
       }
      .ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{
          left: -6.2em;
       }
    }
  //make sure the rotate controls included by default with an opacity of 0 don't
  //block clicks intended for the '+' button
  .ol-rotate {
     visibility: hidden;
  }
}
于 2015-01-09T16:01:40.913 回答
0

所以我发现了问题。首先，我没有将顶部设置为自动。由于它在 style.css 文件中设置为 10px，当我在 style.css 文件中将其更改为自动底部工作时。但是后来我的css文件不起作用。我找到了一个用于 Pan 和 Zoom 的 OpenLayers 示例，最终发现我所做的与他们所做的不同之处在于我没有在页面开头显式加载 style.css 文件。因此，似乎 OpenLayers Map 在创建时会导致 style.css 文件在读取我的 css 之后被延迟读取，因此它覆盖了我的覆盖。当我进行早期加载（页面开头）时，它运行良好。

似乎在我创建地图图层时创建的属性控件必须读取当前的 CSS，因为尚未在页面上创建地图，因此我不需要进行早期加载。如果我删除了早期加载，它仍然会从我的 css 文件中进行更改。但是删除早期加载会导致 Pan 和 Zoom 控件不再响应我的更改，所以我认为这意味着 Map 对象在 style.css 文件的后期加载之后读取样式，此时该文件已经被覆盖我的CSS。

去搞清楚...

于 2013-04-05T11:33:56.340 回答
0

尝试：

new OpenLayers.Control.YourControlXXXX({
    moveTo: function (px) {
        if ((px != null) && (this.div != null)) {
            this.div.style.left = yourLeft + "px";
            this.div.style.bottom = (yourBottom+controlHeigth) + "px";
        }
    },
    ... other options
})

嗯！我看到这些控件比我想象的更现代，由 CSS 定位，所以尝试：

.olControlPanPanel {
    bottom: 55px; /* not 0px */
    top: auto;
}

div.olControlPanPanel {...注意：如果您不确定 OL 的 de css 加载位置，请尝试 as：强制 CSS 的优先级。

于 2013-04-03T14:56:43.907 回答