view.fit

<template>
  <el-dialog :visible.sync="dialogVisible" :title="'预览'" width="1000px" append-to-body>
    <div ref="map-div" class="map-container"></div>
  </el-dialog>
</template>

<script>

import {Map, View} from "ol";
import {fromLonLat} from "ol/proj";
import TileLayer from "ol/layer/Tile";
import {XYZ} from "ol/source";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";


export default {
  name: 'DialogFeatureInMap',
  data() {
    return {
      dialogVisible: false,
      projectionStr: 'EPSG:3857',
      map: null,
      center: [107.00830979189323, 40.329536827760066]
    }
  },
  mounted() {

  },
  methods: {
    start() {
      let line = [
        [116, 40],
        [117, 41],
        [118, 40],
        [116, 40]
      ];
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (!this.map) this.initMap();
        this.map.getView().setZoom(3)
        this.map.getView().setCenter(fromLonLat(this.center))

        // console.log(this.map.getLayers().getArray().length)
        // this.map.getLayers().getArray().forEach(layer => {
        //   this.map.removeLayer(layer)
        // })

        let map = this.map
        while (map.getLayers().getLength() > 0) {
          map.removeLayer(map.getLayers().item(0));
        }

        let xyzLayer = this.createXYZLayer('https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}');
        this.map.addLayer(xyzLayer)

        let a_GeoJSON = {
          "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "geometry": {
                "type": "Polygon",
                "coordinates": [line]
              },
              "properties": {
                "a": 11
              }
            }
          ],
          "crs": {
            "type": "name",
            "properties": {
              "name": "urn:ogc:def:crs:EPSG::4326"
            }
          }
        }


        let vecLayer = this.createVectorLayerFromGeoJSON(a_GeoJSON)
        this.map.addLayer(vecLayer)

        setTimeout(() => {
          this.viewFit(this.getFeaturesFromGeoJSON(a_GeoJSON))
        }, 500)
      })

    },
    initMap() {
      this.map = new Map({
        target: this.$refs['map-div'],
        layers: [],
        view: new View({
          projection: this.projectionStr,
          center: fromLonLat(this.center),
          zoom: 3,
        }),
        controls: [],
      });
    },

    createXYZLayer(url, projection = 'EPSG:3857') {
      return new TileLayer({
        source: new XYZ({
          url,
          projection,
        }),
      });
    },


    getFeaturesFromGeoJSON(GeoJSONData) {
      let dataProjectionCode = GeoJSONData?.crs?.properties?.name.replace('urn:ogc:def:crs:EPSG::', '') || '4326';
      return new GeoJSON().readFeatures(GeoJSONData, {
        dataProjection: 'EPSG:' + dataProjectionCode, // GeoJSONData实际的投影方式
        featureProjection: 'EPSG:3857', // 要和 地图视图View的投影方式 保持一致
      })
    },
    createVectorLayerFromGeoJSON(GeoJSONData) {
      let features = this.getFeaturesFromGeoJSON(GeoJSONData)

      let layer = new VectorLayer({
        visible: true,
        source: new VectorSource({
          format: new GeoJSON(),
          features: features,
        }),
        style: new Style({
          stroke: new Stroke({
            width: 2,
            color: 'red'
          }),
          fill: new Fill({
            color: 'rgba(255,0,0,0.3)'
          })
        })
      });
      layer.set('code', 'abc')
      return layer
    },

    viewFit(features) {
      let map = this.map

      // 假设你已经有了一个地图实例（map）和一个或多个要素（features）
      let view = map.getView(); // 获取地图的视图实例

      // 如果是单个要素
      if (features.length === 1) {
        let extent = features[0].getGeometry().getExtent()
        view.fit(extent, {padding: [50, 50, 50, 50], duration: 2000});
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 500px;
  border: 1px solid #9a9595;
}
</style>