将 VueLeaflet 视图置于多层的所有 geoJson 几何图形的中心

Question

我的地图上有一个 geoJson 图层的可变列表（我将其命名为 sectors）。我需要将视图居中以适合所有几何图形。

我正在使用 Vue2Leaflet (v2.5.2) 和 Leaflet (v1.6.0)。

每个geoJson对象是这样的：

{ 
    "type": "FeatureCollection", 
    "features": 
    [ 
        { 
            "type": "Feature", 
            "properties": 
            {
                "id": "4200051", 
                "name": "Abdon Batista", 
                "description": "Abdon Batista"
            }, 

            "geometry": 
            { 
                "type": "Polygon", 
                "coordinates": [[[-51.0378352721, -27.5044338231], ...]] 
            }
        }
    ]
}

并且直接存储在geoSectors: [ geoJson1, geoJson2, ... ]。

代码如下：

<template>
    <div class="home">      
        <l-map ref="mapControl" :zoom="zoom" :center="center" :options="mapOptions">
            <l-tile-layer :url="url" :attribution="attribution"/>
            <l-control-zoom position="bottomright"/>

            <!-- Sectors-->
            <l-geo-json v-for="sector in geoSectors" :key="sector.id" :geojson="sector" :options="options"/>
        </l-map>
    </div>
</template>

<script>
    import { latLng, latLngBounds } from "leaflet";

    export default {
        data() {
            return {
                zoom: 6,
                center: latLng(-25.005973, -50.537109),
                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                mapOptions: {
                    zoomSnap: 0.1,
                    zoomControl: false
                },

                geoSectors: []
            }
        },

        mounted(){
            let list = [];
            //Gets the list from a file.
            this.geoSectors = list;

            var bounds = this.geoSectors; //HERE: Get bounds of the list.
            this.$refs.mapControl.mapObject.fitBounds(bounds);
        },

        computed: {
            options() {
                return {
                    onEachFeature: this.onEachFeatureFunction
                };
            },
            onEachFeatureFunction() {
                return (feature, layer) => {
                    layer.on('click', function (e) {
                        //Shows sector details.
                    });

                    //Tooltips.
                    layer.bindTooltip("<div><p>Sector: "feature.properties.name +"</p></div>", { 
                        permanent: false, 
                        sticky: true 
                    });
                };
            }
        },
    }
</script>

如何使地图视图适合显示所有 geoJson 层，并具有可能的最大缩放级别？

Answer 1

我设法解决了。这是代码：

//You need to import featureGroup from leaflet:
import { latLng, featureGroup } from "leaflet";

//After building your geoJson layers, just call this:
this.$nextTick().then(() => {
    var group = new featureGroup();

    this.$refs.mapControl.mapObject.eachLayer(function(layer) {
        if (layer.feature != undefined)
            group.addLayer(layer);
    });

    this.$refs.mapControl.mapObject.fitBounds(group.getBounds(), { padding: [20, 20] });
});

将 VueLeaflet 视图置于多层的所有 geoJson 几何图形的中心

Center VueLeaflet view to all geoJson geometries from multiple layers

javascript

geojson

leaflet

vue.js

vue2leaflet