在前几期实现离线地图初始化以及规划某一特定区域、打点、出现弹窗的基础上，本文主要阐述如何实现在所规划的区域地图上画线，如果你实现了打点的效果，其实这个相对来说还是算比较简单的，因为和打点的代码大差不差。使用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()
}
