Vue2+OpenLayers实现点位拖拽功能（提供Gitee源码）

news2025/4/15 14:45:51

一、案例截图

二、安装OpenLayers库

三、代码实现

3.1、初始化变量

3.2、创建一个点

3.3、将点添加到地图上

3.4、实现点位拖拽

3.5、完整代码

四、Gitee源码

一、案例截图

可以随意拖拽点位到你想要的位置

二、安装OpenLayers库

npm install ol

三、代码实现

3.1、初始化变量

关键代码：

data() {
  return {
    map:null,
    vectorLayer:null,
  }
},

3.2、创建一个点

关键代码：

createPoint(coordinate){
  // 创建feature要素，一个feature就是一个点坐标信息
  let feature = new Feature({
    geometry: new Point(coordinate),
  });
  // 设置要素的图标
  feature.setStyle(
      new Style({
        // 设置图片效果
        image: new Icon({
          src: 'http://lbs.tianditu.gov.cn/images/bus/end.png',
          scale: 1,
        }),
        zIndex: 10
      }),

  );
  return feature;
},

3.3、将点添加到地图上

关键代码：

let feature = this.createPoint([113.082753,28.180449]);
const vectorSource = new VectorSource({
  features: [feature],
});
this.vectorLayer = new VectorLayer({
  source: vectorSource,
});
this.map.addLayer(this.vectorLayer);

3.4、实现点位拖拽

关键代码：

addDraggableInteraction(feature) {
  // 创建可拖拽的交互
  const translate = new Translate({
    features: new Collection([feature]),
  });

  // 添加交互到地图
  this.map.addInteraction(translate);


  // Marker 1 拖拽事件
  translate.on('translatestart', (evt) => {
    console.log("当前经纬度信息："+evt.coordinate)
  });

  translate.on('translating', (evt) => {
    console.log("当前经纬度信息："+evt.coordinate)
  });

},

3.5、完整代码

<template>
  <div id="map-container"></div>
</template>
<script>
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';
import { Vector as VectorLayer } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Circle, Fill, Icon, Stroke, Style} from 'ol/style';
import 'ol/ol.css';
import Select from 'ol/interaction/Select';
import { OSM } from 'ol/source';
import { LineString } from 'ol/geom';
import Translate from 'ol/interaction/Translate';
import { Collection } from 'ol';


export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

export default {
  data() {
    return {
      map:null,
      vectorLayer:null,
    }
  },
  mounted(){
    this.initMap() // 加载矢量底图
  },
  methods:{
    initMap() {
      const KEY = '你申请的KEY'

      this.map = new Map({
        target: 'map-container',
        layers: [
          // 底图
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,
              layer: 'vec', // 矢量底图
              matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影
              style: "default",
              crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
              format: "tiles", //请求的图层格式，这里指定为瓦片格式
              wrapX: true, // 允许地图在 X 方向重复（环绕）
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
              })
            })
          }),
          // 标注
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,
              layer: 'cva', //矢量注记
              matrixSet: 'c',
              style: "default",
              crossOrigin: 'anonymous',
              format: "tiles",
              wrapX: true,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
              })
            })
          })
        ],
        view: new View({
          center: [113.082753,28.180449],
          projection: projection,
          zoom: 12,
          maxZoom: 17,
          minZoom: 1
        }),
        //加载控件到地图容器中
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false
        })
      });
      let feature = this.createPoint([113.082753,28.180449]);
      const vectorSource = new VectorSource({
        features: [feature],
      });
      this.vectorLayer = new VectorLayer({
        source: vectorSource,
      });
      this.map.addLayer(this.vectorLayer);
      this.addDraggableInteraction(feature);
    },
    createPoint(coordinate){
      // 创建feature要素，一个feature就是一个点坐标信息
      let feature = new Feature({
        geometry: new Point(coordinate),
      });
      // 设置要素的图标
      feature.setStyle(
          new Style({
            // 设置图片效果
            image: new Icon({
              src: 'http://lbs.tianditu.gov.cn/images/bus/end.png',
              scale: 1,
            }),
            zIndex: 10
          }),

      );
      return feature;
    },

    addDraggableInteraction(feature) {
      // 创建可拖拽的交互
      const translate = new Translate({
        features: new Collection([feature]),
      });

      // 添加交互到地图
      this.map.addInteraction(translate);


      // Marker 1 拖拽事件
      translate.on('translatestart', (evt) => {
        console.log("当前经纬度信息："+evt.coordinate)
      });

      translate.on('translating', (evt) => {
        console.log("当前经纬度信息："+evt.coordinate)
      });

    },
  }
}
</script>
<style scoped>
#map-container {
  width: 100%;
  height: 100vh;
}
</style>