Question

I'm using openlayers 3 to create a map with vector features on top. So far, so good.

I have several vector layers, grouped in a variable called projecten.

**$("").click(function(){
    $("").toggle();
});*

Now I want to somehow loop through the projecten variables, loop through its layers one by one, get the extent of each feature layer, and stop when the last layer has been reached. Then I want to zoom to this combined extent.

This is my basic setup (I'm not good with javascript and loops):

<div id="aside">
    <div id="column">
        <ul>
            <li id="dashboard"><a href="">&nbsp;&nbsp;&nbsp;Dashboard</a></li>
            <li id = "catalogs"><a href="#">&nbsp;&nbsp;&nbsp;Catalog</a>

                <div id="q">
                    <ul>
                        <li><a href="">Catogeries</a></li>
                        <li><a href="">Departure Location</a></li>
                        <li><a href="">Return Location </a></li>
                        <li><a href="">Cities </a></li>
                        <li><a href="">Vendor </a></li>
                        <li><a href="">Discount Coupons</a></li>
                        <li> <a href="">Remaining Seats </a></li>
                    </ul>
                </div>
            </li>
            <li id="user"><a href="#">&nbsp;&nbsp;&nbsp;Users</a>
                <div id="g">
                    <ul>
                        <li><a href="">Customer</a></li>
                        <li><a href="">Admin</a></li>
                        <li><a href="">Agents</a></li>
                    </ul>
                </div>
            </li>
            <li id="catalog"><a href="#">&nbsp;&nbsp;&nbsp;Customers</a>
                <div id="s">
                    <ul>
                        <li><a href="">Customer</a></li>
                        <li><a href="">Orders</a></li>
                        <li><a href="">Reward System</a></li>
                    </ul>
                </div>
            </li>
            <li id="repot"><a href="#">&nbsp;&nbsp;&nbsp;Reports</a>
                <div id="k">
                    <ul>
                        <li><a href="">Monthly</a></li>
                        <li><a href="">Comission Report</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

Any ideas on how I can get this to work?

Answer 1

你应该可以这样做：

var extent = ol.extent.createEmpty();
projecten.getLayers().forEach(function(layer) {
  ol.extent.extend(extent, layer.getSource().getExtent());
});
map.getView().fitExtent(extent, map.getSize());

使用ol.extent.createEmpty()功能初始化您的范围。然后循环遍历图层集合并使用ol.extent.extend()生成包含所有矢量源中所有要素的范围。最后，在这个范围内拟合地图视图。

这里有几点需要注意。 group.getLayers()方法返回ol.Collection个图层。这与常规JavaScript Array类似，只是它是可观察的。您可以使用collection.forEach()方法迭代集合中的每个图层。

另请注意，您应拨打source.getExtent()以获取源中所有当前加载的功能的范围。

最后，上述链接与3.5.0及更高版本相关。您需要调整代码以使用ol.source.Vector个对象，而不是实验性（现在已删除）ol.source.GeoJSON个对象。有关升级到新矢量API的详细信息，请参阅3.5.0 release notes。

openlayers 3 zoom to combined extent

1 个答案: