openlayers3: центр и масштабирование до пределов KML - PullRequest
Новая
       26

openlayers3: центр и масштабирование до пределов KML

0 голосов
/ 28 мая 2018

Базовый скрипт для отображения файла kml на плиточном фоне с помощью openlayer;Я только что перешел с версии 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 и получить картуцентрировано и расширено до пределов кмл?

Примечание: я использовал kmllayer.events.register("loadend", kmllayer, function(evt){map.zoomToExtent(kmllayer.getDataExtent())}); с OpenLayers2 ...

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

ОК, мне нужно объявить источник 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);
        });

Спасибо за вашу помощь!

0 голосов
/ 29 мая 2018

Следующее должно делать то, что вы хотите 

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

Решение, в основном адаптированное из Как получить экстент векторного источника GeoJSON? (изменилось имя переменной и удален второй аргумент вmap.getView().fit (требуется в старое время, теперь необязательно, большую часть времени не требуется, как здесь)

...