openlayers如何使用（二）点线的创建

在完成地图的创建后，在地图中怎么去创建点和线元素呢，如何实现下图的模拟线路的效果呢

① 先了解一下如何在地图中加载一个点元素
首先需要在地图中创建一个具有几何和其他属性属性的地理特征的矢量对象（feature），然后在其中就可以new一个点元素了（point），点元素可以对他去设置相应的style让显示的样式发生改变，或者new一个icon用图片去展示点的效果，在创建好点后需要将点加载到对应的源中（source）

图层是派生所有层类型的基类，我们在地图中创建的任何元素，想要显示，都必须加载进图层中，最后将图层加载进地图，这一整个闭环就结束了
② 处理地图中的点数据
在获取到地图数据后，将数据处理为你想要的格式，可以将点与线的数据分开通过变量进行存储

let points = [];
this.mapData = JSON.parse(res.Data);
// 添加点数据
this.basicPoints = this.mapData.Gislnglats;
for (let c = 0; c < this.basicPoints.length; c++) {
	if (this.basicPoints[c].Type != 3) {
		points.push(this.basicPoints[c]);
	}
}

然后就是对点数据进行循环创建

for (let i = 0; i < points.length; i++) {
	let position = [points[i].Longitude, points[i].Latitude];
	//创建点元素并设置坐标
	this.featurePoint = new Feature({geometry: new Point(fromLonLat(position))});
	// 通过type的不同选择不同的图片
		if (points[i].Type === 1) {
			this.pointsIcon = 'img/icon/jcz.png'
		} else if (points[i].Type === 2){
			this.pointsIcon = 'img/icon/gjx.png'
		} else if (points[i].Type === 4){
            this.pointsIcon = 'img/icon/bs.png'
        } else if (points[i].Type === 5){
            this.pointsIcon = 'img/icon/dg.png'
        } else if (points[i].Type === 8){
            this.pointsIcon = 'img/icon/jth.png'
        } else if(points[i].Type === 3){
            this.pointsIcon = 'img/icon/gzd_big.png'
        }
    // 设置样式 
	let style = new Style({
		image: new Icon({
			anchor: [0.5, 0.5],              // 锚点
			opacity: 1,						 // 透明度
			scale: 1,						 // 大小
			src: this.pointsIcon,			 // 路径
		}),
	})
	// 将样式赋予点
	this.featurePoint.setStyle(style);
	// 将点元素的值传入几何体中
	this.featurePoint.set("mapPoints", true);
    this.featurePoint.set("points",points[i])
    // 将所有的点加入到一个数组中，最后加载进源
    this.features.push(this.featurePoint);
}

③ 线的创建于点是相同的，上图中线的样式其实是两条线叠加在一起形成的，给每条线设置不同的样式与层级，来展示，还可以通过改变线的偏移量，来得到一条具有动态效果的线

 // 添加线数据
let lineData = this.mapData.Polylines;
let line_GL = [];
let line_QX = [];
let polylines_GL = [];
let polylines_QX = [];
	for (let k = 0; k < lineData.length; k++) {
		if (lineData[k].PipeType === 1) {
			line_QX.push(lineData[k]);
		} else {
			line_GL.push(lineData[k]);
		}
	}
// 线路1
for (let m = 0; m < line_QX.length; m++) {
	let coordinates_QX = [
		fromLonLat([
			line_QX[m].Gislnglats[0].Longitude, line_QX[m].Gislnglats[0].Latitude
		]),
		fromLonLat([
			line_QX[m].Gislnglats[1].Longitude, line_QX[m].Gislnglats[1].Latitude
		])
	];
	let polyline_QX = new Feature({
  		geometry: new LineString(coordinates_QX),
		state: 'line',
		dashOffset: 0
                    })
	let style_QX = new Style({
		stroke: new Stroke({
			color: '#fff',
			width: 2
		})
	})
	polyline_QX.setStyle(style_QX)
	polyline_QX.set('mapLines_QX', true)
	polyline_QX.set('data_QX', line_QX[m])
	polylines_QX.push(polyline_QX)
}
// 线路2
	for (let j = 0; j < line_GL.length; j++) {
		let coordinates_GL = [
			fromLonLat([
				line_GL[j].Gislnglats[0].Longitude, line_GL[j].Gislnglats[0].Latitude
			]), 
			fromLonLat([
				line_GL[j].Gislnglats[1].Longitude, line_GL[j].Gislnglats[1].Latitude
			])
		];
		let polyline_GL = new Feature({
 			geometry: new LineString(coordinates_GL),
				state: 'line',
				dashOffset: 0
		})
		let style_GL = new Style({
			stroke: new Stroke({
				color: '#2a90cb85',
				width: 12
			})
		})
		polyline_GL.setStyle(style_GL)
        polyline_GL.set('mapLines_GL', true)
        polyline_GL.set('data_GL', line_GL[j])
        polylines_GL.push(polyline_GL)
}

④ 在创建完点和线后，我们将他们都添加到矢量层中，最后加入地图

// 矢量图层
this.layer = new VectorLayer();
// 矢量数据源
this.source = new VectorSource();
this.source.addFeatures(this.features);
this.source.addFeatures(polylines_GL);
this.source.addFeatures(polylines_QX);
this.layer.setSource(this.source);
this.map.addLayer(this.layer);

这样我们就完成了地图中点与线的创建