6、openlayers6 拖拽Feature图层

```html
<template>
  <div id="map"></div>
</template>

<script>
import "ol/ol.css";
import {
      
       Map, View, Feature, Collection } from "ol";
import XYZ from "ol/source/XYZ";
import {
      
       Vector as VectorSource } from "ol/source";
import {
      
       Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import {
      
       Style, Icon, Stroke } from "ol/style";
import {
      
       LineString, Point } from "ol/geom";
import {
      
       Translate } from "ol/interaction";
export default {
      
      
  data() {
      
      
    return {
      
      
      map: null,
      roadmap: null,
      vectorLayer: null, //创建图层
      vectorSource: null, //图层数据容器
      localtion: [113.5658865038278, 34.82244974031979],
      coordinateGroup: [
        //二维数组且必须是number类型
        [113.5658865038278, 34.82244974031979],
        [113.56600415226623, 34.822519711441146],
        [113.56610983687841, 34.82258068399297],
        [113.56621651914965, 34.82264465922389],
        [113.56633516621055, 34.822712628887395],
        [113.56644484042172, 34.82277359939242],
        [113.56655152423099, 34.82283657493385],
        [113.56665920551488, 34.82289854903623],
        [113.56676788434261, 34.82296052274851],
        [113.5668546284015, 34.82301050261998],
        [113.56697228186611, 34.8230794770022],
        [113.56707896814156, 34.82314145363833],
        [113.5671866519726, 34.82320342989416],
        [113.56730530424285, 34.823272404952874],
        [113.56741398622616, 34.82333438133249],
        [113.56752366580177, 34.823396357362526],
        [113.56763035478316, 34.823459337276894],
        [113.56773604721097, 34.823522318418796],
        [113.56784174009105, 34.823584298951744],
        [113.56795840171922, 34.82365327854876],
        [113.56806509274989, 34.82371525920379],
        [113.56817178424451, 34.82377623925931],
        [113.56827947340484, 34.82383822001834],
        [113.56838816019234, 34.82390020045678],
        [113.56850582182767, 34.82396918174404],
        [113.56859057844467, 34.82401816786626],
        [113.5686892953319, 34.82407415094237],
        [113.56877405276872, 34.824125139740325],
        [113.56884983613533, 34.824170129337695],
        [113.56891664533839, 34.82420911965556],
        [113.56897846895785, 34.82424511075731],
        [113.56902433827786, 34.824273105589704],
        [113.56906223033695, 34.824295100209845],
        [113.56909015088632, 34.82431209710039],
        [113.5691110912815, 34.82432409401015],
        [113.56912006568128, 34.82432809150545],
        [113.56912106281311, 34.82432809076629],
        [113.56912106275931, 34.82432708972895],
        [113.56912205994502, 34.82432809002718],
        [113.56912305707695, 34.824328089288116],
        [113.56912505139475, 34.824329088847435],
        [113.56912505128714, 34.824327086772755],
        [113.5691210627055, 34.82432608869162],
        [113.56912006551984, 34.824325088393415],
        [113.5691210627055, 34.82432608869162],
        [113.56912205983738, 34.824326087952514],
        [113.56912405415513, 34.82432708751175],
        [113.56912405415513, 34.82432708751175],
        [113.56912305691554, 34.824325086176096],
      ],
    };
  },
  mounted() {
      
      
    this.initMap();
  },
  methods: {
      
      
    initMap() {
      
      
      let _self = this;
      //线路图
      this.roadmap = new TileLayer({
      
      
        visible: true,
        name: "电子图",
        source: new XYZ({
      
      
          url: 服务器地址+"/tiles/ZhengZhouShi/roadmap/{z}/{x}/{y}.png",
          crossOrigin: "anonymous", //离线瓦片跨域处理
        }),
      });
      this.map = new Map({
      
      
        target: "map",
        layers: [this.roadmap],
        view: new View({
      
      
          center: this.localtion,
          projection: "EPSG:4326",
          zoom: 14,
          minZoom: 12,
          maxZoom: 17,
        }),
      });

      // 创建图层
      this.vectorLayer = new VectorLayer();
      // 创建数据容器
      this.vectorSource = new VectorSource();
      // 把数据容器添加到图层
      this.vectorLayer.setSource(this.vectorSource);
      // 添加到地图上
      this.map.addLayer(this.vectorLayer);

      this.setPoint(this.localtion);
      this.translate();
    },
    //添加定位图标
    setPoint(local) {
      
      
      this.pointLayer = new Feature({
      
      
        name: "point点",
        geometry: new Point(local),
      });
      this.pointLayer.setStyle(
        new Style({
      
      
          image: new Icon({
      
      
            src: require("@/assets/image/air/uav.png"),
          }),
        })
      );
      this.vectorSource.addFeature(this.pointLayer);
      //定位过度动画
      this.map.getView().animate({
      
      
        center: local, // 中心点
        zoom: 14, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 500, // 缩放持续时间，默认不需要设置
      });
    },

    //初始化拖动实例对象
    translate() {
      
      
      const iTranslate = new Translate({
      
      
        features: new Collection([this.pointLayer]),
        hitTolerance: 10,
      });
      //这样是动态给map插入这个属性。
      this.map.addInteraction(iTranslate);
      iTranslate.on("translatestart", (e) => {
      
      
        //拖动开始的监听函数
        console.log("开始拖动");
      });
      iTranslate.on("translateend", (e) => {
      
      
        //拖到结束监听函数
        console.log("拖动结束");
      });
    },
  },
};
</script>

<style scoped lang="scss">
#map {
      
      
  width: 100%;
  height: 800px;
}
</style>