vue openlayers 图层控制

在Vue中使用OpenLayers可以使用Vue-Openlayers组件库来简化开发。要实现图层控制，可以使用Vue的组件化思想来实现。

首先，你需要在Vue项目中安装Vue-Openlayers组件库。可以使用npm或yarn进行安装：

npm install --save vue-openlayers

或者

yarn add vue-openlayers

然后在Vue组件中引入Vue-Openlayers组件：

<template>
  <div>
    <vue-map :center="center" :zoom="zoom">
      <vue-layer-tile :source="osm" />
      <vue-layer-tile :source="wms" v-if="showWMS" />
    </vue-map>
    <button @click="toggleWMS">Toggle WMS layer</button>
  </div>
</template>

<script>
import { VueMap, VueLayerTile } from 'vue-openlayers';

export default {
  components: {
    VueMap,
    VueLayerTile,
  },
  data() {
    return {
      center: [0, 0],
      zoom: 2,
      osm: {
        type: 'OSM',
      },
      wms: {
        type: 'ImageWMS',
        url: 'http://localhost:8080/geoserver/wms',
        params: {
          LAYERS: 'topp:states',
        },
      },
      showWMS: false,
    };
  },
  methods: {
    toggleWMS() {
      this.showWMS = !this.showWMS;
    },
  },
};
</script>

在上面的代码中，我们在Vue组件中定义了一个地图和两个图层：一个是OpenStreetMap瓦片图层，另一个是GeoServer WMS图层。当我们点击“Toggle WMS layer”按钮时，WMS图层会显示或隐藏。

你可以根据自己的需求来定义更多的图层，并在Vue组件中实现图层控制。