Vue3使用ol加载wms地图

Vue3中使用`ol`库加载WMS（Web Map Service）地图通常涉及以下几个步骤：

1. **安装依赖**：首先，你需要在项目中安装`ol`和可能需要的地图数据处理库，例如`@vue/apollo-composable`或`axios`来获取WMS服务的数据。你可以通过npm或yarn来安装：

   npm install ol @vue/apollo-composable axios (或其他你喜欢的库)

2. **引入并配置**：在你的Vue组件中，导入所需的模块，并设置`ol`地图的基本配置，包括初始化地图容器、投影等：

   import { Map, View } from 'ol';
   import { ApolloClient } from '@vue/apollo-composable';

   const client = new ApolloClient();
   // 配置视口和中心点
   const center = [lon, lat];
   const zoom = 8;

   setup() {
     const mapElement = document.getElementById('map');
     const map = new Map({
       target: mapElement,
       view: new View({
         center,
         zoom,
         projection: 'EPSG:4326', // 或者你的WMS服务使用的投影
       }),
     });

     // 使用axios或Apollo获取WMS数据
     client.query({ /* 你的查询配置 */ }).then((response) => {
       // 根据响应数据创建矢量图层或图像图层
       // 示例：
       createLayerFromWMS(response.data);
     });
   }

3. **创建图层**：根据WMS服务返回的数据动态创建`ol.layer.Vector`或`ol.layer.Image`，并将它添加到地图上：

   function createLayerFromWMS(data) {
     const url = `your_wms_layer_url?service=WMS&version=1.3.0&request=GetMap&layers=${data.layers}&styles=`; // 替换为实际的WMS URL
     const layer = new ol.layer.Tile({
       source: new ol.source.WMS({
         url,
         params: {
          LAYERS: data.layers,
           FORMAT: 'image/png',
         },
       }),
     });

     map.addLayer(layer);
   }

4. **事件监听和交互**：你可以添加各种交互事件监听器，如点击、鼠标移动等，以响应用户的操作。