openlayers3：中心和缩放范围到 KML 限制答案

【问题标题】：openlayers3 : center and zoom extent to KML limitsopenlayers3：中心和缩放范围到 KML 限制
【发布时间】：2018-05-28 19:50:54
【问题描述】：

使用 openlayer 在平铺背景上显示 kml 文件的基本脚本；我刚刚从版本 2 切换到 4.65，如何缩放到 kml 几何的极限（此处为“矢量”）？

        var wmsSource = new ol.source.TileWMS({
            url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
            params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
            serverType: "geoserver"
          });

        var wmsLayer = new ol.layer.Tile({
            opacity: 0.15,
            visible: true,
            source: wmsSource
          });

        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
            url: "kml_file.kml",
            format: new ol.format.KML()
        })
    });

        var map = new ol.Map({
            target: "map-canvas",
            layers: [wmsLayer, vector],
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({units: "metric"}), 
                new ol.control.FullScreen()
            ]),
            view: new ol.View({
                center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
                zoom: 3
            })
        });

我想替换 zoom: 3 并将地图居中并扩展到 kml 限制？

注意：我在 OpenLayers2 中使用了 kmllayer.events.register("loadend", kmllayer, function(evt){map.zoomToExtent(kmllayer.getDataExtent())});...

【问题讨论】：

标签： zooming kml openlayers-3

【解决方案1】：

以下应该做你想做的事

var vectorSource = vector.getSource();
vectorSource.once('change', function(e){
    if (vectorSource.getState() === 'ready') {
        var extent = vectorSource.getExtent();
        map.getView().fit(extent);
    }
});

解决方案主要改编自How to get the extent of a GeoJSON vector source?（更改了变量名并删除了map.getView().fit中的第二个参数（以前需要，现在可选，大部分时间不需要，比如这里）

【讨论】：

谢谢，但我在控制台中得到一个TypeError: vector.getState is not a function，并且没有居中或缩放效果...我在我之后添加了您的代码。也许我应该使用比 4.65 或 5.0.0 更旧的库，我看到一些 kml 多边形是白色的，而它们应该是彩色的，并且全屏显示很暗，至少背景几乎是黑色的，但这可能是正常的。 ..
已更改：我使用的是图层而不是源。再试一次:)

【解决方案2】：

好的，我需要将kml源声明为单独的new ol.source.Vector变量，这里是vectorSource，并从这个变量中读取.getExtent()，而不是从ol.layer.Vector：

        var wmsSource = new ol.source.TileWMS({
            url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
            params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
            serverType: "geoserver"
          });

        var wmsLayer = new ol.layer.Tile({
            opacity: 0.15,
            visible: true,
            source: wmsSource
          });

        var vectorSource = new ol.source.Vector({
            url: "'.$kml_f.'",
            format: new ol.format.KML()
        });

        var vector = new ol.layer.Vector({
            source: vectorSource
    });

        var map = new ol.Map({
            target: "map-canvas",
            layers: [wmsLayer, vector],
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({units: "metric"}), 
                new ol.control.FullScreen()
            ]),
            view: new ol.View({
                center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
                zoom: 4,
            })
        });

        vector.once("change", function(e){
                var extent = vectorSource.getExtent();
                map.getView().fit(extent);
        });

感谢您的帮助！

【讨论】：