在vue3+typescript中，使用openlayers显示不同地物类别的图例

在 Vue3+TypeScript 中使用 OpenLayers 显示不同地物类别的图例，可以通过以下步骤实现：

1. 安装 OpenLayers 和 @types/ol 库：

npm install ol @types/ol

2. 在 Vue3 组件中引入 OpenLayers 库：

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';

3. 在 Vue3 组件中定义地图容器和图例容器：

<template>
  <div>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <div id="legend"></div>
  </div>
</template>

4. 在 Vue3 组件中使用 OpenLayers 创建地图和图层：

<script lang="ts">
import { defineComponent } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';

export default defineComponent({
  name: 'MapComponent',
  mounted() {
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        new VectorLayer({
          source: new VectorSource({
            features: [
              // 添加地物要素
            ],
          }),
          style: (feature) => {
            // 根据不同的地物类别设置样式
          },
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    // 创建图例
    const legend = document.getElementById('legend');
    legend.innerHTML = `
      <div>
        <span style="background-color: #ff0000;"></span>
        <span>红色代表...</span>
      </div>
      <div>
        <span style="background-color: #00ff00;"></span>
        <span>绿色代表...</span>
      </div>
      <div>
        <span style="background-color: #0000ff;"></span>
        <span>蓝色代表...</span>
      </div>
    `;
  },
});
</script>

在上面的代码中，我们可以根据不同的地物类别来设置样式，例如：红色代表建筑物，绿色代表森林，蓝色代表水域等等。我们还创建了一个图例容器，并添加了不同地物类别的说明和颜色示例。

以上就是使用 OpenLayers 在 Vue3+TypeScript 中显示不同地物类别的图例的方法。