Vue3+OpenLayers的简单使用详解

npm install ol

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,
        }),
      });

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>