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

原创

已于 2023-08-10 10:40:49 修改 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #服务器

于 2023-08-10 10:28:53 首次发布

文章详细描述了如何使用Vue.js和OpenLayers库在Web应用中创建一个交互式地图，包括添加中心点、地图点击事件处理、地理坐标点的显示和路线追踪功能。

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

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: {},
      c