Question

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

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

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

除了在控件上使用选项之外，我还尝试为两个面板周围的div的id创建一个样式，但div中id的值是“OpenLayers.Map_2_OpenLayers_Container”，其中包含''。据我所知，这不是造型的合法身份。无论如何，它没有用。最重要的是，我认为我不能相信这个名字永远是相同的，随着时间的推移在这个页面上继续工作会导致大量的添加。

有什么想法吗？

Answer 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;
  }
}

Answer 2

尝试：

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;
}

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

Answer 3

所以我发现了问题。首先，我没有设置自动顶部。因为它在style.css文件中设置为10px，当我在style.css文件中将其更改为自动底部工作时。但后来我的css文件无效。我找到了一个用于Pan和Zoom的OpenLayers示例，并最终发现我正在做的事情与他们正在做的事情之间的区别在于我没有在页面开头明确加载style.css文件。所以看起来OpenLayers Map在创建时会导致在我的css被读取之后读取style.css文件，所以它覆盖了我的覆盖。当我做一个早期加载（页面的开头）时，它工作得很好。

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

去图......

OpenLayers - 重定位缩放和平移控件

3 个答案: