javascript - Angular - openLayers : zoom on geometry

Question

我正在为我的项目使用 Openlayers 指令。我能够在 map 上绘制几何图形，现在我想放大它。

我看到了这个example这正是我想做的(最适合的部分)。但我不知道如何使用 Angular Directive 来做到这一点。

这是我的组件 Controller 中的层:

            _this.perimeterLayer = {
            source: {
                type: 'GeoJSON',
                geojson: {
                    object: {
                        type: 'Feature',
                        geometry: {
                            type: 'Polygon',
                            coordinates: transformedCoords
                        }
                    }
                }

            },
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 3
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.1)'
                })
            })
        };

以及我认为如何使用它:

  <ol-layer ol-layer-properties="$ctrl.perimeterLayer"></ol-layer>

你能帮我吗？

非常感谢!

Answer 1

好吧，我找到了一个解决方案，我把它放在这里，也许它能有所帮助!

目的是从 map 中获取图层，然后解析数据，直到获得几何图形。

这是我所做的功能(有点原始，但它正在工作)

        function perimeterFocus() {
        var geometry;
        olData.getMap().then(function (map) {
            map.getLayers().forEach(function (lyr) {
                if (lyr.get('name') == 'perimterLayer') {
                    var features = lyr.getSource().getFeatures();
                    geometry = features[0].getGeometry();
                    map.getView().fit(geometry, map.getSize());
                }
            });
        });
    }