openlayers+vite+vue3实现在地图上画线（四）

在前几期实现离线地图初始化以及规划某一特定区域、打点、出现弹窗的基础上，本文主要阐述如何实现在所规划的区域地图上画线，如果你实现了打点的效果，其实这个相对来说还是算比较简单的，因为和打点的代码大差不差。使用openlayers这个技术研究的内容挺多，这个就需要自己多去专研专研了。

提示：因本文实现的具体效果部分涉及到前面文章的知识点，如有不明白的小伙伴可进行查看前几期的文章哦，文章的的实现流程也是按照步骤来的，但是打点和画线不分先后顺序，由于前几期已经阐述过地图初始化这些具体步骤，所以这篇文章不在进行具体代码的演示，只展示需要实现画线的代码。

目录

一、模拟传入的画线数据

二、实现画线方法

1.计算两个中心点

2.设置线条样式

3.遍历线条数据

4.设置线条数据源和线条图层

5.将线条图层添加到地图

 6.整合所有代码

三、初始化地图中调用画线方法

一、模拟传入的画线数据

因为考虑到做项目可能地图的画线数据来于后端，这里就简单模拟一下具体画线的后端数据格式，方便能正常显示地图上的线。强调一下这个数据只是为了便于前端正常查看，若正常做项目，数据应该是后端传给前端，这里的type是为了便于区分线条的颜色，如果项目中没有这项要求，可无需考虑，lineData中是经纬度的数据。

const lines = ref([
  {
    type: '500',
    lineData: [
      {
        lon: 120.303543,
        lat: 31.681019
      },
      {
        lon: 120.266053,
        lat: 31.550228
      }
    ]
  },
  {
    type: '220',
    lineData: [
      {
        lon: 120.296595,
        lat: 31.550228
      },
      {
        lon: 120.275891,
        lat: 31.910984
      }
    ]
  },
  {
    type: '500',
    lineData: [
      {
        lon: 120.303543,
        lat: 31.681019
      },
      {
        lon: 120.266053,
        lat: 31.550228
      }
    ]
  },
  {
    type: '220',
    lineData: [
      {
        lon: 120.296595,
        lat: 31.550228
      },
      {
        lon: 120.275891,
        lat: 31.910984
      }
    ]
  }
])

二、实现画线方法

1.计算两个中心点

为了使所画的线至于两个点的中心，这个写了一个计算两个中心的方法。后续在画线方法中进行使用即可。

const getMidPoint = (point1, point2) => {
  const lon1 = point1[0]
  const lat1 = point1[1]
  const lon2 = point2[0]
  const lat2 = point2[1]
  const deltaLon = (lon2 - lon1) / 2
  const deltaLat = (lat2 - lat1) / 2
  return [lon1 + deltaLon, lat1 + deltaLat]
}

2.设置线条样式

设置线条的具体样式，因为可能线条的颜色会不一样，所以这里将颜色图标作为变量。

// 线样式
  const getLineStyle = color => {
    return new Style({
      stroke: new Stroke({
        color: color,
        width: 1.5
      })
    })
  }

3.遍历线条数据

 var lineFeature = new Array()
  let lineFeature2 = null
  lines.value.map((line, index) => {
    // 确保线在两个点中间
    const points = line.lineData.map(item => fromLonLat([item.lon, item.lat]))
    if (points.length >= 2) {
      // 确保至少有两个点
      const midPoint = getMidPoint(points[0], points[1]) // 计算中点
      const lineDataWithMidPoint = [points[0], midPoint, points[1]] // 创建包含中点的数组
      const lineFeature2 = new Feature({
        geometry: new LineString(lineDataWithMidPoint)
      })

      // 根据类型设置线的样式
      if (line.type == '500') {
        lineFeature2.setStyle(getLineStyle('#048c12'))
      } else if (line.type == '220') {
        lineFeature2.setStyle(getLineStyle('#fe0303'))
      } else if (line.type == '110') {
        lineFeature2.setStyle(getLineStyle('#036bf9'))
      } 

      lineFeature.push(lineFeature2)
    }
  })

4.设置线条数据源和线条图层

const linesSource = new VectorSource({
    features: lineFeature
  })

  const lineLayer = new VectorLayer({
    zIndex: 665,
    source: linesSource,
    style: function (feature, resolution) {
      return feature.getStyle()
    }
  })

5.将线条图层添加到地图

map.value.addLayer(lineLayer)

6.整合所有代码

//画线
const drawLine = () => {
  // 线样式
  const getLineStyle = color => {
    return new Style({
      stroke: new Stroke({
        color: color,
        width: 1.5
      })
    })
  }
  // let newLines = val || []
  var lineFeature = new Array()
  let lineFeature2 = null
  lines.value.map((line, index) => {
    // 确保线在两个点中间
    const points = line.lineData.map(item => fromLonLat([item.lon, item.lat]))
    if (points.length >= 2) {
      // 确保至少有两个点
      const midPoint = getMidPoint(points[0], points[1]) // 计算中点
      const lineDataWithMidPoint = [points[0], midPoint, points[1]] // 创建包含中点的数组
      const lineFeature2 = new Feature({
        geometry: new LineString(lineDataWithMidPoint)
      })

      // 根据类型设置线的样式
      if (line.type == '500') {
        lineFeature2.setStyle(getLineStyle('#048c12'))
      } else if (line.type == '220') {
        lineFeature2.setStyle(getLineStyle('#fe0303'))
      } else if (line.type == '110') {
        lineFeature2.setStyle(getLineStyle('#036bf9'))
      } 
      lineFeature.push(lineFeature2)
    }
  })
  const linesSource = new VectorSource({
    features: lineFeature
  })

  const lineLayer = new VectorLayer({
    zIndex: 665,
    source: linesSource,
    style: function (feature, resolution) {
      return feature.getStyle()
    }
  })

  map.value.addLayer(lineLayer)
}

三、初始化地图中调用画线方法

// 初始化地图
const init = () => {
   drawLine()
}