Vue 3 + OpenLayers 的简单使用

在前端开发中，地图展示是一个常见的需求。OpenLayers 是一个功能强大的开源地图库，可以帮助我们在 Web 应用程序中展示地图并且进行交互。本文将介绍如何在 Vue 3 项目中使用 OpenLayers，让您能够轻松实现地图展示功能

步骤一：安装 OpenLayers

首先，我们需要在 Vue 3 项目中安装 OpenLayers：

npm install ol

步骤二：创建地图组件

在 Vue 3 项目中创建一个地图组件，例如Map.vue：
在vue文件中创建两个图层，显示地图和地点

const tdtVectorLayer = new TileLayer({
        title: "天地图矢量图层",
        source: new XYZ({
          url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
        })
      });
      const tdtVectorLabelLayer = new TileLayer({
        title: "天地图矢量注记图层",
        source: new XYZ({
          url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
        })
      });

然后将图层添加到openlayers提供map方法中

map = new Map({
        layers: [tdtVectorLayer,tdtVectorLabelLayer],
        target: mapCon.value,
        view: new View({
          center: beijing,
          minZoom: 4,
          zoom: 8,
        }),
      });

openlayers提供有修改地图样式的方法：

geoMarker.setStyle(styles.geoMarker)
      const iconFeature = new Feature({
        geometry: new Point(beijing),
      });
      iconFeature.setStyle(createLabelStyle(iconFeature));

完整的代码：

<template>
  <div ref="mapCon" id="mapCon"></div>
</template>

<script>
import "ol/ol.css";
import { ref, onMounted } from "vue";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import {LineString,Point } from 'ol/geom';
import { Icon, Style,Stroke,Circle,Fill } from "ol/style";
import yzm from '@/assets/stationicon.png'

export default {
  setup() {
    const mapCon = ref(null);
    const speed = ref(null);
    const animating = ref(false);
    let routeCoords;
    let routeLength;

    const beijing = fromLonLat([116.28, 39.54]);
    let map;
    let clickedPoints = [fromLonLat([116.28, 39.54])];
    const styles = {
        geoMarker: new Style({
          image: new Circle({
            radius: 7,
            snapToPixel: false,
            fill: new Fill({ color: 'black' }),
            stroke: new Stroke({
              color: 'white',
              width: 2
            })
          })
        }),
      };
    const geoMarker = new Feature({
      type: 'geoMarker',
      geometry: new Point(beijing)
    });

    onMounted(() => {
      const tdtVectorLayer = new TileLayer({
        title: "天地图矢量图层",
        source: new XYZ({
          url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
        })
      });
      const tdtVectorLabelLayer = new TileLayer({
        title: "天地图矢量注记图层",
        source: new XYZ({
          url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
        })
      });
      map = new Map({
        layers: [tdtVectorLayer,tdtVectorLabelLayer],
        target: mapCon.value,
        view: new View({
          center: beijing,
          minZoom: 4,
          zoom: 8,
        }),
      });

      const createLabelStyle = function (feature) {
        return new Style({
          image: new Icon({
            anchor: [0.5, 60],
            anchorOrigin: "top-right",
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            offsetOrigin: "top-right",
            opacity: 0.75,
            src: yzm,
          }),
        });
      };
      geoMarker.setStyle(styles.geoMarker)
      const iconFeature = new Feature({
        geometry: new Point(beijing),
      });
      iconFeature.setStyle(createLabelStyle(iconFeature));

      const vectorSource = new VectorSource({
        features: [iconFeature,geoMarker],
      });

      const vectorLayer = new VectorLayer({
        source: vectorSource,
      });
      map.addLayer(vectorLayer);

      map.on("click", function (evt) {
        const point = evt.coordinate;
        addVectorLabel(point);
      });

      function addVectorLabel(coordinate) {
        const newFeature = new Feature({
          geometry: new Point(coordinate),
        });
        newFeature.setStyle(createLabelStyle(newFeature));
        vectorSource.addFeature(newFeature);
        clickedPoints.push(coordinate);
        const route = new LineString([clickedPoints[clickedPoints.length - 2], coordinate]);
        routeCoords = route.getCoordinates();
        routeLength = routeCoords.length;
        if (clickedPoints.length > 1) {
          // 创建折线特征，连接点击的点
          const lineStyle = new Style({
            stroke: new Stroke({
              width: 6,
              color: [237, 212, 0, 0.8]
            }),
          });
          const lineFeature = new Feature({
            geometry: route,
          });
          lineFeature.setStyle(lineStyle);
          vectorSource.addFeature(lineFeature);
        }
      }
    });
    
    


   

    return { mapCon,animating,startAnimation };
  },
};
</script>

<style>
  #menu{
    margin-bottom: 20px;
  }
 
  #mapCon {
    width: 70vw;
    height: 500px;
  }

  
</style>

本段代码主要实现在地图点击时，添加标注并给两点间连线

总结

通过以上步骤，我们成功地在 Vue 3 项目中使用 OpenLayers 来展示地图。您也可以根据自己的需求来配置地图的样式和功能，OpenLayers 提供了丰富的 API 和组件来满足各种地图展示的需求。希望本文对您有所帮助！如有任何问题或疑问，请随时联系我。祝您的地图展示功能开发顺利！🌍🚀👨‍💻