快捷導(dǎo)航

Vue3+OpenLayers的簡單使用詳解

更新時間：2025年12月04日 08:49:35 作者：竭點

本文介紹了如何在Vue3項目中使用OpenLayers實現(xiàn)地圖展示功能,包括安裝OpenLayers、創(chuàng)建地圖組件、添加圖層、修改地圖樣式以及實現(xiàn)地圖點擊等功能,通過完整的代碼示例,展示了如何在地圖上添加標(biāo)注和連線,OpenLayers提供了豐富的API和組件,可以滿足各種地圖展示需求

步驟一：安裝 OpenLayers

首先，我們需要在 Vue 3 項目中安裝 OpenLayers：

npm install ol

步驟二：創(chuàng)建地圖組件

在 Vue 3 項目中創(chuàng)建一個地圖組件，例如Map.vue：

在vue文件中創(chuàng)建兩個圖層，顯示地圖和地點

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) {
          // 創(chuàng)建折線特征，連接點擊的點
          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>

本段代碼主要實現(xiàn)在地圖點擊時，添加標(biāo)注并給兩點間連線