openLayers实战(四)：设置地图中心点、修改地图中心点

 截至到目前阶段的功能，我自己实现最完整的代码

import "ol/ol.css";
import Map from "ol/Map";
import Feature from "ol/Feature";
import VectorSource from "ol/source/Vector";
import Overlay from "ol/Overlay";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import View from "ol/View";
import { transform, fromLonLat } from "ol/proj";
import XYZ from "ol/source/XYZ";
import { Point, LineString } from "ol/geom";
import GeoJSON from "ol/format/GeoJSON";
import { Fill, Stroke, Icon, Style } from "ol/style";
import markerImg from "@/assets/images/fly.svg";
import markerCenter from "@/assets/images/centerPos.png";
import markerCurrent from "@/assets/images/curPos.png";


 data() {
    return {
      mapObj: null,
      mapDom: null,
      mapPointList: [],
      pointLayerSource: null,
      pointLayer: null, // 绘制地图中心点的图层
      markerIcon: markerImg,
      markerCenterIcon: markerCenter,
      markerCurrentIcon: markerCurrent,
      extent: [121.5509, 31.0865, 121.8109, 31.382],
      tileUrl: "http://192.168.1.103:8081" + "/{z}/{x}/{y}.jpg",
      routeLayer: {},
      featureMove: {},
      coordinates: [
        [121.70185, 31.298777],
        [121.70285, 31.296777],
        [121.70385, 31.295777],
        [121.70585, 31.294777],
      ],
      routeIndex: 0, //当前小车所在的路段
      carLayer: null,
      timer: null, // 计时器
      speed: null,
      coverPoints: [
        [121.70585, 31.294777],
        [121.70585, 31.294777],
      ],
      currentCoodinate: null,
      mapTypeFlag: false,
      centerPoint: { longitude: 121.70185, latitude: 31.298777 },
    };
  }, 
 mounted() {
    this.initMap();
    // this.openLine();

    // 设置 默认的中心点坐标
    this.addPoint(
      this.centerPoint,
      this.markerCenterIcon,
      "centerIconLayer",
      "centerIconFeatureId"
    );

    this.mapObj.on("click", (evt) => {
      // 获取当前点击点的 feature，如果存在就移除
      const feature = this.pointLayerSource.getFeatureById("curIconFeatureId");
      if (feature) {
        this.pointLayerSource.removeFeature(feature);
      }
      this.addFeature(evt, this.markerCurrentIcon, "curIconFeatureId");
    });
  },
  methods: {
    initMap() {
      // 获取地图容器
      this.mapDom = document.getElementById("map");
      // 初始化地图配置
      this.mapObj = new Map({
        target: this.mapDom, // 地图容器
        view: new View({
          center: [121.70185, 31.298777], // 地图中心点
          zoom: 15,
          minZoom: 14,
          maxZoom: 18,
          // EPSG: 3857 --web地图，基于球体的、web墨卡托投影（伪墨卡托投影Pseudo-Mercator）的投影坐标系，范围为纬度85度以下，由于google地图最先使用而成为事实标准。至今，大多互联网地图都使用EPSG3857，主要是因为该投影是等角投影，适合地图定向及导航，但是纬度越高，面积变形越大。
          // EPSG: 4326 --全球通用，基于WGS84椭球的经纬度坐标系，大地坐标系
          projection: "EPSG:4326", // 投影
          extent: this.extent,
        }),
      });

      // 添加一个使用离线瓦片地图的层
      const offlineMapLayer = new TileLayer({
        source: new XYZ({
          url: this.tileUrl,
        }),
      });
      // 将图层添加到地图
      this.mapObj.addLayer(offlineMapLayer);
    },
  // 加载地理坐标 -- 设置中心点
    handleSetMapCenter() {
      // 获取当前点击点、默认中心点的feature
      const curFeature =
        this.pointLayerSource.getFeatureById("curIconFeatureId");
      const centerFeature = this.pointLayerSource.getFeatureById(
        "centerIconFeatureId"
      );
      if (!curFeature || !centerFeature) {
        return;
      }
      // 首先移除curFeature
      this.pointLayerSource.removeFeature(curFeature);
      // 这里直接修改 原来中心点的坐标及样式
      centerFeature.getGeometry().setCoordinates(this.currentCoodinate);

      const newStyle = new Style({
        image: new Icon({
          color: "#ffffff",
          crossOrigin: "anonymous",
          src: this.markerCenterIcon,
        }),
      });
      centerFeature.setStyle(newStyle);
      // 修改原来中心点的坐标值
      this.centerPoint = {
        longitude: this.currentCoodinate[0],
        latitude: this.currentCoodinate[1]
      }
    },
    // 回到中心点
    handleBackMapCenter() {
      let view = this.mapObj.getView();
      view.setZoom(15);
      view.setCenter([this.centerPoint.longitude, this.centerPoint.latitude], "EPSG:4326", "EPSG:3857");
      this.mapObj.render();
    },
       // 地图点击事件
    addFeature(evt, src, id) {
      this.currentCoodinate = evt.coordinate;
      if (!Array.isArray(this.currentCoodinate)) {
        return;
      }
      const location = {
        longitude: this.currentCoodinate[0],
        latitude: this.currentCoodinate[1],
      };
      // 创建点击后的元素
      const point = new Feature({
        geometry: new Point([location.longitude, location.latitude]),
        data: location,
      });
      // 点的样式
      const iconStyle = new Style({
        image: new Icon({
          color: "#ffffff",
          crossOrigin: "anonymous",
          src: src,
        }),
      });
      // 设置样式
      point.setStyle(iconStyle);
      point.setId(id);
      this.addFeatureToLayer(point, "centerIconLayer");
    },
    // 在图层上新增元素
    addFeatureToLayer(feature, layerId) {
      const layer = this.getLayerById(layerId);
      const layerSource = layer.getSource();
      layerSource.addFeature(feature);
    },
    // 根据图层id来获取图层
    getLayerById(layerId) {
      const layers = this.mapObj.getLayers().getArray();
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].get("id") === layerId) {
          return layers[i];
        }
      }
      return null;
    },
    // 添加地理坐标点
    addPoint(location, src, layerId, featureId) {
      // 地理坐标数组
      const pointData = [location];

      pointData.map((item) => {
        // 创建点
        const point = new Feature({
          geometry: new Point([item.longitude, item.latitude]),
          data: item,
        });
        // 点的样式
        const iconStyle = new Style({
          image: new Icon({
            color: "#ffffff",
            crossOrigin: "anonymous",
            src: src,
          }),
        });
        // 设置样式
        point.setStyle(iconStyle);
        point.setId(featureId);
        this.mapPointList.push(point);
      });

      // 创建geojson据源
      this.pointLayerSource = new VectorSource({ features: this.mapPointList });
      // 创建图层 并加载数据
      this.pointLayer = new VectorLayer({
        source: this.pointLayerSource,
        // 图层的id，这也非常重要
        id: layerId,
      });
      // 将图层添加地图上
      this.mapObj.addLayer(this.pointLayer);
    }, 
}