270：vue+openlayers 利用 MultiPolygon 显示多个多边形

在Vue中结合OpenLayers来显示多个多边形，你可以使用OpenLayers的MultiPolygon或GeometryCollection。以下是一个简单的例子，展示如何在Vue组件中使用OpenLayers创建并显示多个多边形。

首先，确保你已经安装了OpenLayers：

npm install ol

然后，在你的Vue组件中，你可以这样设置：

<template>
  <div id="map" class="map"></div>
</template>
 
<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { MultiPolygon, Polygon } from 'ol/geom';
 
export default {
  name: 'VueOpenLayersMultiPolygon',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
 
      // 创建多边形数组
      const polygons = [
        this.createPolygon([[[-10, -10], [10, -10], [10, 10], [-10, 10], [-10, -10]]]),
        this.createPolygon([[[-5, -5], [5, -5], [5, 5], [-5, 5], [-5, -5]]]),
      ];
 
      // 将多边形数组转换为MultiPolygon
      const multiPolygon = new MultiPolygon(polygons);
 
      // 创建矢量图层并添加到地图上
      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [
            new olFeature({
              geometry: multiPolygon,
            }),
          ],
        }),
      });
      this.map.addLayer(vectorLayer);
    },
    createPolygon(coordinates) {
      return new Polygon({
        coordinates: coordinates,
      });
    },
  },
};
</script>
 
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>

在这个例子中，我们首先在mounted钩子中初始化了OpenLayers地图。然后，我们创建了两个多边形，并将它们作为一个数组传递给了MultiPolygon。最后，我们创建了一个矢量图层并将其添加到了地图上。这样，这两个多边形就会在地图上显示出来。