Vue2+OpenLayers实现折线绘制功能（提供Gitee源码）

news2025/4/21 13:41:58

一、案例截图

二、安装OpenLayers库

三、代码实现

3.1、初始变量

3.2、画一条折线

3.3、完整代码

四、Gitee源码

一、案例截图

二、安装OpenLayers库

npm install ol

三、代码实现

3.1、初始变量

关键代码：

data() {
  return {
    map:null,
    // 定义路径坐标
    pointList: [
      [120.430070,31.938140],
      [120.428570,31.939100],
      [120.429530,31.941680],
      [120.431240,31.943580],
      [120.432410,31.944820],
      [120.433600,31.943970],
    ],
  }
},

3.2、画一条折线

思路：

1、使用Feature类，LineString代表线段，传入经纬度集合创建线特征。

2、VectorSource用于存储矢量特征的数据源，这里创建的矢量源存储刚刚创建的lineFeature。

3、VectorLayer创建一个矢量层，在地图的不同z-index（层级）上显示特征。z-index设置为1，确保线条在其他图层之上绘制，将创建的矢量层添加到地图上，使得线条得以在地图上可视化。

关键代码：

drawLine(){
  // 创建线特征
  const lineFeature = new Feature({
    geometry: new LineString(this.pointList),
  });

  // 设置线样式
  const lineStyle = new Style({
    stroke: new Stroke({
      color: '#25C2F2',
      width: 4,
      lineDash: [10, 8], // 使用点划线 数组的值来控制虚线的长度和间距
    }),

  });
  lineFeature.setStyle(lineStyle);

  // 创建矢量层并添加特征
  const vectorSource = new VectorSource({
    features: [lineFeature],
  });
  const vectorLayer = new VectorLayer({
    source: vectorSource,
    zIndex: 1
  });

  // 将矢量层添加到地图
  this.map.addLayer(vectorLayer);
  // 设置地图视图以适应路径
  this.map.getView().fit(lineFeature.getGeometry().getExtent(), {
    padding: [20, 20, 20, 20],
    maxZoom: 18,
  });
},

3.3、完整代码

<template>
  <div>
    <div id="map-container"></div>
  </div>
</template>
<script>
import {Feature, 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 {LineString, Point} from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import {Icon, Stroke, Style} from "ol/style";

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,
      // 定义路径坐标
      pointList: [
        [120.430070,31.938140],
        [120.428570,31.939100],
        [120.429530,31.941680],
        [120.431240,31.943580],
        [120.432410,31.944820],
        [120.433600,31.943970],
      ],
    }
  },
  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: [118.958366,32.119577],
          projection: projection,
          zoom: 12,
          maxZoom: 17,
          minZoom: 1
        }),
        //加载控件到地图容器中
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false
        })
      });
      this.drawLine();
    },
    //画线
    drawLine(){
      // 创建线特征
      const lineFeature = new Feature({
        geometry: new LineString(this.pointList),
      });

      // 设置线样式
      const lineStyle = new Style({
        stroke: new Stroke({
          color: '#25C2F2',
          width: 4,
          lineDash: [10, 8], // 使用点划线 数组的值来控制虚线的长度和间距
        }),

      });
      lineFeature.setStyle(lineStyle);

      // 创建矢量层并添加特征
      const vectorSource = new VectorSource({
        features: [lineFeature],
      });
      const vectorLayer = new VectorLayer({
        source: vectorSource,
        zIndex: 1
      });

      // 将矢量层添加到地图
      this.map.addLayer(vectorLayer);
      // 设置地图视图以适应路径
      this.map.getView().fit(lineFeature.getGeometry().getExtent(), {
        padding: [20, 20, 20, 20],
        maxZoom: 18,
      });
    },
  },

}
</script>
<style scoped>

#map-container {
  width: 100%;
  height: 100vh;
}

</style>