vue中使用openlayers，给定一组归一化坐标数据，怎么在地图画布上使用这组坐标绘制图形

1. 在Vue中安装OpenLayers库

npm install ol

2. 在Vue组件中引入OpenLayers库和样式文件

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 { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';

3. 创建一个地图容器

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

4. 在Vue组件中创建地图对象和图层

<script>
export default {
  name: 'MapComponent',
  mounted() {
    // 创建地图容器
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    // 创建矢量图层
    const vectorLayer = new VectorLayer({
      source: new VectorSource(),
      style: new Style({
        image: new CircleStyle({
          radius: 5,
          fill: new Fill({ color: 'red' }),
          stroke: new Stroke({ color: 'white', width: 1 })
        })
      })
    });

    // 添加矢量图层到地图
    map.addLayer(vectorLayer);

    // 给定一组归一化坐标数据
    const coordinates = [
      [0.5, 0.5],
      [0.6, 0.6],
      [0.7, 0.4],
      [0.3, 0.8],
      [0.9, 0.2]
    ];

    // 将归一化坐标转换为地理坐标
    const features = coordinates.map(coord => {
      return new Feature({
        geometry: new Point(fromExtent([coord[0], coord[1], coord[0], coord[1]]))
      });
    });

    // 添加要素到矢量图层
    vectorLayer.getSource().addFeatures(features);
  }
}
</script>

5. 在地图画布上绘制图形

使用`fromExtent`方法将归一化坐标转换为地理坐标，然后创建一个`Point`要素，并添加到矢量图层中。

在样式中使用`CircleStyle`来定义点的样式，并将其作为`Style`对象的`image`属性传递给矢量图层。

最终效果如下图所示：